:root{--ink:#1D1D1F;--gr:#33333A;--gr2:#2E2E33;--mut:#6E6E73;--bd:#E6E7EA;--soft:#F2F2F4;--cv:#FAFAF8;--grn:#34C759;--grnT:#34C759;--blue:#33333A;--amb:#FF9F0A}
.mark-own{position:relative;white-space:nowrap}
.mark-own::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:linear-gradient(90deg,var(--grn),#7ED09B);
 border-radius:99px;z-index:-1;transform:scaleX(0);transform-origin:left;animation:swipe 1s .5s cubic-bezier(.2,.6,.2,1) forwards;opacity:.55}
@keyframes swipe{to{transform:scaleX(1)}}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:var(--mut);font-weight:500}
.trust span{display:flex;align-items:center;gap:6px}
.trust .gd{width:7px;height:7px;border-radius:50%;background:var(--grn)}
/* compare strip */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:40px auto 0;text-align:left}
.cmp{border-radius:18px;padding:26px;border:1px solid var(--bd)}
.cmp.rent{background:#fff}
.cmp.own{background:#F4FBF6;border-color:#CDEBD7}
.cmp h3{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cmp li{list-style:none;display:flex;gap:9px;margin:8px 0;font-size:13.5px;color:var(--mut)}
.cmp .x{color:#B3261E;font-weight:700}
.cmp .c{color:var(--grnT);font-weight:700}
.cmp.own li{color:#2E4437}
/* sticky cta — always navigable when visible; never leave a dead click target */
#stickycta{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:200;box-shadow:0 12px 34px rgba(29,29,31,.22);
 opacity:0;transform:translateY(14px);transition:.35s;pointer-events:none;visibility:hidden}
#stickycta.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
section[id]{scroll-margin-top:84px}
.tool{display:inline-flex;align-items:center;gap:8px}
.tdot{width:8px;height:8px;border-radius:50%}
.ticon{width:15px;height:15px;display:block}
/* icon wall marquee */
.mwrap{overflow:hidden;max-width:960px;margin:36px auto 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mrow{display:flex;gap:16px;width:max-content;animation:scrollx var(--t,34s) linear infinite;padding:6px 0}
.mrow.rev2{animation-direction:reverse}
.mwrap:hover .mrow{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.iconwall{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:720px;margin:36px auto 0}
.itile{position:relative;width:68px;height:68px;border-radius:18px;background:#fff;border:1px solid var(--bd);
 display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(29,29,31,.09);
 animation:floaty 5.2s ease-in-out infinite;animation-delay:var(--d,0s);transition:transform .2s}
.itile:hover{transform:translateY(-6px) scale(1.06)}
.itile img{width:30px;height:30px}
.itile.more{font-size:10px;font-weight:700;color:var(--mut);text-align:center;line-height:1.3;padding:6px}
@keyframes floaty{50%{transform:translateY(-7px)}}
.iconwall+.chips{display:none}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:'Inter',-apple-system,sans-serif;color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 24px;font-weight:600;font-size:15px;transition:.15s;border:1px solid transparent;cursor:pointer}
.pill-ink{background:var(--gr);color:#fff}
.pill-ink:hover{background:var(--gr2);transform:translateY(-1px)}
.pill-ghost{border-color:var(--bd);background:#fff;color:var(--ink)}
.pill-ghost:hover{border-color:var(--gr)}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--mut)}
h2{font-size:clamp(28px,3.8vw,42px);letter-spacing:-.025em;font-weight:800;line-height:1.08}
.sub{color:var(--mut);font-size:16.5px;max-width:600px}
/* nav */
nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(255,255,255,.75);border-bottom:1px solid var(--bd)}
.nav-in{display:flex;align-items:center;gap:30px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:14.5px;color:var(--mut);font-weight:500}
.nav-skills{display:none;margin-left:auto;margin-right:12px;font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap}
nav .pill{white-space:nowrap}
.nav-skills:hover{color:var(--ink)}
.nav-links a:hover{color:var(--ink)}
/* hero */
header{position:relative;overflow:hidden;background:#fff}
/* padding-top/bottom only: .wrap owns the horizontal gutter (0 24px). Using the
   padding shorthand here zeroed it, so hero copy ran edge to edge on phones. */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding-top:76px;padding-bottom:64px}
.hero .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd);background:rgba(255,255,255,.85);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:500;color:var(--mut);margin-bottom:22px}
.hero .badge b{color:var(--gr)}
h1{font-size:clamp(40px,5vw,60px);line-height:1.04;letter-spacing:-.032em;font-weight:800;margin-bottom:18px}
.hero .sub{margin-bottom:30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.fine{font-size:12.5px;color:var(--mut);margin-top:16px}
/* phone demo in hero */
.phone-slot{display:flex;justify-content:center}
.phone-crop{width:322px;height:648px;overflow:hidden;border-radius:42px;filter:drop-shadow(0 34px 70px rgba(20,20,22,.28))}
.phone-crop iframe{width:460px;height:930px;border:0;transform:scale(.70);transform-origin:top left;pointer-events:auto}
.demo-cap{text-align:center;font-size:12px;color:var(--mut);margin-top:14px}
.demo-cap b{color:var(--gr)}
/* demo sections */
.demo-frame{border:0;width:100%;border-radius:20px;overflow:hidden}
.sec{padding:88px 0}
.sec.alt{background:linear-gradient(180deg,#F2F8F1 0%,#FAFCF9 100%);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.center{text-align:center}
.center .sub{margin:14px auto 0}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.split.rev{grid-template-columns:1.1fr .9fr}
.split h2{margin:10px 0 14px}
.split .sub{font-size:15px}
ul.checks{list-style:none;margin-top:18px}
ul.checks li{display:flex;gap:10px;margin:9px 0;color:var(--mut);font-size:14px}
ul.checks .t{color:var(--gr);font-weight:700}
/* pillars */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;text-align:left}
.cols.cols-2{grid-template-columns:repeat(2,1fr)}
.cols.cols-4{grid-template-columns:repeat(4,1fr)}
.pillar{background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border:1px solid var(--bd);border-radius:18px;padding:28px}
.pillar h3{font-size:17px;margin:14px 0 8px;letter-spacing:-.01em}
.pillar p{color:var(--mut);font-size:14px}
.pillar .kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}
.path-card{display:flex;flex-direction:column;text-align:left;min-height:100%}
.path-card h2{font-size:22px;margin:0 0 8px}
.path-card .sub{font-size:14.5px;max-width:none;margin:0 0 18px}
.path-card .cta-row{margin-top:auto}
.pill:disabled,.pill[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;pointer-events:none}
.picto{width:42px;height:42px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:880px;margin:32px auto 0}
.tool{border:1px solid var(--bd);background:#fff;border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;color:var(--gr)}
.tool.more{color:var(--mut);font-weight:500}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;text-align:left}
.step{border:1px solid var(--bd);border-radius:16px;padding:24px;background:#fff}
.num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut)}
.step h3{font-size:15.5px;margin:10px 0 6px}
.step p{color:var(--mut);font-size:13px}
/* pricing */
.price-card{max-width:660px;margin:40px auto 0;border:1px solid var(--bd);border-radius:22px;padding:36px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);text-align:left;box-shadow:0 14px 44px rgba(29,29,31,.07)}
.price-card li{margin:11px 0;color:var(--mut);font-size:14.5px;list-style:none;display:flex;gap:10px}
.tick{color:var(--gr);font-weight:700}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1040px;margin:36px auto 0;text-align:left}
@media(max-width:860px){.price-grid{grid-template-columns:1fr}}
.price-tier{border:1px solid var(--bd);border-radius:18px;padding:24px 22px;background:rgba(255,255,255,.9);box-shadow:0 12px 36px rgba(29,29,31,.06);display:flex;flex-direction:column;gap:10px}
.price-tier.featured{border-color:var(--gr);box-shadow:0 16px 44px rgba(29,29,31,.12);position:relative}
.price-tier .badge{position:absolute;top:12px;right:14px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--gr);border-radius:999px;padding:4px 9px}
.price-tier h3{font-size:18px;letter-spacing:-.02em;margin:0}
.price-tier .amt{font-size:34px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-tier .amt span{font-size:14px;font-weight:500;color:var(--mut)}
.price-tier ul{list-style:none;margin:4px 0 0;padding:0;flex:1}
.price-tier li{font-size:13px;color:var(--mut);margin:8px 0;display:flex;gap:8px;line-height:1.4}
.price-tier li::before{content:"✓";color:var(--gr);font-weight:700;flex:none}
.price-note{max-width:720px;margin:18px auto 0;font-size:12.5px;color:var(--mut);line-height:1.5}
.partner-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.partner-chip{border:1px solid var(--bd);background:#fff;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--gr)}
.partner-chip.soft{color:var(--mut);font-weight:500}
@media(max-width:700px){.demo-pair{grid-template-columns:1fr!important}}
/* faq */
.faq{max-width:740px;margin:36px auto 0;text-align:left}
details{border-bottom:1px solid var(--bd);padding:19px 6px}
summary{font-weight:600;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";color:var(--mut);font-weight:400;font-size:18px}
details[open] summary::after{content:"–"}
details p{color:var(--mut);font-size:14px;margin-top:10px;max-width:660px}
/* contact */
.contact-sec{background:var(--cv);border-top:1px solid var(--bd)}
.contact-card{max-width:720px;margin:0 auto;border:1px solid var(--bd);border-radius:22px;padding:32px 28px;background:#fff;box-shadow:0 14px 44px rgba(29,29,31,.07);text-align:left}
.contact-card h2{margin-bottom:8px}
.contact-card .sub{margin-bottom:22px}
.contact-emails{display:grid;gap:12px;margin:18px 0 8px}
.contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border:1px solid var(--bd);border-radius:14px;background:var(--soft)}
.contact-row .em{font-weight:700;font-size:15px;color:var(--gr);word-break:break-all}
.contact-row-solo{border-radius:999px;justify-content:space-between;padding:16px 16px 16px 24px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(230,231,234,.9);box-shadow:0 10px 30px rgba(29,29,31,.08)}
.contact-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.contact-actions a,.contact-actions button{font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid var(--bd);background:#fff;color:var(--ink);font-weight:600;cursor:pointer;font-family:inherit}
.contact-actions a.primary,.contact-actions button.primary{background:var(--gr);color:#fff;border-color:var(--gr)}
.contact-actions a:hover,.contact-actions button:hover{border-color:var(--gr)}
.contact-note{font-size:12.5px;color:var(--mut);margin-top:14px;line-height:1.5}
.contact-form-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--mut)}
.contact-form-link:hover{color:var(--gr);text-decoration:underline}
/* contact form */
.form-row{margin-bottom:16px;text-align:left}
.form-row label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.form-row label .opt{font-weight:400;color:var(--mut)}
.form-row input,.form-row textarea{width:100%;font:inherit;font-size:14.5px;padding:11px 14px;border:1px solid var(--bd);border-radius:12px;background:#fff;color:var(--ink);resize:vertical}
.form-row input:focus,.form-row textarea:focus{outline:2px solid var(--gr);outline-offset:1px}
.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.form-status{margin-top:14px;font-size:13.5px;color:var(--mut);text-align:left}
.form-status.ok{color:var(--grnT);font-weight:600}
.form-status.error{color:#B3261E;font-weight:600}
.form-status a{color:var(--gr);font-weight:700;text-decoration:underline}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
#copytoast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:300}
#copytoast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* footer */
footer{border-top:1px solid var(--bd);padding:46px 0 58px;text-align:center;color:var(--mut);font-size:13px;background:#fff}
footer .brand{justify-content:center;margin-bottom:10px}

/* big sur scene */
.bigsur{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bigsur svg{position:absolute;bottom:0;left:0;width:100%;height:100%}
.cloud{position:absolute;background:#fff;filter:blur(22px);opacity:.55;border-radius:50%;animation:drift 60s linear infinite}
@keyframes drift{from{transform:translateX(-15vw)}to{transform:translateX(115vw)}}
header .wrap.hero{position:relative;z-index:2}
.life{position:relative;overflow:hidden;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.life .wrap{position:relative;z-index:2}
.life h2{color:#173425}
.life .sub{color:#3D5A49}
.lifecards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.lc{background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:14px;
 padding:12px 18px;font-size:12.5px;font-weight:600;color:#173425;box-shadow:0 10px 26px rgba(23,52,37,.12)}
.lc small{display:block;font-weight:400;color:#3D5A49;font-size:10.5px}
/* Content stays visible without JavaScript; interactions are enhancement only. */
.rev{opacity:1;transform:none}


/* Tablet/phone shared layout — phone-crop is un-cropped here too (561-760px band) so it matches the ≤560 rule below */
@media(max-width:760px){
 .compare{grid-template-columns:1fr}
 .sec{padding:56px 0}
 .hero{padding-top:44px;padding-bottom:34px}
 .phone-crop{width:min(340px,88vw);height:calc((min(340px,88vw) - 40px)*2.164 + 66px);border-radius:0;overflow:visible}
 .phone-crop iframe{width:min(340px,88vw);height:calc((min(340px,88vw) - 40px)*2.164 + 66px);transform:none}
 .footgrid{grid-template-columns:1fr !important;gap:18px !important;text-align:center !important}
 .footgrid .brand{justify-content:center !important}
 #stickycta{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:11px 18px;font-size:13.5px}
 .itile{width:56px;height:56px;border-radius:15px}
 .itile img{width:24px;height:24px}
}
@media(max-width:960px){
 .hero{grid-template-columns:1fr;text-align:center;padding-top:56px;padding-bottom:40px}
 .hero .badge{margin:0 auto 20px}
 .cta-row{justify-content:center}
 .split,.split.rev{grid-template-columns:1fr}
 .cols,.steps{grid-template-columns:1fr}
 .cols.cols-4{grid-template-columns:repeat(2,1fr)}
 .nav-links{display:none}
 .nav-skills{display:inline-block}
}
@media(max-width:700px){
 .cols.cols-2,.cols.cols-4{grid-template-columns:1fr}
}
/* Phone: same un-crop values as ≤760 above, plus phone-only type/spacing tweaks */
@media(max-width:560px){
 .nav-in{gap:8px}
 .brand{font-size:15px}
 .nav-skills{font-size:12px;margin-right:8px}
 nav .pill{padding:8px 14px!important;font-size:12.5px!important}
 h1{font-size:clamp(28px,8vw,34px)}
 .sub{font-size:15px}
 footer{padding-bottom:104px}
 header .bigsur svg{height:460px}
 .phone-crop{width:min(340px,88vw);height:calc((min(340px,88vw) - 40px)*2.164 + 66px);border-radius:0;overflow:visible}
 .phone-crop iframe{width:min(340px,88vw);height:calc((min(340px,88vw) - 40px)*2.164 + 66px);transform:none}
 .badge{font-size:11.5px;padding:7px 12px}
 .pill{padding:11px 20px;font-size:14px}
 .trust{gap:12px;font-size:11.5px;justify-content:center}
 .eyebrow{font-size:11px}
 h2{font-size:26px}
 .mwrap{margin-top:26px}
 .cmp{padding:20px}
 .lifecards{gap:8px}
 .lc{padding:10px 14px;font-size:11.5px}
 .contact-row-solo{justify-content:center;text-align:center;padding:16px 18px}
 .contact-row-solo .contact-actions{margin-left:0;justify-content:center;width:100%}
}

/* type + interaction polish */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.price-card p,.price-card li{font-variant-numeric:tabular-nums}
::selection{background:var(--gr);color:#fff}
a:focus-visible,button:focus-visible,.pill:focus-visible,summary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:6px}
.pill:focus-visible{border-radius:999px}
input:focus-visible,textarea:focus-visible{outline:var(--focus-ring);outline-offset:1px}
@media(prefers-reduced-motion:reduce){.mrow{animation:none}.itile{animation:none}.mark-own::after{animation:none;transform:scaleX(1)}}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4  (post-audit)
 * (Variety scores 3 by design: repo rule makes Figma the pixel source of
 *  truth, so structure/macrostructure is deliberately left untouched and
 *  only the depth/rhythm/motion/state layer is upgraded.)
 */
/* ============================================================================
   CRAFT LAYER — visual polish pass, 2026-07-25
   Technique sources: high-end-visual-design, hallmark, apple-design.
   Brand law preserved exactly: Inter + JetBrains Mono, light-only,
   graphite #33333A, Node Cube mark, no decorative rainbow accents.
   Structure, copy and information architecture are unchanged — this
   layer only upgrades depth, rhythm, motion and state feedback.
   ============================================================================ */
:root{
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --hair:rgba(29,29,31,.08);
  --hair-2:rgba(29,29,31,.14);
  --r-lg:26px;--r-md:20px;--r-sm:14px;
  --sh-1:0 1px 2px rgba(29,29,31,.04),0 4px 12px rgba(29,29,31,.045);
  --sh-2:0 1px 2px rgba(29,29,31,.04),0 8px 24px rgba(29,29,31,.06),0 24px 48px rgba(29,29,31,.05);
  --sh-3:0 2px 4px rgba(29,29,31,.05),0 14px 34px rgba(29,29,31,.09),0 34px 68px rgba(29,29,31,.07);
}

/* --- typography: optical polish ------------------------------------------ */
body{font-optical-sizing:auto;text-rendering:optimizeLegibility}
h1{letter-spacing:-.038em;line-height:1.02}
h2{letter-spacing:-.03em;line-height:1.06}
h3{letter-spacing:-.015em}
.sub{line-height:1.62}
.landing-hero-title{letter-spacing:-.04em}

/* --- spatial rhythm: let it breathe -------------------------------------- */
.sec{padding:124px 0}
section[id]{scroll-margin-top:104px}

/* --- eyebrow becomes a badge, not loose text ----------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
 background:rgba(29,29,31,.035);border:1px solid var(--hair);font-size:10.5px;letter-spacing:.16em;
 text-transform:uppercase;line-height:1}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grn);flex:none}
.center .eyebrow{margin:0 auto}

/* --- nav: floating island, detached from the top edge -------------------- */
nav{position:sticky;top:0;z-index:100;background:transparent;border-bottom:0;
 -webkit-backdrop-filter:none;backdrop-filter:none;padding:14px 20px;
 transition:padding .5s var(--ease)}
nav .nav-in{max-width:1120px;margin:0 auto;height:60px;padding:0 10px 0 22px;border-radius:999px;
 background:rgba(255,255,255,.74);
 -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
 border:1px solid rgba(255,255,255,.66);
 box-shadow:0 0 0 1px var(--hair),var(--sh-2);
 transition:box-shadow .5s var(--ease),background .5s var(--ease)}
nav .nav-in:hover{box-shadow:0 0 0 1px var(--hair-2),var(--sh-3)}
.nav-links a{position:relative;transition:color .3s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;border-radius:2px;
 background:var(--gr);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* --- buttons: mass, press physics, nested trailing icon ------------------ */
.pill{transition:transform .45s var(--ease),background .3s var(--ease),
 border-color .3s var(--ease),box-shadow .45s var(--ease),color .3s var(--ease)}
.pill-ink{box-shadow:0 1px 2px rgba(29,29,31,.14),0 8px 20px rgba(29,29,31,.16)}
.pill-ink:hover{transform:translateY(-2px);box-shadow:0 2px 5px rgba(29,29,31,.16),0 16px 36px rgba(29,29,31,.24)}
.pill-ghost{box-shadow:var(--sh-1)}
.pill-ghost:hover{transform:translateY(-2px);border-color:var(--hair-2);box-shadow:var(--sh-2)}
.pill:active{transform:translateY(0) scale(.978)}
.pill.has-arrow{padding-right:7px}
.pill.has-arrow::after{content:"↗";display:inline-flex;align-items:center;justify-content:center;
 width:28px;height:28px;border-radius:50%;font-size:12.5px;line-height:1;flex:none;
 background:rgba(255,255,255,.17);
 transition:transform .45s var(--ease),background .3s var(--ease)}
.pill-ghost.has-arrow::after{background:rgba(29,29,31,.055)}
.pill.has-arrow:hover::after{transform:translate(2px,-2px) scale(1.07);background:rgba(255,255,255,.26)}
.pill-ghost.has-arrow:hover::after{background:rgba(29,29,31,.09)}

/* --- surfaces: hairline ring + layered ambient shadow, never a hard border */
.price-tier,.cmp,.pillar,.step,.price-card,.contact-card,.lc{
 border-color:var(--hair);border-radius:var(--r-md);box-shadow:var(--sh-2);
 transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.price-tier:hover,.cmp:hover,.pillar:hover,.step:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.price-card,.contact-card{border-radius:var(--r-lg)}
.price-tier.featured{background:linear-gradient(180deg,#fff 0%,#FCFCFD 100%);
 border-color:var(--hair-2);box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.9)}
.price-tier .badge{box-shadow:0 4px 12px rgba(29,29,31,.22)}
.step{background:linear-gradient(180deg,#fff 0%,#FDFDFE 100%)}
.num{letter-spacing:.06em}

/* --- demo frames: concentric bezel so they read as objects, not embeds --- */
.demo-frame{border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--hair),var(--sh-2);background:#fff}
.demo-label{font-variant-numeric:tabular-nums}

/* --- chips and tiles ----------------------------------------------------- */
.tool{border-color:var(--hair);box-shadow:var(--sh-1);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tool:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.itile{border-color:var(--hair);box-shadow:var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.itile:hover{transform:translateY(-6px) scale(1.05);box-shadow:var(--sh-2)}

/* --- trust row: reads as a spec strip ------------------------------------ */
.trust span{padding:7px 13px;border-radius:999px;background:rgba(29,29,31,.032);
 border:1px solid var(--hair);font-size:12px}

/* --- FAQ ----------------------------------------------------------------- */
details{border-bottom-color:var(--hair);transition:background .35s var(--ease);border-radius:10px}
details:hover{background:rgba(29,29,31,.018)}
summary::after{transition:transform .4s var(--ease)}

/* --- scroll reveal (progressive enhancement only) ------------------------ */
html.mv-anim .rev{opacity:0;transform:translateY(20px);filter:blur(5px);
 transition:opacity .85s var(--ease-soft),transform .85s var(--ease-soft),filter .85s var(--ease-soft)}
html.mv-anim .rev.is-in{opacity:1;transform:none;filter:none}

/* --- film grain: physical texture, fixed and inert ----------------------- */
body::after{content:"";position:fixed;inset:0;z-index:250;pointer-events:none;opacity:.02;
 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- mobile: island nav and rhythm must survive 320px -------------------- */
@media(max-width:960px){
 .sec{padding:92px 0}
}
@media(max-width:760px){
 .sec{padding:72px 0}
 nav{padding:10px 12px}
 nav .nav-in{height:56px;padding:0 8px 0 16px}
 section[id]{scroll-margin-top:88px}
}
@media(max-width:560px){
 .sec{padding:60px 0}
 .eyebrow{font-size:10px;padding:5px 11px;letter-spacing:.14em}
 .trust{gap:8px}
 .trust span{padding:6px 11px;font-size:11px}
 .pill.has-arrow::after{width:24px;height:24px;font-size:11.5px}
 .demo-frame{border-radius:var(--r-md)}
}
@media(max-width:380px){
 nav .nav-in{padding:0 6px 0 12px}
 .brand{font-size:14px}
}

/* --- motion respect ------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
 html.mv-anim .rev{opacity:1;transform:none;filter:none}
 .pill:hover,.price-tier:hover,.cmp:hover,.pillar:hover,.step:hover,.itile:hover,.tool:hover{transform:none}
}

/* ============================================================================
   HALLMARK AUDIT PASS — 2026-07-25
   Named tells fixed, in order of severity:
     1. Ambient landscape decoration behind the hero (hard green band, no
        semantic role) → removed, replaced with a quiet tinted wash.
     2. Inter-everywhere (display + body the same face) → Space Grotesk
        display paired with Inter body. JetBrains Mono stays for IDs/paths.
     3. Pure-white surfaces → paper tinted toward the anchor hue.
     4. Every section using identical centred rhythm → alternating sections
        now run left-aligned with an editorial measure.
     5. Broken accent underline under Mesh / Vault → redrawn on the text box.
     6. AI footer (link columns + social row + copyright tail) → statement close.
   ============================================================================ */

/* --- 3. paper, not paper-white -------------------------------------------- */
:root{--paper:#FBFBFA;--paper-2:#F6F6F4}
body{background:var(--paper)}
header{background:transparent}
.paperwash{position:absolute;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(120% 70% at 50% -10%,rgba(52,199,89,.07) 0%,rgba(52,199,89,0) 60%),
  linear-gradient(180deg,#FFFFFF 0%,var(--paper) 62%,var(--paper-2) 100%)}
header .wrap{position:relative;z-index:2}
.sec.alt{background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
 border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.price-tier,.step,.tool,.itile,.cmp,.contact-card{background:#fff}

/* --- 2. display face ------------------------------------------------------ */
h1,h2,h3,.brand,.price-tier .amt,.landing-hero-title,.contact-hero h2{
 font-family:'Space Grotesk','Inter',-apple-system,sans-serif;font-weight:700}
h1,.landing-hero-title{letter-spacing:-.03em}
h2{letter-spacing:-.022em;font-weight:600}
h3{letter-spacing:-.012em;font-weight:600}
.brand{letter-spacing:-.03em;font-weight:700}
.price-tier .amt{letter-spacing:-.035em}

/* --- 5. accent underline, drawn on the text box not the baseline ---------- */
.mark-own::after{left:-.04em;right:-.04em;bottom:.02em;height:.14em;opacity:.42;
 background:var(--grn);border-radius:99px}

/* --- 4. break the centred-everything rhythm ------------------------------- */
#how .wrap.center,#integrations .wrap.center{text-align:left}
#how .center .sub,#integrations .center .sub{margin-left:0;margin-right:0}
#how .center .eyebrow,#integrations .center .eyebrow{margin-left:0}
#how h2,#integrations h2{max-width:15ch}
#integrations .chips{justify-content:flex-start;margin-left:0}
#integrations .mwrap{margin-left:0}
@media(max-width:760px){
 #how .wrap.center,#integrations .wrap.center{text-align:center}
 #how .center .sub,#integrations .center .sub{margin-left:auto;margin-right:auto}
 #how .center .eyebrow,#integrations .center .eyebrow{margin-left:auto}
 #how h2,#integrations h2{max-width:none}
 #integrations .chips{justify-content:center}
}

/* --- 6. footer closes the page instead of cataloguing a sitemap ----------- */
footer{background:var(--paper-2);border-top:1px solid var(--hair);padding:64px 0 56px;text-align:left}
footer .footgrid{grid-template-columns:1.4fr .8fr .8fr;gap:40px}
footer .brand{justify-content:flex-start;font-size:17px}

/* --- rhythm: tighten the void the audit found under pricing --------------- */
.sec{padding:110px 0}
.price-note{margin-top:26px}
@media(max-width:960px){.sec{padding:84px 0}}
@media(max-width:760px){.sec{padding:66px 0}}
@media(max-width:560px){.sec{padding:56px 0}}

/* --- one primary action, not three of equal weight (baseline-ui) ---------- */
.cta-quiet{display:inline-flex;align-items:center;font-size:14px;font-weight:500;color:var(--mut);
 padding:12px 6px;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.cta-quiet:hover{color:var(--ink);border-bottom-color:var(--hair-2)}
.cta-quiet:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:4px}
@media(max-width:560px){.cta-quiet{padding:8px 4px;font-size:13.5px}}

/* ============================================================================
   ACCESSIBILITY LAYER, 2026-07-25
   Semantics and keyboard state only. No layout, spacing, type scale or copy
   is touched here, so the structure pass stays the single owner of geometry.
     1. One focus token drives every interactive surface, so a keyboard user
        always sees the same ring instead of a browser default that some
        surfaces suppress.
     2. Skip link lets a keyboard user jump the nav straight into #main.
     3. Motion respect already lives in the "motion respect" block above and
        neutralises every animation and transition, including the .rev reveal.
   ============================================================================ */
:root{
  --focus-ring-color:var(--ink);
  --focus-ring-width:2px;
  --focus-ring-offset:3px;
  --focus-ring:var(--focus-ring-width) solid var(--focus-ring-color);
}

/* skip link: parked off screen, drops in on keyboard focus above the nav */
.skip-link{position:fixed;top:-96px;left:16px;z-index:2000;
 display:inline-block;padding:11px 18px;border-radius:0 0 12px 12px;
 background:var(--ink);color:#fff;font-weight:600;font-size:14px;
 line-height:1;text-decoration:none;
 box-shadow:0 10px 28px rgba(29,29,31,.30);
 transition:top .18s var(--ease)}
.skip-link:focus{top:0}
.skip-link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}

/* the skip target is programmatically focusable but must not draw a ring */
main:focus,main:focus-visible{outline:none}

/* every remaining interactive surface reads from the same token */
[data-copy]:focus-visible,[data-email]:focus-visible,.brand:focus-visible,
.nav-skills:focus-visible,.itile:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
 outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:6px}

/* Demo frames need :focus-within, not :focus. Tabbing to an iframe moves the
   real focus into its child browsing context, so the host element matches
   :focus-within only. Verified in browser: activeElement is the iframe while
   iframe.matches(":focus") is false. With :focus alone a keyboard user gets
   no ring at all on the six demos. */
iframe:focus-within,iframe:focus{
 outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:14px}

/* Windows high contrast keeps a visible ring even when colours are replaced */
@media(forced-colors:active){
 .skip-link{border:1px solid CanvasText}
 a:focus-visible,button:focus-visible,.pill:focus-visible,summary:focus-visible,
 iframe:focus-within,[data-copy]:focus-visible{outline:2px solid Highlight}
}