/* Harav GPT public site – the "seforim library" identity on paper: parchment, ink navy, restrained gold.
   Standalone (does not load the app theme). Fonts self-hosted: Frank Ruhl Libre (display), Heebo (text). */
@import url(/static/fonts/fonts.css);
:root {
  --paper:#f4efe4; --paper-2:#ece5d6; --sheet:#fbf8f1; --ink:#1b2638; --ink-2:#3a4558; --muted:#635d51;
  --rule:#d8cdb8; --rule-soft:#e6dece; --gold:#9c7a3c; --gold-ink:#7a5c28; --gold-2:#b8975a; --gold-soft:#efe4cc;
  --navy:#1b2638; --navy-2:#24324a; --ok:#3f6a3c; --danger:#8f2d24;
  --serif:"Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --sans:"Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0 0.18  0 0 0 .055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --wrap:1160px; --hd:68px;
  color-scheme:light;
}
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hd) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } }
body.site { margin:0; font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--ink); background:var(--paper) var(--grain);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
:lang(he) body.site, :lang(yi) body.site, html[dir=rtl] body.site { font-size:17.5px; }
h1, h2, h3 { font-family:var(--serif); font-weight:600; color:var(--ink); line-height:1.15; margin:0; letter-spacing:.003em; }
p { margin:0; }
a { color:var(--ink); text-decoration-color:color-mix(in srgb, var(--gold) 60%, transparent); text-underline-offset:3px; }
a:hover { text-decoration-color:var(--gold); }
:focus-visible { outline:2px solid var(--gold-2); outline-offset:3px; border-radius:2px; }
::selection { background:var(--gold-soft); }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.wrap.narrow { max-width:820px; }
.skip { position:absolute; inset-inline-start:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; border-radius:3px; }
.skip:focus { top:12px; }
.heb { font-family:var(--serif); font-weight:600; }
.bsd { font-family:var(--serif); font-size:.82rem; color:var(--muted); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:500 .95rem/1 var(--sans); padding:11px 18px; min-height:42px;
  border-radius:3px; border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s, transform .08s; }
.btn:active { transform:translateY(1px); }
.btn-lg { font-size:1.02rem; padding:14px 26px; min-height:50px; }
.btn-ink { background:var(--navy); color:#fbf8f1; border-color:var(--navy); box-shadow:inset 0 -2px 0 rgba(0,0,0,.18); }
.btn-ink:hover { background:var(--navy-2); }
.btn-line { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-line:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-quiet { background:transparent; color:var(--ink); }
.btn-quiet:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-gold { background:#d3ae63; color:#16202f; border-color:#d3ae63; }
.btn-gold:hover { background:#e2c27e; }
.btn-onink { background:transparent; color:#f4efe4; border-color:color-mix(in srgb, #f4efe4 55%, transparent); }
.btn-onink:hover { border-color:#f4efe4; }

/* ---------- header ---------- */
.site-hd { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent; transition:border-color .2s; }
.site-hd.scrolled { border-bottom-color:var(--rule); }
.hd-row { height:var(--hd); display:flex; align-items:center; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none; }
.brand .seal { color:var(--gold); flex:none; }
.brand-name { font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:.01em; white-space:nowrap; }
.hd-nav { display:flex; align-items:center; gap:4px; flex:1; }
.hd-nav a { text-decoration:none; color:var(--ink-2); font-size:.95rem; padding:8px 12px; border-radius:3px; }
.hd-nav a:hover, .hd-nav a[aria-current=page] { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.hd-nav a[aria-current=page] { box-shadow:inset 0 -2px 0 var(--gold); }
.hd-lang { margin-inline-start:auto; color:var(--ink-2); }
.hd-actions { display:flex; align-items:center; gap:8px; flex:none; }
.hd-menu { display:none; background:transparent; border:1px solid var(--rule); color:var(--ink); border-radius:3px; width:42px; height:42px; padding:0; align-items:center; justify-content:center; cursor:pointer; }
.langseg { --langseg-bg:var(--ink); --langseg-on:#fbf8f1; }

/* ---------- shared ---------- */
.eyebrow { font:600 .76rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:18px;
  display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before { content:""; width:26px; height:1px; background:var(--gold); }
html[dir=rtl] .eyebrow { letter-spacing:.02em; font-size:.85rem; }
.lead { font-size:1.15rem; color:var(--ink-2); max-width:38em; }
.fineprint { font-size:.88rem; color:var(--muted); }
.center { text-align:center; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; }
.sect { padding:96px 0; }
.sect-tight { padding:40px 0 96px; }
.sect-paper { background:color-mix(in srgb, var(--paper-2) 70%, transparent); border-block:1px solid var(--rule-soft); }
.sect-hd { max-width:760px; margin-bottom:52px; }
.sect-hd h2 { font-size:clamp(1.7rem, 3.2vw, 2.45rem); }
.ornament { display:flex; align-items:center; gap:14px; max-width:420px; margin:0 auto; color:var(--gold); padding:8px 28px; }
.ornament span { flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-2)); }
.ornament span:last-child { background:linear-gradient(270deg, transparent, var(--gold-2)); }
.sheet { background:var(--sheet); border:1px solid var(--rule); border-radius:4px; padding:30px; position:relative; }
.sheet::after { content:""; position:absolute; inset:5px; border:1px solid var(--rule-soft); border-radius:2px; pointer-events:none; }
.sheet > * { position:relative; z-index:1; }

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; padding:72px 0 40px; }
.hero::before { content:"ה"; position:absolute; inset-inline-end:-4%; top:-14%; font:700 min(62vw, 720px)/1 var(--serif); color:var(--gold); opacity:.045; pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:64px; align-items:center; position:relative; }
.hero h1 { font-size:clamp(2.5rem, 5.6vw, 4.35rem); line-height:1.04; letter-spacing:-.01em; margin-bottom:24px; }
.hero h1 em { font-style:normal; color:var(--gold-ink); }
.hero .lead { margin-bottom:32px; }
.hero .fineprint { margin-top:16px; }
.folio { margin:0; background:var(--sheet); border:1px solid var(--rule); border-radius:4px; padding:38px 34px 30px; position:relative;
  box-shadow:0 1px 0 var(--rule-soft), 0 30px 60px -32px rgba(27,38,56,.35); }
.folio::before { content:""; position:absolute; inset:7px; border:1px solid var(--rule-soft); border-radius:2px; pointer-events:none; }
.folio-corner { position:absolute; width:46px; height:46px; color:var(--gold-2); }
.folio-corner.tl { top:14px; inset-inline-start:14px; }
.folio-corner.br { bottom:14px; inset-inline-end:14px; transform:rotate(180deg); }
html[dir=rtl] .folio-corner.tl { transform:scaleX(-1); }
html[dir=rtl] .folio-corner.br { transform:rotate(180deg) scaleX(-1); }
.folio-cap { position:absolute; top:-11px; inset-inline-start:28px; background:var(--paper); border:1px solid var(--rule); border-radius:999px;
  font:600 .7rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); padding:5px 10px; }
.folio .who { display:block; font:600 .72rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.folio .q { position:relative; padding:0 0 22px; margin:6px 22px 22px; border-bottom:1px solid var(--rule-soft); }
.folio .q p { font-family:var(--serif); font-size:1.18rem; line-height:1.4; }
.folio .a { position:relative; margin:0 22px; }
.folio .a p { color:var(--ink-2); }
.folio .a .heb { color:var(--ink); }
.folio .src { display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:6px 12px; border:1px solid var(--gold-2); border-radius:999px;
  font-size:.86rem; color:var(--gold-ink); background:color-mix(in srgb, var(--gold-soft) 55%, transparent); }
.folio .rav { margin-top:16px; font-size:.84rem; color:var(--muted); font-style:italic; }
.hero-points { display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:64px; padding-top:26px; border-top:1px solid var(--rule); color:var(--ink-2); font-size:.95rem; }
.hero-points span { display:inline-flex; align-items:center; gap:10px; }
.hero-points svg { color:var(--gold); flex:none; }

/* ---------- features ---------- */
.features { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--rule); border-inline-start:1px solid var(--rule); }
.features li { padding:30px 26px 34px; border-bottom:1px solid var(--rule); border-inline-end:1px solid var(--rule); background:color-mix(in srgb, var(--sheet) 55%, transparent); transition:background-color .2s; }
.features li:hover { background:var(--sheet); }
.features .ico { display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; color:var(--gold-ink); border:1px solid var(--gold-2); border-radius:3px; margin-bottom:22px;
  box-shadow:inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--gold-2) 45%, transparent); }
.features .ico svg { width:24px; height:24px; }
.features h3 { font-size:1.22rem; margin-bottom:10px; }
.features p { font-size:.95rem; color:var(--ink-2); }

/* ---------- steps ---------- */
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; counter-reset:s; }
.steps li { position:relative; padding-top:26px; border-top:1px solid var(--ink); }
.steps .num { display:block; font:500 3.2rem/1 var(--serif); color:var(--gold); margin-bottom:18px; }
.steps h3 { font-size:1.3rem; margin-bottom:8px; }
.steps p { color:var(--ink-2); }

/* ---------- trust ---------- */
.charter { max-width:860px; margin:0 auto; text-align:center; padding:56px 56px 52px; border:1px solid var(--gold-2); position:relative; background:var(--sheet); }
.charter::before { content:""; position:absolute; inset:6px; border:1px solid color-mix(in srgb, var(--gold-2) 50%, transparent); pointer-events:none; }
.charter h2 { font-size:clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom:20px; }
.charter p { color:var(--ink-2); max-width:40em; margin:0 auto 12px; font-size:1.06rem; }

/* ---------- FAQ ---------- */
.faq { border-top:1px solid var(--rule); }
.faq details { border-bottom:1px solid var(--rule); }
.faq summary { list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font:600 1.16rem/1.35 var(--serif); }
html[dir=rtl] .faq summary { padding:22px 0 22px 44px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; position:absolute; inset-inline-end:8px; top:50%; width:11px; height:11px; margin-top:-8px; border-inline-end:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(45deg); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(225deg); margin-top:-2px; }
.faq details p { padding:0 0 24px; color:var(--ink-2); max-width:44em; }

/* ---------- CTA band ---------- */
.cta-band { background:var(--navy) var(--grain); color:#f4efe4; padding:88px 0; text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:14px; border:1px solid color-mix(in srgb, #d3ae63 35%, transparent); pointer-events:none; }
.cta-band h2 { color:#f4efe4; font-size:clamp(1.8rem, 3.6vw, 2.7rem); max-width:22em; margin:0 auto 14px; }
.cta-band p { color:#d9cfbb; margin-bottom:30px; }
.cta-band .cta-row { justify-content:center; }

/* ---------- inner pages ---------- */
.page-hero { padding:72px 0 24px; text-align:center; }
.page-hero .eyebrow { justify-content:center; }
.page-hero h1 { font-size:clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom:18px; }
.page-hero .lead { margin:0 auto; }
.trial-pill { display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:9px 18px; border:1px solid var(--gold-2); border-radius:999px; color:var(--gold-ink); background:var(--sheet); font-weight:500; }
.plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(235px, 1fr)); gap:20px; align-items:stretch; max-width:1200px; margin:0 auto; }
.plan { display:flex; flex-direction:column; gap:18px; padding:34px 30px 30px; }
.plan.hl { border-color:var(--gold); box-shadow:0 30px 60px -36px rgba(27,38,56,.4); }
.plan.hl::after { border-color:color-mix(in srgb, var(--gold-2) 55%, transparent); }
.plan .badge { position:absolute; top:-12px; inset-inline-start:26px; background:var(--navy); color:#f4efe4; font:600 .7rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:999px; z-index:2; }
.plan h2 { font-size:1.5rem; }
.plan .tag { color:var(--ink-2); font-size:.95rem; min-height:1.5em; }
.plan .price { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:16px 0; border-block:1px solid var(--rule-soft); min-width:0; }
.plan .amt { font:600 clamp(2rem, 1.2rem + 1.6vw, 2.7rem)/1 var(--serif); white-space:nowrap; direction:ltr; unicode-bidi:isolate; }
.plan .per { color:var(--muted); white-space:nowrap; }
.plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.plan li { display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:.96rem; }
.plan li svg { flex:none; margin-top:4px; color:var(--gold); }
.bill-toggle { display:flex; width:max-content; margin:0 auto 34px; padding:4px; border:1px solid var(--rule); border-radius:999px; background:color-mix(in srgb, var(--paper) 70%, #fff); }
.bill-toggle button { font:600 .9rem/1 var(--sans); padding:10px 20px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); cursor:pointer; min-height:40px; }
.bill-toggle button[aria-checked="true"] { background:var(--navy); color:#f4efe4; }
.bill-toggle button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.plan .alt { color:var(--muted); font-size:.85rem; margin-top:-10px; }
.plan .seats { color:var(--ink-2); font-size:.9rem; }
.plans-empty { max-width:640px; margin:0 auto; text-align:center; padding:52px 40px; }
.plans-empty h2 { font-size:1.9rem; margin-bottom:14px; }
.plans-empty p { color:var(--ink-2); margin-bottom:26px; }
#plansNote { margin-top:30px; }
.contact-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:26px; align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:18px; }
.contact-form label { display:flex; flex-direction:column; gap:7px; font-size:.92rem; font-weight:500; color:var(--ink-2); }
.contact-form input, .contact-form select, .contact-form textarea { font:inherit; font-size:1rem; color:var(--ink); background:#fffdf8; border:1px solid var(--rule); border-radius:3px; padding:12px 14px; width:100%; }
.contact-form textarea { resize:vertical; min-height:150px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline:none; border-color:var(--gold-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold-2) 24%, transparent); }
.contact-form select { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239c7a3c' stroke-width='1.4'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-inline-end:36px; }
html[dir=rtl] .contact-form select { background-position:left 14px center; }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.hp { position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.form-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.form-msg { font-size:.95rem; }
.form-msg.ok { color:var(--ok); } .form-msg.err { color:var(--danger); }
.contact-side { display:flex; flex-direction:column; gap:22px; }
.contact-side h2 { font-size:1.3rem; margin-bottom:16px; }
.contact-side p { color:var(--ink-2); margin-bottom:18px; }
.reach { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.reach li { display:flex; gap:12px; align-items:center; color:var(--ink-2); }
.reach svg { color:var(--gold); flex:none; }
.reach a { word-break:break-all; }
.sheet-quiet { background:transparent; }
.draft-banner { display:inline-block; margin-top:20px; padding:10px 16px; border:1px dashed var(--danger); color:var(--danger); background:#f6e3dc; border-radius:3px; font-size:.95rem; }
.legal-text { white-space:pre-wrap; line-height:1.75; }
.legal-empty { text-align:center; color:var(--ink-2); }

/* ---------- footer ---------- */
.site-ft { border-top:1px solid var(--rule); padding:64px 0 28px; background:color-mix(in srgb, var(--paper-2) 55%, transparent); }
.ft-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
.ft-brand p { color:var(--ink-2); margin-top:16px; max-width:24em; font-size:.95rem; }
.ft-brand .ft-note { font-size:.85rem; color:var(--muted); font-style:italic; }
.ft-col { display:flex; flex-direction:column; gap:10px; }
.ft-col h2 { font:600 .74rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:6px; }
html[dir=rtl] .ft-col h2 { letter-spacing:.02em; font-size:.85rem; }
.ft-col a { text-decoration:none; color:var(--ink-2); font-size:.95rem; }
.ft-col a:hover { color:var(--ink); text-decoration:underline; }
.ft-base { display:flex; justify-content:space-between; margin-top:48px; padding-top:22px; border-top:1px solid var(--rule-soft); color:var(--muted); font-size:.85rem; }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .features { grid-template-columns:repeat(2, 1fr); }
  .hero-grid { gap:44px; }
}
@media (max-width: 900px) {
  :root { --hd:62px; }
  .hd-row { gap:12px; }
  .hd-menu { display:inline-flex; }
  .hd-nav { position:fixed; inset:var(--hd) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; padding:10px 20px 20px;
    background:var(--paper) var(--grain); border-bottom:1px solid var(--rule); box-shadow:0 20px 40px -24px rgba(27,38,56,.35); display:none; }
  .site-hd.open .hd-nav { display:flex; }
  .hd-nav a { padding:14px 6px; border-bottom:1px solid var(--rule-soft); font-size:1.05rem; border-radius:0; }
  .hd-lang { margin:16px 0 0; }
  .hero-grid { grid-template-columns:1fr; }
  .hero { padding-top:44px; }
  .folio { max-width:560px; }
  .steps { grid-template-columns:1fr; gap:34px; }
  .contact-grid { grid-template-columns:1fr; }
  .ft-grid { grid-template-columns:1fr 1fr; }
  .ft-brand { grid-column:1 / -1; }
  .sect { padding:72px 0; }
}
@media (max-width: 560px) {
  body.site { font-size:16px; }
  .wrap { padding:0 18px; }
  .brand-name { font-size:1.08rem; }
  .brand .seal { width:28px; height:28px; }
  .hd-actions { gap:4px; margin-inline-start:auto; }
  .hd-actions .btn { padding:8px 11px; min-height:38px; font-size:.86rem; }
  .hd-menu { width:38px; height:38px; }
  .features { grid-template-columns:1fr; }
  .features li { padding:26px 20px; }
  .hero h1 { font-size:2.35rem; }
  .folio { padding:30px 18px 24px; }
  .folio .q, .folio .a { margin-inline:10px; }
  .hero-points { margin-top:44px; flex-direction:column; gap:12px; }
  .cta-row .btn { flex:1 1 100%; }
  .charter { padding:40px 22px; }
  .sheet { padding:24px 18px; }
  .f2 { grid-template-columns:1fr; }
  .cta-band { padding:70px 0; }
  .ft-grid { grid-template-columns:1fr; gap:30px; }
  .page-hero { padding-top:48px; }
}
@media (max-width: 380px) { .brand-name { display:none; } }