/* ============================================================
   Flowral — marketing site
   Design system: calm, professional, light-first
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* accents drawn from the logo petals */
  --blue:#5a52c4;          /* primary accent — the flower's signature violet */
  --blue-glow:#7b74e0;     /* lighter violet — gradients, logo box */
  --blue-deep:#453ba8;     /* deeper violet — hover, gradients */
  --green:#4cb37c;         /* stem green — success / done */
  --green-glow:#5aa982;
  --gold:#ee9a54;
  --pink:#e06a90;          /* petal pink */
  --purple:#b76fd0;        /* petal purple */
  --sky:#4aa3dd;           /* petal blue */
  --orange:#ee9a54;        /* petal orange */
  --violet:#7b74e0;

  /* light, airy surfaces with a faint petal blush */
  --bg:#f8f7fb;
  --bg-2:#f1eff7;
  --panel:#ffffff;
  --panel-2:#f4f2fa;
  --line:rgba(40,34,70,.09);
  --line-2:rgba(40,34,70,.16);

  --text:#2b2740;
  --text-dim:#615c73;
  --text-faint:#8c8aa0;

  --radius:16px;
  --radius-lg:24px;
  --shadow:0 18px 44px -26px rgba(35,45,75,.28);
  --shadow-soft:0 6px 20px -14px rgba(35,45,75,.30);
  --shadow-glow:none;

  --maxw:1180px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.018em;color:var(--text)}

/* ambient background — soft petal corner glows, echoing the logo */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 40% at 3% 2%,rgba(183,111,208,.10),transparent 60%),
    radial-gradient(46% 40% at 97% 2%,rgba(238,154,84,.09),transparent 60%),
    radial-gradient(50% 44% at 2% 100%,rgba(74,163,221,.09),transparent 60%),
    radial-gradient(50% 44% at 100% 100%,rgba(76,179,124,.08),transparent 62%);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
.muted{color:var(--text-dim)}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:12px;cursor:pointer;border:1px solid transparent;
  transition:transform .14s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--blue);
  color:#fff;box-shadow:var(--shadow-soft);
}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:0 12px 26px -16px rgba(47,90,140,.6)}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-block{width:100%;justify-content:center}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(247,248,251,.82);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:18px}
.brand .logo{
  width:34px;height:34px;border-radius:9px;overflow:hidden;line-height:0;
  box-shadow:var(--shadow-soft);
}
.brand .logo img,.brand .logo svg{width:34px;height:34px;display:block}
.brand small{display:block;font-family:var(--font);font-size:10.5px;font-weight:500;color:var(--text-faint);letter-spacing:.04em;margin-top:-3px}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--text-dim)}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px;margin-left:auto}

/* ---------- hero ---------- */
.hero{position:relative;padding:88px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-copy,.hero-visual{min-width:0}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 9px;border-radius:100px;
  background:#fff;border:1px solid var(--line-2);
  font-size:13px;color:var(--text-dim);margin-bottom:22px;box-shadow:var(--shadow-soft);
}
.badge b{color:var(--text)}
.badge .pill{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;background:rgba(90,82,196,.13);color:var(--blue);
}
.hero h1{font-size:clamp(38px,5.4vw,60px)}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--blue),var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p.lead{font-size:19px;color:var(--text-dim);margin:22px 0 30px;max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--text-faint);display:flex;align-items:center;gap:8px}
.hero-note b{color:var(--green)}

/* flow hero visual */
.tree-card,.win{
  position:relative;border-radius:var(--radius-lg);min-width:0;
  background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--shadow);
  padding:22px;overflow:hidden;
}
.tree-card .tc-head,.win .tc-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.tc-dot{width:11px;height:11px;border-radius:50%;opacity:.7}
.tc-title{margin-left:8px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tc-title b{color:var(--text)}
.tree-svg{width:100%;height:auto;overflow:visible}
/* the hero screenshot carries width/height attributes to reserve layout space;
   without height:auto the fixed attribute wins and the image is stretched */
.tree-card img,.win img{width:100%;height:auto;border-radius:10px}
.node-label{font-family:var(--font);font-size:11px;font-weight:600;fill:var(--text)}
.node-sub{font-family:var(--font);font-size:9px;fill:var(--text-faint)}
.link-line{stroke:var(--line-2);stroke-width:2.5;fill:none}
.link-line.done{stroke:var(--green);stroke-width:3}
.link-flow{stroke:var(--blue-glow);stroke-width:3;fill:none;stroke-dasharray:6 8;opacity:.55}
.node{transform-box:fill-box;transform-origin:center}
.node .ring{fill:var(--panel-2);stroke:var(--line-2);stroke-width:2}
.node.done .ring{fill:rgba(74,154,114,.12);stroke:var(--green)}
.node.active .ring{fill:rgba(90,82,196,.10);stroke:var(--blue)}
.node.locked{opacity:.45}

/* trust strip */
.trust{padding:26px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:60px}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--text-faint);font-size:13.5px}
.trust b{color:var(--text-dim)}

/* ---------- section shell ---------- */
section{padding:84px 0}
.sec-head{max-width:680px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px)}
.sec-head p{color:var(--text-dim);font-size:17px;margin-top:14px}

/* ---------- features ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.card .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;
  background:rgba(90,82,196,.10);border:1px solid rgba(90,82,196,.20);margin-bottom:16px;
}
/* each feature tile takes a different petal hue */
.feat-grid .card:nth-child(1) .ico{background:rgba(90,82,196,.11);border-color:rgba(90,82,196,.24)}
.feat-grid .card:nth-child(2) .ico{background:rgba(224,106,144,.12);border-color:rgba(224,106,144,.26)}
.feat-grid .card:nth-child(3) .ico{background:rgba(74,163,221,.12);border-color:rgba(74,163,221,.26)}
.feat-grid .card:nth-child(4) .ico{background:rgba(238,154,84,.13);border-color:rgba(238,154,84,.28)}
.feat-grid .card:nth-child(5) .ico{background:rgba(183,111,208,.12);border-color:rgba(183,111,208,.26)}
.feat-grid .card:nth-child(6) .ico{background:rgba(76,179,124,.13);border-color:rgba(76,179,124,.28)}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--text-dim);font-size:14.5px}
.card.wide{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:34px}

/* ---------- use cases (tabs) ---------- */
.usecases{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.tab{
  font-family:var(--display);font-weight:600;font-size:14.5px;
  padding:11px 20px;border-radius:100px;border:1px solid var(--line-2);
  background:#fff;color:var(--text-dim);cursor:pointer;transition:all .15s;
}
.tab:hover{color:var(--text);border-color:var(--blue)}
.tab.on{background:var(--blue);color:#fff;border-color:transparent;box-shadow:var(--shadow-soft)}
.tab .em{margin-right:7px}
.panel-uc{display:none;animation:fade .3s ease}
.panel-uc.on{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.uc-copy h3{font-size:26px;margin-bottom:14px}
.uc-copy p{color:var(--text-dim);margin-bottom:18px}
.uc-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.uc-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-dim)}
.uc-list .ck{color:var(--green);flex:0 0 auto;margin-top:2px}
.uc-visual{
  border-radius:var(--radius);border:1px solid var(--line);padding:22px;
  background:var(--panel);box-shadow:var(--shadow);
}
.q-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.q-row:last-child{border-bottom:none}
.q-state{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:grid;place-items:center;font-size:12px;border:2px solid var(--line-2)}
.q-state.done{background:rgba(74,154,114,.14);border-color:var(--green);color:var(--green)}
.q-state.active{background:rgba(90,82,196,.14);border-color:var(--blue);color:var(--blue)}
.q-state.locked{opacity:.45}
.q-name{font-size:14.5px;font-weight:500}
.q-name small{display:block;color:var(--text-faint);font-size:12px;font-weight:400}
.q-xp{margin-left:auto;font-family:var(--display);font-size:11px;font-weight:600;color:var(--text-dim);
  background:var(--panel-2);border:1px solid var(--line);padding:3px 9px;border-radius:100px;white-space:nowrap}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{position:relative;padding:28px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.step::before{
  counter-increment:step;content:counter(step);
  font-family:var(--display);font-weight:700;font-size:15px;
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(160deg,var(--blue-glow),var(--blue-deep));color:#fff;
}
.step h3{font-size:18px;margin-bottom:8px}
.step p{color:var(--text-dim);font-size:14.5px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center;padding:26px 16px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,42px);
  background:linear-gradient(120deg,var(--sky),var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .l{color:var(--text-dim);font-size:14px;margin-top:6px}

/* ---------- pricing preview / cards ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.plan{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px;position:relative;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.plan.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow)}
.plan-tag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 14px;border-radius:100px;background:var(--blue);color:#fff;
  box-shadow:var(--shadow-soft);
}
.plan-name{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:20px;margin-bottom:4px}
.plan-name .em{font-size:22px}
.plan-desc{color:var(--text-faint);font-size:13.5px;min-height:38px}
.plan-price{margin:16px 0 4px;font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.03em}
.plan-price small{font-size:14px;font-weight:500;color:var(--text-faint);font-family:var(--font)}
.plan-price .free{color:var(--green)}
.plan-bill{color:var(--text-faint);font-size:12.5px;min-height:18px}
.plan .btn{margin:20px 0}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--text-dim)}
.plan-feats li{display:flex;gap:10px;align-items:flex-start}
.plan-feats .ck{color:var(--green);flex:0 0 auto}
.plan-feats .muted-ck{color:var(--text-faint)}
.plan-feats .head{color:var(--text-faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-top:6px}

/* billing toggle */
.bill-toggle{display:inline-flex;align-items:center;gap:12px;margin:0 auto 40px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:100px;padding:6px;box-shadow:var(--shadow-soft)}
.bill-toggle button{
  font-family:var(--display);font-weight:600;font-size:14px;color:var(--text-dim);
  padding:9px 18px;border-radius:100px;border:none;background:none;cursor:pointer;transition:all .15s}
.bill-toggle button.on{background:var(--blue);color:#fff}
.bill-toggle .save{font-size:11px;color:var(--green);font-weight:700;margin-left:2px}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin-top:20px;font-size:14.5px}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-soft)}
.cmp th,.cmp td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--line)}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--text);font-weight:500;min-width:220px}
.cmp thead th{font-family:var(--display);font-size:16px;position:sticky;top:0;background:var(--panel-2)}
.cmp thead th small{display:block;font-family:var(--font);font-size:12px;color:var(--text-faint);font-weight:400}
.cmp tbody td{color:var(--text-dim)}
.cmp .grp td{background:var(--panel-2);font-family:var(--display);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--blue);text-align:left}
.cmp .yes{color:var(--green);font-size:17px}
.cmp .no{color:var(--text-faint)}
.cmp .feat-col{background:rgba(90,82,196,.05)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.qa{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-soft)}
.qa summary{
  cursor:pointer;list-style:none;padding:20px 22px;font-family:var(--display);font-weight:600;font-size:16.5px;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';font-size:22px;color:var(--blue);transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 22px 20px;color:var(--text-dim);font-size:15px}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-lg);padding:60px 40px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(90,82,196,.10),rgba(224,106,144,.08) 52%,rgba(74,163,221,.09));
  border:1px solid var(--line-2);
}
.cta-band h2{font-size:clamp(28px,4vw,40px)}
.cta-band p{color:var(--text-dim);font-size:17px;margin:14px auto 28px;max-width:520px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:56px 0 34px;margin-top:20px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.foot-brand p{color:var(--text-dim);font-size:14px;margin-top:14px;max-width:280px}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:14px;font-family:var(--display)}
.foot-col a{display:block;color:var(--text-dim);font-size:14px;margin-bottom:10px;transition:color .15s}
.foot-col a:hover{color:var(--text)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-top:1px solid var(--line);padding-top:22px;color:var(--text-faint);font-size:13px;flex-wrap:wrap}
.foot-bar .wiink{display:inline-flex;align-items:center;gap:7px;color:var(--text-dim)}
.foot-bar .wiink b{color:var(--text)}

/* ---------- product screenshots ---------- */
/* Screenshots are framed with .win — the same window chrome as the hero, so
   every product image on the site reads as "this is the app", consistently. */
.shot-lg{max-width:1000px;margin:0 auto}
.shot-cap{
  margin:16px auto 0;max-width:720px;text-align:center;
  color:var(--text-faint);font-size:13.5px;line-height:1.65}
.shot-cap b{color:var(--text-dim)}

/* two landscape screenshots of the same shape, so the captions line up */
.shot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:16px;
  max-width:1000px;margin-left:auto;margin-right:auto}
.shot-grid .win{padding:14px}
.shot-grid .win .tc-head{gap:6px;margin-bottom:11px}
.shot-grid .tc-dot{width:9px;height:9px}
.shot-grid .tc-title{font-size:11.5px;margin-left:6px}
.shot-item{min-width:0}
.shot-item h3{font-size:17px;margin:16px 0 6px}
.shot-item p{color:var(--text-dim);font-size:14px;line-height:1.6}

/* a screenshot sitting beside explanatory copy */
.shot-split{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.shot-split .uc-list{margin-top:18px}

/* ---------- three-plan grid ---------- */
/* Two plans. The base .price-grid is a four-column track, so without this the
   two cards land in columns 1–2 and sit off to the left. Constrain to two
   columns and centre the block, so the pair reads as the whole offer rather
   than as the first half of a wider grid. */
.price-grid-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}

/* ---------- the named limits ---------- */
/* sits directly under the plan cards, so it shares their max-width — a wider
   panel below narrower cards reads as a misalignment rather than a choice */
.limits{
  margin:38px auto 0;max-width:760px;padding:30px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.limits h3{font-size:21px;margin-bottom:6px}
.limits>p{color:var(--text-dim);font-size:15px}
.limit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 18px}
.limit{padding:18px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.limit b{display:block;font-family:var(--display);font-size:16px;margin-bottom:6px}
.limit span{color:var(--text-dim);font-size:13.5px;line-height:1.55}
.limit-note{color:var(--text-faint);font-size:13.5px;line-height:1.7;margin:0;
  padding-top:16px;border-top:1px solid var(--line)}

.cmp-cost td:first-child{font-weight:600;color:var(--text)}

/* ---------- legal pages (terms / privacy) ---------- */
.legal-head{padding:64px 0 18px}
.legal-head h1{font-size:clamp(30px,4.4vw,44px)}
.legal-head .updated{color:var(--text-faint);font-size:14px;margin-top:14px}
.legal-note{
  max-width:820px;margin:24px auto 0;padding:16px 18px;border-radius:12px;font-size:14px;line-height:1.65;
  background:rgba(238,154,84,.10);border:1px solid rgba(238,154,84,.32);color:var(--text-dim)}
.legal-note b{color:var(--text)}

.legal{max-width:820px;margin:0 auto;padding-bottom:40px}
.legal .toc{
  margin:0 0 40px;padding:20px 24px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line)}
.legal .toc h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:12px}
.legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.legal .toc li{margin-bottom:7px;font-size:14.5px}
.legal .toc a{color:var(--text-dim);transition:color .15s}
.legal .toc a:hover{color:var(--blue)}

.legal h2{font-size:22px;margin:40px 0 12px;scroll-margin-top:84px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:16.5px;margin:24px 0 8px}
.legal p{color:var(--text-dim);font-size:15.5px;line-height:1.75;margin-bottom:14px}
.legal ul{margin:0 0 16px;padding-left:22px;list-style:disc}
.legal li{color:var(--text-dim);font-size:15.5px;line-height:1.7;margin-bottom:9px}
.legal a{color:var(--blue);font-weight:500}
.legal strong{color:var(--text);font-weight:600}
.legal table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.legal th,.legal td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{font-family:var(--display);font-weight:600;color:var(--text);font-size:13.5px}
.legal td{color:var(--text-dim)}
.legal .ph{background:rgba(238,154,84,.16);border-radius:4px;padding:1px 5px;font-weight:600;color:var(--text)}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .price-grid-2{max-width:none}
  .limit-row{grid-template-columns:1fr}
  .legal .toc ol{columns:1}
  .shot-grid{grid-template-columns:1fr}
  .shot-split{grid-template-columns:1fr;gap:28px}
}
@media(max-width:920px){
  .hero-grid,.card.wide,.panel-uc.on{grid-template-columns:1fr}
  .hero-visual{order:-1}
  .feat-grid,.steps,.stats{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .card.wide{grid-column:span 2}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{
    display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--panel);border-bottom:1px solid var(--line);padding:8px 24px 16px}
  .nav.open .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  /* legal tables carry three columns of prose; let them scroll inside their
     own box rather than pushing the whole page sideways */
  .legal table{display:block;overflow-x:auto;max-width:100%}
  section{padding:60px 0}
  .hero{padding:52px 0 40px}
  .feat-grid,.steps,.stats,.price-grid,.price-grid-2,.foot-grid{grid-template-columns:1fr}
  .card.wide{grid-column:span 1}
  .cta-band{padding:44px 22px}
  .foot-bar{flex-direction:column;text-align:center}
}