/* ============================================================================
   craft/kit/landing/landing.css — the LANDING-PAGE layer. Loads AFTER base.css.

     <link rel="stylesheet" href="/base.css">
     <link rel="stylesheet" href="/landing.css">

   base.css was extracted from /c/, which is a DOCUMENT: tables, tiles, evidence.
   A landing page needs six things base.css does not have at all — a hero, a real
   button, a form, a price block, an FAQ and a sticky mobile action. This file is
   exactly those six and nothing else.

   ⚠️ THE ACCENT RULE, restated for landing pages.
   design-language.md §1: --acc must mean ONE thing per project. On a landing page
   that one thing is: **this is the single action to take on this page.**
   Therefore --acc appears on .btn-primary and on NOTHING else. Not on the price,
   not on a badge, not on a heading. A page with three accented things has no
   primary action. Do not use base.css's `.tile.w` here — it accents a statistic,
   which contradicts the rule above.

   ⚠️ RTL. Every rule below uses LOGICAL properties (padding-inline, margin-inline-
   start, border-inline-start). craft/patterns/rtl.md documents the real bug that
   physical padding caused the first time base.css met a Hebrew page: the label and
   the value touched with no gap, no error, no console warning. The check:
     grep -n 'padding-left\|padding-right\|margin-left\|margin-right\|border-left\|border-right\|text-align:left\|text-align:right' landing.css
   must return nothing.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------
   One screen. h1 + one sentence + one button. The "eyebrow" above the h1 says
   WHAT KIND of thing this is, so the h1 does not have to spend words on it. */
.hero{padding-block:54px 6px}
.hero .eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;
color:var(--dim);margin:0 0 12px;font-weight:500}
.hero h1{font-size:2.7rem;margin-block:0 .3em;max-width:19ch}
.hero .lede{font-size:1.12rem;color:var(--ink);max-width:60ch;margin-block:0 26px}
.hero .lede b{color:var(--ink);font-weight:600}
/* the proof line sits UNDER the button, not above it: it answers the doubt the
   button just created, in the order a reader actually feels it. */
.hero .proof{font-size:.84rem;color:var(--dim);margin-block:16px 0;max-width:64ch}

/* --- buttons — the only accented element on the page --------------------- */
.btns{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 .95rem/1 var(--sans);
padding-block:14px;padding-inline:22px;border-radius:9px;border:1px solid transparent;
cursor:pointer;text-decoration:none;transition:transform .16s ease,filter .16s ease,
border-color .16s ease,background .16s ease;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--acc);color:#12141c;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--panel);color:var(--ink);border-color:var(--line);
box-shadow:inset 0 1px 0 var(--edge)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--line))}
.btn[disabled]{opacity:.55;cursor:default;transform:none;filter:none}

/* --- section rhythm ------------------------------------------------------
   A landing page is read top-to-bottom once. The hairline is the only divider;
   spacing does the rest. */
.sec{padding-block:30px 0;border-top:1px solid var(--line);margin-top:44px}
.sec>h2:first-child{margin-top:0}
.sec .lede,.sec p{max-width:70ch}

/* --- steps: numbered, because order is the content ----------------------- */
ol.steps{list-style:none;counter-reset:s;margin:18px 0 0;padding:0}
ol.steps li{counter-increment:s;position:relative;padding-inline-start:46px;
margin-block:0 20px;max-width:70ch}
ol.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:-2px;
width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
background:var(--panel2);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);
font:600 .84rem/1 var(--serif);color:var(--dim);font-variant-numeric:tabular-nums}
ol.steps b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
ol.steps span{color:var(--dim);font-size:.93rem}

/* --- what you get: a list where each line is a claim, not a bullet -------- */
ul.get{list-style:none;margin:16px 0 0;padding:0}
ul.get li{padding-inline-start:26px;position:relative;margin-block:0 13px;max-width:70ch;
color:var(--dim)}
ul.get li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;
width:7px;height:7px;border-radius:50%;border:1px solid var(--dim)}
ul.get b{color:var(--ink);font-weight:600}

/* --- what this is NOT. Deliberately NOT red.
   design-language.md: colour that decorates is colour that lies. A red X would
   make the honest section look like a warning; it is a scope statement. ----- */
ul.notlist{list-style:none;margin:16px 0 0;padding:0}
ul.notlist li{padding-inline-start:26px;position:relative;margin-block:0 13px;
max-width:70ch;color:var(--dim)}
ul.notlist li::before{content:"\00d7";position:absolute;inset-inline-start:2px;top:-.05em;
color:var(--dim);font-size:1.15em;line-height:1.6}
ul.notlist b{color:var(--ink);font-weight:600}

/* --- price ---------------------------------------------------------------
   The number is serif + tabular, NOT accented. See the accent rule at the top. */
.price{padding:24px 26px;margin-top:18px;max-width:520px}
.price .amt{font:600 2.5rem/1 var(--serif);letter-spacing:-.02em;
font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:9px}
.price .amt small{font:400 .9rem/1 var(--sans);color:var(--dim);letter-spacing:0}
.price .sub{color:var(--dim);font-size:.9rem;margin-block:10px 18px}
.price hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* --- FAQ ----------------------------------------------------------------- */
.faq{margin-top:16px;max-width:70ch}
.faq details{border-bottom:1px solid var(--line);margin:0;padding-block:14px}
.faq summary{color:var(--ink);font-weight:600;font-size:.97rem;list-style:none;
display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dim);font-weight:400;font-size:1.2rem;
line-height:1.1;flex:none;transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--dim);font-size:.93rem;margin-block:10px 2px}

/* --- lead form -----------------------------------------------------------
   Labels are real <label>s, always visible. Placeholder-as-label fails the
   moment the field has content, which is exactly when the user checks. */
form.lead{max-width:520px;margin-top:18px}
form.lead .row{margin-bottom:15px}
form.lead label{display:block;font-size:.74rem;text-transform:uppercase;
letter-spacing:.09em;color:var(--dim);margin-bottom:6px;font-weight:500}
form.lead label .req{color:var(--dim);text-transform:none;letter-spacing:0;font-size:.85em}
form.lead input,form.lead textarea{width:100%;background:var(--panel);
border:1px solid var(--line);border-radius:9px;color:var(--ink);
padding-block:11px;padding-inline:13px;font:inherit;font-size:.95rem;
box-shadow:inset 0 1px 0 var(--edge);transition:border-color .16s ease}
form.lead textarea{min-height:112px;resize:vertical;line-height:1.55}
form.lead input:focus,form.lead textarea:focus{border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
form.lead input::placeholder,form.lead textarea::placeholder{color:var(--dim);opacity:.7}
/* honeypot: a real field, visually gone, never announced to a screen reader.
   ⚠️ clip, NOT left:-9999px — see the note on .skip in base.css. In RTL that
   trick becomes 9999px of horizontal scroll and the whole page goes sideways. */
form.lead .hp{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
form.lead .fine{color:var(--dim);font-size:.79rem;margin-block:14px 0;max-width:60ch}
/* the status region is aria-live: the answer must reach a screen reader too */
.formstat{margin-top:14px;font-size:.9rem;min-height:1.4em}
.formstat.err{color:var(--ink)}
.formstat.err b{color:var(--acc);font-weight:600}
.formstat.ok{padding:15px 17px;background:var(--panel2);border:1px solid var(--line);
border-radius:11px;box-shadow:inset 0 1px 0 var(--edge);color:var(--ink)}
.formstat.ok b{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;
margin-bottom:5px}
.formstat.ok span{color:var(--dim);font-size:.9rem}

/* --- sticky mobile action.
   Came from a phone screenshot: on a 390px screen the hero button scrolls away
   after ~1.5 screens and the page then has no action for 4 more screens. ---- */
.stickycta{display:none}
@media(max-width:640px){
.stickycta{display:block;position:fixed;inset-inline:0;bottom:0;z-index:8;
background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);
border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.stickycta .btn{width:100%;justify-content:center}
body{padding-bottom:74px}
.hero{padding-block:34px 4px}
.hero h1{font-size:1.85rem;max-width:none}
.hero .lede{font-size:1.02rem}
.btns .btn{width:100%;justify-content:center}
.price{padding:19px 20px}
.price .amt{font-size:2.1rem}
ol.steps li{padding-inline-start:40px}
.sec{margin-top:34px}}

@media(prefers-reduced-motion:reduce){
.btn:hover{transform:none}
.faq details[open] summary::after{transition:none}}