/* MARAEL web — BLOOM (Rule 7/Rule 27). Warm, human, organic. Light-first. */
:root{
  --bg:#F2EDE1; --surface:#FFFFFF; --alt:#F6F1E6;
  --forest:#3E4A34; --sage:#7C8C5A; --sage-soft:#E7EAD9;
  --terra:#C67A4E; --terra-ink:#A24E29; --sage-ink:#5A6B3E; --terra-soft:#F6E4D6; --wheat:#D9B77A; --bark:#5A4632;
  --ink:#3E4A34; --ink2:#6F6552; --ink3:#6B6250; --line:rgba(62,74,52,.10);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:16px; --rl:22px;
  --nav-h:64px;              /* Rule 27 — the deck offsets itself by exactly this */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
.mark{vertical-align:middle;flex:0 0 auto}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(242,237,225,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.18em;font-size:17px;color:var(--forest)}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font-size:15px;font-weight:500;color:var(--ink2);transition:color .2s}
.navlinks a:hover{color:var(--forest)}
.btn{display:inline-block;background:var(--terra-ink);color:#fff;padding:11px 20px;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(198,122,78,.35);color:#fff}
.btn-sm{padding:8px 16px;font-size:14px}
.langbtn{background:var(--sage-soft);border:none;color:var(--sage-ink);font-weight:600;padding:8px 12px;border-radius:999px;cursor:pointer;font-size:13px;transition:background .2s,transform .2s}
.langbtn:hover{background:#dbe0c8;transform:translateY(-1px)}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.hamb span{width:24px;height:2px;background:var(--forest);border-radius:2px;transition:.3s}
.hamb.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{padding:80px 0 64px;text-align:center;background:linear-gradient(180deg,#F5F0E4,#F2EDE1)}
.hero-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.tile{width:120px;height:120px;background:linear-gradient(180deg,#FBF7EE,#F0E9DA);border-radius:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(90,70,50,.12)}
.hero h1{font-size:clamp(30px,5vw,50px);max-width:14ch;color:var(--forest)}
.lead{font-size:clamp(16px,2.2vw,20px);color:var(--ink2);max-width:52ch}
.badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.badge{display:flex;flex-direction:column;background:var(--forest);color:#fff;padding:10px 22px;border-radius:14px;font-weight:600;font-size:15px;transition:transform .2s,box-shadow .2s;cursor:default}
.badge:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(62,74,52,.28)}
.badge small{font-weight:400;font-size:11px;opacity:.7}
.note{font-size:14px;color:var(--ink3)}

/* Sections */
.sec{padding:76px 0}
.sec.alt{background:var(--alt)}
.sec h2{font-size:clamp(26px,3.5vw,36px);text-align:center;color:var(--forest)}
.sub{text-align:center;color:var(--ink2);max-width:52ch;margin:12px auto 44px;font-size:17px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);padding:26px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(90,70,50,.10)}
.card .ic{font-size:30px;margin-bottom:12px}
.card h2{font-size:19px;color:var(--forest);margin-bottom:8px}
.card p{color:var(--ink2);font-size:15px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{text-align:center;padding:12px}
.num{width:44px;height:44px;border-radius:50%;background:var(--sage);color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.step h2{font-size:17px;color:var(--forest);margin-bottom:6px}
.step p{color:var(--ink2);font-size:14px}
.devices{text-align:center;margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.devlabel{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.devrow{font-size:18px;font-weight:600;color:var(--forest)}
.os{font-size:13px;color:var(--ink3);margin-top:8px}

/* Pricing */
.plans{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;max-width:640px;margin:0 auto}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);padding:26px 34px;text-align:center;min-width:220px;transition:transform .2s}
.plan:hover{transform:translateY(-3px)}
.plan.hero-plan{border:2px solid var(--terra);position:relative}
.tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--forest);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;white-space:nowrap}
.pname{font-size:15px;color:var(--ink2);margin-bottom:6px}
.pprice{font-size:34px;font-weight:800;color:var(--forest)}
.pprice span{font-size:15px;font-weight:500;color:var(--ink3)}
.plist{list-style:none;max-width:440px;margin:36px auto 0;display:grid;gap:10px}
.plist li{color:var(--ink);font-size:15px}

/* FAQ */
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:600;color:var(--forest);cursor:pointer;list-style:none;transition:background .2s}
.faq summary:hover{background:var(--sage-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq[open] summary{border-bottom:1px solid var(--line)}
.faq p{padding:16px 22px;color:var(--ink2);font-size:15px}

/* Footer */
.foot{background:var(--forest);color:#EDE7D8;padding:56px 0 40px;text-align:center}
.foot-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.18em;font-size:18px;color:#fff}
.foot-tag{color:#C5D2AC;margin:10px 0 22px}
.foot-links{display:flex;gap:22px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.foot-links a{color:#EDE7D8;font-size:14px;transition:color .2s}
.foot-links a:hover{color:#fff;text-decoration:underline}
.copy{font-size:13px;color:#C5D2AC}
.credit{font-size:13px;color:#C5D2AC;margin-top:6px}
.credit a{color:#C5D2AC;font-weight:600}
.credit a:hover{color:#fff;text-decoration:underline}
/* Rule 27.0 E "More from GRETIFY" — monogram tiles, self-hosted, never fetched marks. */
.more-gretify{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px 0 22px;padding-top:20px;border-top:1px solid rgba(237,231,216,.14)}
.more-gretify .mg-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C5D2AC}
.more-gretify ul{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}
.more-gretify a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:6px 16px 6px 7px;border-radius:999px;border:1px solid rgba(237,231,216,.18);color:#EDE7D8;transition:color .2s,border-color .2s,background .2s,transform .2s}
.more-gretify a:hover,.more-gretify a:focus-visible{color:#fff;border-color:rgba(237,231,216,.42);background:rgba(237,231,216,.08);transform:translateY(-2px)}
/* Wheat fill + forest letter, measured, not picked by eye: 4.93:1 letter-on-fill
   (WCAG 1.4.3 text) and 4.93:1 fill-on-footer (1.4.11 non-text). Sage at 3.65:1
   and terracotta at 3.34:1 both fail the first and were rejected. */
.more-gretify .mg-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--wheat);color:var(--forest);font-weight:800;font-size:14px;letter-spacing:0;flex:0 0 auto}
.more-gretify .mg-name{font-size:14px;font-weight:600;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.more-gretify a{transition:color .2s,border-color .2s,background .2s}.more-gretify a:hover,.more-gretify a:focus-visible{transform:none}}

/* Legal pages (privacy / terms) */
.legal{padding:56px 0 72px}
.backlink{display:inline-block;color:var(--sage-ink);font-weight:600;font-size:14px;margin-bottom:24px;transition:color .2s,transform .2s}
.backlink:hover{color:var(--forest);transform:translateX(-3px)}
.legal h1{font-size:clamp(28px,4vw,40px);color:var(--forest);margin-bottom:8px}
.legal-updated{color:var(--ink3);font-size:13px;margin-bottom:22px}
.legal-intro{color:var(--ink2);font-size:17px;margin-bottom:8px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.legal h2{font-size:20px;color:var(--forest);margin:32px 0 10px}
.legal p{color:var(--ink2);font-size:15.5px;margin-bottom:12px}
.legal-list{list-style:none;margin:0 0 12px;display:grid;gap:8px}
.legal-list li{color:var(--ink2);font-size:15.5px;padding-left:20px;position:relative}
.legal-list li::before{content:"•";color:var(--sage-ink);position:absolute;left:4px;font-weight:700}
.legal-contact{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink2);font-size:15px}
.legal-contact a{color:var(--terra-ink);font-weight:600}
.legal-contact a:hover{text-decoration:underline}
[dir="rtl"] .backlink:hover{transform:translateX(3px)}
[dir="rtl"] .legal-list li{padding-left:0;padding-right:20px}
[dir="rtl"] .legal-list li::before{left:auto;right:4px}

/* Language overlay */
.langoverlay{position:fixed;inset:0;background:rgba(242,237,225,.98);backdrop-filter:blur(8px);z-index:100;display:none;flex-direction:column;padding:24px}
.langoverlay.open{display:flex}
.langhead{display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:0 auto 24px;width:100%;font-size:22px;font-weight:700;color:var(--forest)}
.langhead button{background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink2)}
.langgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;max-width:1000px;margin:0 auto;width:100%;overflow-y:auto}
.langtile{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background .2s;font-size:15px;color:var(--ink)}
.langtile:hover{background:var(--sage-soft)}
.langtile.cur{background:var(--terra-soft);font-weight:600}
.langtile .fl{font-size:22px}

/* To-top */
.totop{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;background:var(--terra-ink);color:#fff;border:none;font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s,box-shadow .2s;z-index:40}
.totop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.totop:hover{box-shadow:0 8px 22px rgba(198,122,78,.4);transform:translateY(-2px) scale(1.05)}

/* Responsive */
@media(max-width:860px){
  .navlinks{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);flex-direction:column;padding:20px 24px;gap:16px;border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}
  .hamb{display:flex}
  .grid3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){ .steps{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Rule 27 multi-page — home summary cards → sub-pages */
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:8px}
.sumcard{display:flex;flex-direction:column;gap:8px;padding:26px;background:#fff;border-radius:18px;
  border:1px solid rgba(90,70,50,.08);text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.sumcard:hover,.sumcard:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px rgba(90,70,50,.10);border-color:rgba(198,122,78,.35)}
.sumcard h2{font-size:19px;color:#3E4A34;margin:0}
.sumcard p{font-size:15px;color:#5A4632;opacity:.82;margin:0;flex:1}
.sumcard .more{font-weight:600;color:var(--terra-ink);font-size:14px}
.sumcard:hover .more{text-decoration:underline}
.cta-mid{display:flex;justify-content:center;margin-top:34px}
/* active nav item on its own page */
.navlinks a.on{color:#C67A4E;font-weight:600}
/* Rule 27 branded 404 */
.err{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.err-in{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:520px}
.err-code{font-size:64px;font-weight:700;color:#C67A4E;letter-spacing:.05em;margin:0;line-height:1}
.err h1{font-size:24px;color:#3E4A34;margin:0}
.err-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:10px}
.err-links a{color:#5A4632;font-weight:600;font-size:15px;transition:color .2s}
.err-links a:hover{color:#C67A4E}
.err-links a.btn{color:#fff}
@media (prefers-reduced-motion:reduce){.sumcard{transition:box-shadow .2s}.sumcard:hover{transform:none}}

/* Rule 27 pre-launch waitlist capture */
.waitlist-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:420px;margin:6px auto 0}
.wl-title{font-size:15px;font-weight:600;color:var(--forest)}
.waitlist{display:flex;flex-direction:column;gap:12px;width:100%}
.wl-email{width:100%;padding:14px 16px;font-size:16px;font-family:inherit;color:var(--ink);
  background:var(--surface);border:1px solid rgba(90,70,50,.18);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.wl-email::placeholder{color:var(--ink3)}
.wl-email:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(198,122,78,.18)}
.waitlist .cf-turnstile{width:100%}
.wl-btn{width:100%;background:var(--terra-ink);color:#fff;padding:14px 20px;border:none;border-radius:12px;
  font-weight:600;font-size:16px;font-family:inherit;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,opacity .2s}
.wl-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(198,122,78,.35)}
.wl-btn:disabled{opacity:.65;cursor:default}
.wl-consent{font-size:12.5px;color:var(--ink3);line-height:1.4;text-align:center}
.wl-status{font-size:14px;font-weight:500;text-align:center;min-height:0}
.wl-status.ok{color:var(--sage-ink)}
.wl-status.err{color:var(--terra-ink)}
.wl-soon{font-size:12px;letter-spacing:.04em;color:var(--ink3);margin-top:2px}
@media (prefers-reduced-motion:reduce){.wl-btn:hover:not(:disabled){transform:none}}

/* Rule 27/Rule 16 freemium — Free vs Premium tiers on /pricing */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 24px}
.tier{background:var(--surface,#fff);border-radius:16px;padding:20px;border:1px solid rgba(90,70,50,.08)}
.tier-prem{border-color:var(--terracotta,#C67A4E)}
.tier-h{font-weight:700;letter-spacing:.02em;margin-bottom:10px;color:var(--forest,#3E4A34)}
.tier-prem .tier-h{color:var(--terracotta,#C67A4E)}
.tier .plist{margin:0}
@media (max-width:640px){.tiers{grid-template-columns:1fr}}
/* Rule 27 — required-field legend on the waitlist form */
.wl-req{font-size:.8rem;color:var(--bark,#5A4632);opacity:.85;margin:0 0 6px}

/* Rule 27 — contact form */
.cform{max-width:560px;margin:24px 0}
.cf-label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bark,#5A4632);opacity:.85;margin:14px 0 6px}
.cf-email,.cf-msg{width:100%;box-sizing:border-box;padding:13px 14px;font:inherit;
  border:1px solid rgba(90,70,50,.14);border-radius:12px;background:#fff;color:inherit}
.cf-msg{resize:vertical;min-height:130px}
.cf-email:focus,.cf-msg:focus{outline:2px solid var(--sage,#7C8C5A);outline-offset:1px;border-color:var(--sage,#7C8C5A)}
.cform .cf-turnstile{margin:14px 0}
.cform .cf-btn{width:100%;margin-top:4px}

/* Rule 14/Rule 27 — help knowledge base */
.helpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:22px 0}
.helpcard{display:block;padding:18px;border-radius:16px;background:var(--surface,#fff);
  border:1px solid rgba(90,70,50,.08);text-decoration:none;transition:transform .15s,border-color .15s}
.helpcard:hover,.helpcard:focus{transform:translateY(-2px);border-color:var(--sage,#7C8C5A)}
.helpcard h2{margin:0 0 6px;font-size:1.05rem}
.helpcard p{margin:0;font-size:.9rem;opacity:.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Rule 27 home-page full-screen deck — ported from the Rule 27.0 reference (airrec,
   itself ported from povedz.to's FullpageScroll, which is the reference feel):
   ONE wheel gesture = ONE section, whatever the deltaY burst.

   Pure CSS snap cannot do this: `proximity` needs you already near a boundary
   (~5 flicks to move) and `mandatory` still lets one momentum burst carry through
   several panels. So the wheel is handled in app.js and CSS is only the helper.

   - `proximity` deliberately: the JS does the precise goTo(offsetTop), and
     `mandatory` would fight it by dragging a taller-than-viewport panel back to
     its top while the user is still reading.
   - gated on `html.fullpage`, which the JS adds — no JS or reduced motion → plain
     scrolling (progressive enhancement).
   - `min-height`, never a fixed height, so a long panel grows instead of clipping.
   - MOUSE ONLY: `(hover: hover) and (pointer: fine)`. Every touch device — phone
     AND tablet, in BOTH orientations — falls out of this block entirely and simply
     flows. Orientation is never the switch; TOUCH is, so a rotate can't flip the
     page into a deck. Same query as app.js's deckMq: the two gates move together.
   - the deck is pulled up by the header height so it genuinely RESTS at scrollY 0
     — otherwise the first panel starts at y=64, the browser snaps there on load,
     the page scrolls itself and the nav flips to its scrolled state instantly. */
.deck-in{display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:14px;width:100%}
.deck .sumcard{background:transparent;border:0;padding:0;max-width:640px}
.deck .sumcard h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:10px}
.deck-close h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}

@media (min-width: 768px) and (hover: hover) and (pointer: fine)
   and (prefers-reduced-motion: no-preference) {
  html.fullpage:has(main.snap-sections){scroll-snap-type:y proximity;scroll-padding-top:0}
  main.snap-sections{margin-top:calc(-1 * var(--nav-h))}
  main.snap-sections > section{box-sizing:border-box;min-height:100dvh;
    display:flex;align-items:center;scroll-snap-align:start}
  html.fullpage:has(main.snap-sections) footer.foot{scroll-snap-align:start}
}

/* Rule 27 deck — inside the deck the hero is a PANEL, so its standing page padding
   would push it past the viewport on a short laptop (992px tall at 800px, which
   costs the "every panel fills the viewport" property). Trim it to the panel
   context only; outside the deck (touch, reduced motion) the hero keeps its
   normal page rhythm. min-height still governs, so nothing can clip (Rule 24). */
@media (min-width: 768px) and (hover: hover) and (pointer: fine)
   and (prefers-reduced-motion: no-preference) {
  /* padding-top = the header height: the deck is pulled up by --nav-h, so with
     padding:0 the hero content started UNDER the sticky header and the logo tile
     was clipped by it (seen, not assumed). Clear the header, then trim the rest so
     the panel still fits 100dvh on a 800px-tall laptop. */
  html.fullpage .hero{padding:var(--nav-h) 0 0}
  html.fullpage .hero-in{gap:10px}
  html.fullpage .tile{width:64px;height:64px;border-radius:16px}
  html.fullpage .hero h1{font-size:clamp(26px,3.4vw,40px)}
  html.fullpage .waitlist-wrap{margin-top:0}
}

/* Rule 24/Rule 27 — the nav CTA was rendering muted brown on terracotta (1.4:1, effectively
   an unreadable blob) because `.navlinks a` (0,1,1) outranks `.btn` (0,1,0), so the
   button's own white was being overridden. Found by LOOKING at the page, not by
   reading the CSS. */
.navlinks a.btn{color:#fff}
.navlinks a.btn:hover{color:#fff}

/* Rule 27/Rule 28 — press screenshot gallery */
.shotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;margin:18px 0 8px}
.shot{margin:0}
.shot img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(90,70,50,.10);display:block}
.shot a:hover img,.shot a:focus img{border-color:var(--sage,#7C8C5A)}
.shot figcaption{margin-top:8px;font-size:.85rem;color:var(--ink2);text-align:center}