/* QuoteSketch site v1 (trial). One stylesheet for every page.
   Light and calm: medium-weight headings, grey regular body text, one
   royal-blue hero and one dark band per page at most. */

@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --head:#14181d;        /* headings */
  --text:#5b636e;        /* body text */
  --text-2:#3d4753;      /* stronger body text, labels */
  --muted:#68707b;        /* AA 4.5:1 on white, tint and panel */
  --navy:#0d2340; --navy-900:#081727;
  --royal-d:#0a2b7a; --royal:#0f3fa8; --royal-900:#071d57;
  --blue:#1f66f0; --blue-d:#1550c8; --blue-l:#9fc0ff; --blue-tint:#eaf1fe;
  --teal:#0a7f95; --teal-l:#7fd0dd;
  --won:#1a7a43; --won-tint:#e6f4ec;
  --line:#e6e9ef; --line-2:#d9dfe7;
  --panel:#f3f5f8;       /* grey panels, as in the step samples */
  --tint:#f6f8fb;        /* light section background */
  --grey-btn:#eef1f5; --grey-btn-h:#e1e6ed;
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --sh-card:0 30px 60px -30px rgba(13,35,64,.35), 0 0 0 1px rgba(13,35,64,.05);
  --wrap:1160px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:#fff; color:var(--text); font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-d); text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; border-radius:6px; }
p{ margin:0 0 1em; }
h1,h2,h3,h4{ color:var(--head); margin:0; text-wrap:balance; }
h1{ font-weight:500; letter-spacing:-.03em; line-height:1.08; }
h2{ font-weight:500; letter-spacing:-.025em; line-height:1.15; font-size:clamp(28px,3.1vw,38px); }
h3{ font-weight:600; letter-spacing:-.01em; line-height:1.3; font-size:18px; }
strong,b{ font-weight:600; color:var(--text-2); }
.ico{ width:22px; height:22px; flex:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.narrow{ max-width:780px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; font-weight:600; font-size:14px; }
.skip:focus{ left:0; color:#fff; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- header ---------- */
.top{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px; }
.logo img{ display:block; height:44px; width:auto; }
.nav{ display:flex; align-items:center; gap:24px; font-size:15px; font-weight:400; }
.nav a{ color:var(--text-2); display:inline-flex; align-items:center; gap:6px; }
.nav a:hover{ color:var(--navy); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--navy); box-shadow:inset 0 -2px 0 var(--teal); padding:6px 0; margin:-6px 0; }
.nav .signin{ color:var(--navy); font-weight:400; }
.nav-ico{ width:17px; height:17px; }
.nav .sep{ width:1px; height:22px; background:var(--line-2); }
.nav .join{ background:var(--teal); color:#fff; font-weight:600; padding:10px 18px; border-radius:999px; }
.nav .join:hover{ background:#086a7d; color:#fff; }
.head-right{ display:none; align-items:center; gap:10px; }
.join-sm{ background:var(--teal); color:#fff; font-weight:600; font-size:14px; padding:10px 14px; border-radius:999px; white-space:nowrap; }
.join-sm:hover{ color:#fff; text-decoration:none; background:#086a7d; }
.menu summary{ list-style:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); display:grid; place-items:center; cursor:pointer; color:var(--navy); }
.menu summary::-webkit-details-marker{ display:none; }
.menu-list{ position:absolute; left:0; right:0; top:72px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 24px 40px -24px rgba(13,35,64,.35); padding:8px 16px 18px; display:flex; flex-direction:column; }
.menu-list a{ color:var(--head); font-weight:500; font-size:16px; padding:13px 6px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.menu-list a[aria-current="page"] span,.menu-list a[aria-current="page"]{ text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:6px; }
.menu-list a:hover{ text-decoration:none; }
.menu-list a[aria-current="page"]:hover{ text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:6px; }
.menu-list a:last-child{ border-bottom:0; }

/* ---------- buttons ---------- */
.actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 24px; border-radius:999px;
  font-weight:600; font-size:15.5px; white-space:nowrap; border:1.5px solid transparent; transition:background .15s, border-color .15s; }
.btn:hover{ text-decoration:none; }
.btn svg{ width:18px; height:18px; }
.btn-main{ background:var(--blue); color:#fff; box-shadow:0 8px 18px -10px rgba(31,102,240,.7); }
.btn-main:hover{ background:var(--blue-d); color:#fff; }
.btn-sec{ background:var(--grey-btn); color:var(--navy); border-color:var(--grey-btn); }
.btn-sec:hover{ background:var(--grey-btn-h); border-color:var(--grey-btn-h); color:var(--navy); }
.btn-light{ background:#fff; color:var(--navy); }
.btn-light:hover{ background:#e8eefc; color:var(--navy); }
.btn-line{ color:#fff; border-color:rgba(255,255,255,.45); }
.btn-line:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.08); }
.btn-soon{ background:rgba(255,255,255,.08); color:#fff; border:1.5px dashed rgba(255,255,255,.4); cursor:default; flex-direction:column; gap:0; line-height:1.25; padding:7px 24px; }
.btn-soon small{ font-size:12px; font-weight:500; color:var(--blue-l); }
.btn-soon span{ display:inline-flex; align-items:center; gap:8px; }
.more{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:15px; }
.more svg{ width:16px; height:16px; }

/* ---------- sections ---------- */
.sec{ padding:96px 0; }
.sec.tight{ padding:72px 0; }
.bg-tint{ background:var(--tint); }
.bg-soft{ background:linear-gradient(180deg,#f1f5fe 0%,#fff 100%); }
.bg-panel{ background:var(--panel); }
.bg-dark{ background:radial-gradient(800px 400px at 85% 0%, rgba(90,150,255,.30), transparent 65%), linear-gradient(160deg,var(--royal-d) 0%,var(--royal) 55%,var(--royal-900) 100%); color:#d3def5; }
.bg-dark h2,.bg-dark h3{ color:#fff; }
.head{ max-width:720px; margin:0 0 48px; }
.head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.head p{ font-size:17px; margin:14px 0 0; }
.eyebrow{ display:block; font-size:14px; font-weight:600; color:var(--blue); margin:0 0 12px; letter-spacing:0; }
.bg-dark .eyebrow{ color:var(--blue-l); }
.lead{ font-size:18px; line-height:1.6; }
.small{ font-size:14px; color:var(--muted); }

/* ---------- home hero (v2 gradient and curve) ---------- */
.hero{ background:radial-gradient(900px 420px at 82% -5%, rgba(90,150,255,.38), transparent 65%), radial-gradient(700px 380px at 5% 110%, rgba(40,90,220,.45), transparent 60%), linear-gradient(160deg,var(--royal-d) 0%,var(--royal) 48%,var(--royal-900) 100%);
  color:#fff; padding:60px 0 170px; text-align:center; }
/* top section restored from index1.1.html: flat bottom edge, no curve or diagonal */


.hero .wrap{ position:relative; }
.hero .eyebrow{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-l); }
.hero h1{ color:#fff; font-size:clamp(32px,4.8vw,54px); line-height:1.08; letter-spacing:-.025em; font-weight:800; margin:0 auto; max-width:20ch; }
.hero .lead{ font-size:clamp(16px,1.5vw,18.5px); line-height:1.55; color:#d3def5; margin:18px auto 0; max-width:40em; }

/* Home hero, split (approved from experiments/hero-split.html): text left, fanned stack of the three
   sample quotations right, same blue background and flat bottom edge, nothing overlapping below */
.hero.hero-split{ text-align:left; padding:64px 0 72px; }
.hero-split .wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center; }
.hero-split h1{ margin:0; max-width:14ch; font-weight:500; font-size:clamp(32px,4.2vw,50px); line-height:1.1; letter-spacing:-.02em; }
.hero-split .lead{ margin:20px 0 0; max-width:30em; }
.hero-split .actions{ margin-top:30px; }
.btn-teal{ background:var(--teal); color:#fff; box-shadow:0 8px 18px -10px rgba(0,0,0,.5); }
.btn-teal:hover{ background:#086a7d; color:#fff; }
/* the fan: positions are percentages of the stack box, every page whole at its A4 ratio */
.hero-split .visual{ position:relative; }
.hero-split .stack{ position:relative; width:100%; max-width:600px; margin:0 auto; aspect-ratio:600/440; }
.hero-split .doc{ position:absolute; margin:0; background:#fff; border-radius:4px; overflow:hidden;
  box-shadow:0 26px 50px -26px rgba(3,12,40,.6), 0 2px 6px rgba(3,12,40,.12); }
.hero-split .doc img{ width:100%; height:auto; }
.hero-split .doc-classic{ width:41%; left:5%; top:13%; transform:rotate(-7deg); z-index:1; }
.hero-split .doc-minimal{ width:41%; right:5%; top:6%; transform:rotate(6deg); z-index:1; }
.hero-split .doc-modern{ width:48%; left:26%; top:3%; transform:rotate(-1.5deg); z-index:2;
  box-shadow:0 36px 64px -28px rgba(3,12,40,.75), 0 4px 12px rgba(3,12,40,.18); }
.hero-split .status-card{ position:absolute; left:2%; bottom:4%; z-index:3; display:flex; align-items:center; gap:10px; background:#fff; border-radius:var(--r-md); padding:12px 16px; box-shadow:0 20px 40px -18px rgba(0,0,0,.55); font-size:14px; font-weight:500; color:var(--navy); white-space:nowrap; }
.hero-split .status-card .won-tag{ font-size:12.5px; }
@media (max-width:900px){
  .hero-split .wrap{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .hero.hero-split{ padding:44px 0 56px; }
}
@media (max-width:640px){
  .hero-split .actions .btn{ flex:1 1 auto; }
  .hero-split .stack{ aspect-ratio:358/330; }
  .hero-split .doc-classic{ width:52%; left:2%; top:12%; transform:rotate(-6deg); }
  .hero-split .doc-minimal{ width:52%; right:2%; top:6%; transform:rotate(5deg); }
  .hero-split .doc-modern{ width:61%; left:19.5%; top:3%; transform:rotate(-1deg); }
  .hero-split .status-card{ left:0; bottom:2%; padding:10px 14px; font-size:13px; }
}

/* mini quote card */
.card-zone{ margin-top:-130px; position:relative; z-index:2; padding-bottom:24px; }
.qcard{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-card); max-width:980px; margin:0 auto; overflow:hidden; }
.qcard-top{ display:flex; align-items:center; gap:10px; padding:16px 28px; border-bottom:1px solid var(--line); background:var(--tint); font-size:14px; font-weight:500; color:var(--text-2); }
.qcard-top .dot{ width:8px; height:8px; border-radius:50%; background:var(--won); box-shadow:0 0 0 4px var(--won-tint); }
.qcard-body{ padding:26px 28px 28px; }
.grid{ display:grid; grid-template-columns:1.5fr 1.6fr .7fr 1fr .8fr; gap:14px; }
.field label{ display:block; font-size:13px; font-weight:500; color:var(--text-2); margin:0 0 7px; }
.field input{ width:100%; height:50px; border:1.5px solid var(--line-2); border-radius:var(--r-sm); padding:0 14px; font:inherit; font-size:16px; color:var(--head); background:#fff; }
.field input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,102,240,.15); }
.suffix{ position:relative; }
.suffix input{ padding-right:32px; }
.suffix span{ position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.result{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap; }
.sums{ display:grid; grid-template-columns:auto auto; gap:3px 22px; font-size:14px; }
.sums b{ font-weight:500; color:var(--text-2); text-align:right; font-variant-numeric:tabular-nums; }
.total-label{ font-size:13px; color:var(--muted); margin-top:12px; }
.total{ font-size:clamp(30px,3.8vw,40px); font-weight:500; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.1; }
.total small{ font-size:.48em; color:var(--muted); margin-left:6px; }
.total select{ border:0; background:none; font:inherit; color:inherit; cursor:pointer; }
.for{ font-size:14px; margin-top:4px; }
.cta{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; max-width:440px; }
.cta-line{ margin:0; font-size:14px; line-height:1.55; text-align:right; }

/* ---------- inner page hero ---------- */
.phero{ background:radial-gradient(700px 300px at 90% 0%, rgba(31,102,240,.10), transparent 70%), linear-gradient(180deg,#eef3fd 0%,#f7f9fe 60%,#fff 100%); padding:56px 0 64px; }
.crumb{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); margin-bottom:26px; }
.crumb a{ color:var(--text-2); }
.crumb span[aria-hidden]{ color:var(--line-2); }
.phero h1{ font-size:clamp(32px,4vw,50px); max-width:20ch; }
.phero .lead{ margin:18px 0 0; max-width:40em; }
.phero .meta{ font-size:14px; color:var(--muted); margin:18px 0 0; }

/* ---------- home: three document tiles (centred icons, as in the sample) ---------- */
.doc3{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center; }
.doc3 .circle{ width:76px; height:76px; border-radius:50%; background:var(--panel); color:var(--blue); display:grid; place-items:center; margin:0 auto 22px; }
.doc3 .circle svg{ width:30px; height:30px; }
.doc3 p{ font-size:15.5px; margin:10px auto 14px; max-width:30ch; }
.title-note{ margin:56px auto 0; max-width:760px; display:flex; gap:16px; align-items:flex-start; background:var(--tint); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 22px; font-size:15.5px; }
.title-note svg{ color:var(--blue); margin-top:2px; }
.title-note p{ margin:0; }
/* setup call offer, under the pricing boxes on Home and the plan cards on Pricing */
.callstrip{ margin:24px auto 0; max-width:760px; display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 22px; font-size:15.5px; }
.callstrip svg{ color:var(--blue); flex:none; }
.callstrip p{ margin:0; }
.callstrip b{ color:var(--head); }
.callstrip a{ font-weight:600; }

/* ---------- split rows ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split.wide-media{ grid-template-columns:.85fr 1.15fr; }
.split.reverse > :first-child{ order:2; }
.ticks{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.ticks li{ display:flex; gap:12px; line-height:1.55; }
.ticks svg{ width:20px; height:20px; color:var(--teal); flex:none; margin-top:2px; }
.ticks.two{ grid-template-columns:1fr 1fr; gap:12px 28px; }
.pages{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.paper{ background:#fff; border-radius:8px; box-shadow:0 24px 50px -28px rgba(13,35,64,.45), 0 0 0 1px rgba(13,35,64,.07); overflow:hidden; }
.pages .paper:nth-child(2){ margin-top:40px; }
.shot{ border-radius:var(--r-md); overflow:hidden; box-shadow:0 30px 60px -32px rgba(13,35,64,.45), 0 0 0 1px rgba(13,35,64,.07); background:#fff; }
/* desktop screenshots: the same browser bar on every page */
.shot.browser::before{ content:""; display:block; height:28px; border-bottom:1px solid rgba(13,35,64,.08);
  background:radial-gradient(circle,#c3ccd8 0 4px,transparent 4.5px) 16px 50%/10px 10px no-repeat,
             radial-gradient(circle,#c3ccd8 0 4px,transparent 4.5px) 32px 50%/10px 10px no-repeat,
             radial-gradient(circle,#c3ccd8 0 4px,transparent 4.5px) 48px 50%/10px 10px no-repeat, #eef2f7; }
.shot img{ width:100%; }
/* a page shown only in part: fade the cut edge */
.paper.fade img{ -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent); }
/* F7: two quotation tops side by side, each the top half of an A4 page */
.brand-docs{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:56px; }
.brand-docs .paper{ aspect-ratio:4/3; }
.brand-docs .paper img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.brand-docs figcaption{ text-align:center; }
@media (max-width:640px){ .brand-docs{ grid-template-columns:1fr; gap:28px; margin-top:40px; } }
figure{ margin:0; }
figcaption{ font-size:14px; color:var(--muted); margin-top:12px; }

/* ---------- steps (grey panels, big blue numbers) ---------- */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ background:var(--panel); border-radius:var(--r-lg); padding:36px 34px 38px; }
.step .n{ font-size:52px; font-weight:600; line-height:1; color:var(--blue); letter-spacing:-.03em; margin-bottom:34px; font-variant-numeric:tabular-nums; }
.step h3{ font-size:21px; font-weight:600; letter-spacing:-.02em; }
.step p{ margin:12px 0 0; font-size:15.5px; }
.after-link{ margin-top:32px; }

/* ---------- icon grid (icon left, title and text) ---------- */
.igrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px 56px; }
.igrid.four{ grid-template-columns:repeat(4,1fr); gap:36px; }
.iitem{ display:flex; gap:18px; align-items:flex-start; }
.igrid.four .iitem{ flex-direction:column; gap:16px; }
.iicon{ width:52px; height:52px; border-radius:14px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; flex:none; }
.iicon svg{ width:24px; height:24px; }
.iitem h3{ font-size:18px; }
.iitem p{ margin:8px 0 10px; font-size:15.5px; }

/* ---------- business block: text panel plus photo ---------- */
.biz{ display:grid; grid-template-columns:1fr 1fr; border-radius:var(--r-xl); overflow:hidden; background:var(--royal-900); color:#c9d6f2; }
.biz-text{ padding:64px 56px; align-self:center; }
.biz-text h2{ color:#fff; }
.biz-text p{ font-size:16.5px; margin:16px 0 28px; }
.biz-text .eyebrow{ color:var(--blue-l); }
.biz-photo{ position:relative; min-height:420px; }
.biz-photo .ph{ position:absolute; inset:0; border-radius:0; border:0; aspect-ratio:auto; background:linear-gradient(135deg,#dfe7f3,#c9d5e6); }
/* the person stands right of centre: keep her in view whatever the crop */
.biz-photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 30%; }
.won-card{ position:absolute; left:28px; bottom:28px; background:#fff; color:var(--head); border-radius:var(--r-md); padding:16px 18px; box-shadow:0 20px 40px -18px rgba(0,0,0,.55); min-width:210px; z-index:2; }
.won-ref{ font-size:13px; font-weight:500; color:var(--blue); }
.won-amt{ font-size:24px; font-weight:600; color:var(--navy); margin:2px 0 10px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.won-tag{ display:inline-flex; align-items:center; gap:6px; background:var(--won-tint); color:var(--won); font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; }
.won-tag svg{ width:14px; height:14px; }

/* ---------- dark app band ---------- */
.appband{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.appband p{ font-size:16.5px; max-width:34em; margin:16px 0 30px; }
.appband .phone-col{ display:flex; justify-content:center; margin-bottom:-96px; }
.phone{ width:280px; background:#05101c; border-radius:44px 44px 0 0; padding:12px 12px 0; box-shadow:0 0 0 2px #2a3d55, 0 40px 80px -30px rgba(0,0,0,.6); }
.phone img{ width:100%; height:440px; object-fit:cover; object-position:top; border-radius:33px 33px 0 0; }
.phone.full{ border-radius:40px; padding:11px; }
.phone.full img{ height:auto; border-radius:30px; }
.appband-wrap{ overflow:hidden; padding-bottom:96px; }

/* ---------- pricing line and FAQ teaser ---------- */
.pf{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pf .box{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; }
.pf h2{ font-size:clamp(24px,2.4vw,30px); }
.pf p{ margin:12px 0 22px; }

/* ---------- closing ---------- */
.closing{ text-align:center; }
.closing h2{ max-width:20ch; margin:0 auto; }
.closing p{ max-width:36em; margin:16px auto 30px; font-size:17px; }
.closing .actions{ justify-content:center; }
.closing-panel{ background:radial-gradient(600px 260px at 50% 0%, rgba(31,102,240,.14), transparent 70%), linear-gradient(180deg,#eef3fd,#f7f9fe); border-radius:var(--r-xl); padding:72px 32px; }

/* ---------- how it works rows ---------- */
.hrow .num{ font-size:56px; font-weight:600; color:var(--blue); line-height:1; letter-spacing:-.03em; margin-bottom:22px; }
.hrow h2{ font-size:clamp(26px,2.6vw,34px); }
.hrow p{ font-size:17px; margin:16px 0 0; max-width:30em; }
.hrow .more{ margin-top:18px; }
.media-center{ display:flex; justify-content:center; }

/* ---------- features ---------- */
.jump{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.jump a{ background:#fff; border:1px solid var(--line-2); border-radius:999px; padding:8px 16px; font-size:14.5px; font-weight:500; color:var(--text-2); }
.jump a:hover{ border-color:var(--blue); color:var(--blue); text-decoration:none; }
.fgroup{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.fgroup.has-media{ align-items:center; }
.fgroup .iicon{ margin-bottom:22px; }
.fgroup .intro{ font-size:17px; margin:16px 0 0; }
.fgroup .more{ margin-top:18px; }
.fcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 32px; }
.bg-tint .fcard{ border-color:#e3e8ef; }
.fcard .ticks{ margin:0; }
.fmedia{ margin-top:28px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chips span{ background:var(--blue-tint); color:var(--royal); border-radius:999px; padding:6px 13px; font-size:14px; font-weight:500; }

/* ---------- templates ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.design{ display:flex; flex-direction:column; }
.design .paper{ aspect-ratio:760/1075; }
.design h3{ margin-top:24px; font-size:20px; }
.design p{ margin:8px 0 18px; font-size:15.5px; flex:1; }
.compare{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; font-size:15.5px; }
.compare th,.compare td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--line); vertical-align:top; }
.compare tr:last-child td,.compare tr:last-child th{ border-bottom:0; }
.compare thead th{ background:var(--tint); color:var(--head); font-weight:600; font-size:14.5px; }
.compare tbody th{ color:var(--text-2); font-weight:500; width:28%; }

/* ---------- pricing page ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.plan{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column; gap:12px; position:relative; }
.plan.pro{ border:1.5px solid var(--blue); box-shadow:0 30px 60px -36px rgba(31,102,240,.45); }
.plan h3{ font-size:22px; font-weight:600; }
.plan .price{ font-size:30px; font-weight:500; color:var(--navy); letter-spacing:-.02em; line-height:1.1; }
.plan .tag{ align-self:flex-start; background:var(--blue-tint); color:var(--royal); font-size:13px; font-weight:600; padding:5px 11px; border-radius:999px; }
.plan .badge{ position:absolute; top:-13px; left:32px; background:var(--blue); color:#fff; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; }
.plan p{ margin:0; font-size:15.5px; }
.plan .ticks{ margin:12px 0 0; gap:9px; font-size:15px; border-top:1px solid var(--line); padding-top:18px; }
.plan .ticks svg{ width:18px; height:18px; }
.trial{ background:var(--tint); border-radius:var(--r-md); padding:18px 20px; }
.trial h4{ font-size:16px; font-weight:600; color:var(--head); margin:0 0 6px; }
.trial p{ font-size:14.5px; margin:0 0 6px; }
.trial p:last-child{ margin:0; }
.good{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.fine{ font-size:14px; color:var(--muted); margin:40px 0 0; max-width:60em; }

/* ---------- FAQ ---------- */
.faq-group{ display:grid; grid-template-columns:.7fr 1.3fr; gap:56px; padding:44px 0; border-top:1px solid var(--line); }
.faq-group:first-child{ border-top:0; padding-top:0; }
.faq-group > h2{ font-size:24px; }
.qa{ border-bottom:1px solid var(--line); }
.qa:first-child{ border-top:1px solid var(--line); }
.qa summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 2px; cursor:pointer; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary h3{ font-size:17px; font-weight:500; }
.qa summary .pm{ width:30px; height:30px; border-radius:50%; background:var(--panel); color:var(--navy); display:grid; place-items:center; flex:none; transition:transform .2s; }
.qa summary .pm svg{ width:16px; height:16px; }
.qa[open] summary .pm{ transform:rotate(45deg); background:var(--blue-tint); color:var(--blue); }
.qa .ans{ padding:0 48px 20px 2px; }
.qa .ans p{ margin:0; font-size:15.5px; }

/* ---------- about / contact ---------- */
.prose{ max-width:720px; }
.prose h2{ font-size:clamp(24px,2.4vw,30px); margin:48px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:18px; margin:26px 0 8px; }
.prose ul,.prose ol{ padding-left:1.25em; margin:0 0 1em; }
.prose li{ margin:0 0 .6em; }
.with-aside{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.aside{ display:grid; gap:20px; position:sticky; top:100px; }
.aside .box{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.aside .box.feature{ background:var(--navy); border-color:var(--navy); color:#c9d6f2; }
.aside .box.feature .one{ color:#fff; font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:1.25; margin:6px 0 10px; }
.aside .box.feature .eyebrow{ color:var(--blue-l); margin:0; }
.aside h2{ font-size:18px; font-weight:600; letter-spacing:-.01em; margin:14px 0 8px; }
.aside .box p{ font-size:15px; margin:0 0 16px; }
.aside .box p:last-child{ margin:0; }
.aside .actions{ flex-direction:column; }
.aside .btn{ width:100%; }
.cards2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column; }
.card p{ font-size:15.5px; margin:10px 0 18px; flex:1; }
.card .addr{ font-size:18px; font-weight:500; margin-bottom:18px; word-break:break-word; }
.card .iicon{ margin-bottom:20px; }
.notebox{ margin-top:24px; background:var(--tint); border-radius:var(--r-md); padding:22px 24px; }
.notebox .t{ color:var(--head); font-weight:600; margin-bottom:6px; }
.notebox p{ margin:0; font-size:15.5px; }

/* ---------- legal ---------- */
.legal{ display:grid; grid-template-columns:260px 1fr; gap:64px; align-items:start; }
.toc{ position:sticky; top:100px; background:var(--tint); border-radius:var(--r-md); padding:22px 22px 14px; font-size:14px; }
.toc-t{ font-weight:600; color:var(--head); margin-bottom:10px; }
.toc ol{ list-style:none; padding:0; margin:0; }
.toc li{ margin:0 0 9px; line-height:1.4; }
.toc a{ color:var(--text-2); }
.toc a:hover{ color:var(--blue); }
.doc{ max-width:760px; font-size:16px; }
.doc h2{ font-size:24px; margin:48px 0 14px; scroll-margin-top:100px; }
.doc h2:first-child{ margin-top:0; }
.doc h3{ font-size:17px; margin:24px 0 8px; }
.doc ul,.doc ol{ padding-left:1.25em; margin:0 0 1em; }
.doc li{ margin:0 0 .55em; }
.doc dl{ margin:0 0 1em; }
.doc dt{ font-weight:600; color:var(--text-2); margin-top:12px; }
.doc dd{ margin:4px 0 0; }
.doc table{ border-collapse:collapse; width:100%; margin:0 0 1em; font-size:15px; }
.doc td,.doc th{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }

/* ---------- placeholders for screenshots still to supply ---------- */
.ph{ width:100%; border:2px dashed #b9c6d8; border-radius:var(--r-md); background:repeating-linear-gradient(135deg,#f3f6fa 0 14px,#eef2f7 14px 28px);
  display:grid; place-items:center; text-align:center; padding:20px; color:#56637a; }
.ph b{ display:block; font-size:16px; font-weight:600; color:#334155; }
.ph span{ display:block; font-size:13px; margin-top:4px; }
.shot .ph{ border:0; border-radius:0; }               /* a placeholder inside the browser frame */
.ph.sm{ padding:10px; }
.ph.sm b{ font-size:13px; } .ph.sm span{ font-size:11px; }

/* F9: laptop with the phone in front of it */
.duo{ position:relative; max-width:520px; padding-bottom:4%; }
.laptop{ width:80%; margin-left:7%; }
.laptop .screen{ background:#0f1722; border-radius:14px 14px 0 0; padding:3% 3% 0; box-shadow:0 0 0 1px #2a3d55; }
.laptop .screen .ph{ border:0; border-radius:3px 3px 0 0; padding-right:30%; }   /* keep the label clear of the phone */
.laptop .base{ position:relative; height:14px; margin:0 -8.5%; border-radius:0 0 14px 14px; background:linear-gradient(#e3e7ed,#b7c0cb);
  box-shadow:0 26px 40px -22px rgba(13,35,64,.45); }
.laptop .base::before{ content:""; position:absolute; left:50%; top:0; width:16%; height:5px; transform:translateX(-50%); background:#a6b0bc; border-radius:0 0 6px 6px; }
.duo .phone.full{ position:absolute; right:0; bottom:0; width:27%; padding:5px; border-radius:22px; }
.duo .phone.full img{ border-radius:17px; }
.laptop .screen img{ display:block; width:100%; height:auto; border-radius:3px 3px 0 0; }
.duo .phone.full .ph{ border:0; border-radius:17px; }
.ph.xs{ padding:6px; } .ph.xs b{ font-size:12px; } .ph.xs span{ font-size:10px; line-height:1.3; }
/* H9: the laptop-plus-phone pair on the dark band */
.appband .duo-col{ display:flex; justify-content:center; }
.appband .duo{ width:100%; }
.bg-dark .laptop .screen{ box-shadow:0 0 0 1px #3a5172; }

/* ---------- Home: use cases (two lists of light chips) ---------- */
.usecases{ padding-top:0; }
.usecases .wrap{ border-top:1px solid var(--line); padding-top:56px; }
.usecases .head{ margin-bottom:32px; }
.usecases h2{ font-size:clamp(24px,2.4vw,30px); }
.usecases .head p{ font-size:16px; }
.usecase-cols{ display:grid; grid-template-columns:1fr 1fr; gap:36px 56px; }
.usecase-cols h3{ font-size:15px; font-weight:600; color:var(--text-2); margin:0 0 14px; }
.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.tags li{ background:#fff; border:1px solid var(--line-2); color:var(--text-2); border-radius:999px; padding:5px 12px; font-size:13.5px; line-height:1.4; }
@media (max-width:900px){ .usecase-cols{ grid-template-columns:1fr; gap:28px; } }
@media (max-width:640px){ .usecases .wrap{ padding-top:40px; } .tags{ gap:6px; } .tags li{ font-size:13px; padding:4px 11px; } }

/* ---------- footer ---------- */
footer{ background:var(--navy-900); color:#a9bacb; font-size:14.5px; padding:56px 0 30px; }
.foot{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.foot .brand{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; font-size:17px; }
.foot .brand img{ width:30px; height:30px; background:#fff; border-radius:7px; padding:3px; }
.foot .brand:hover{ text-decoration:none; color:#fff; }
.foot .kw{ max-width:30em; margin:14px 0 0; line-height:1.6; }
.foot nav ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px 26px; }
.foot nav a{ color:#d3def0; }
.foot nav a:hover{ color:#fff; }
.legal-line{ border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:22px; font-size:13.5px;
  display:flex; justify-content:space-between; align-items:center; gap:10px 24px; flex-wrap:wrap; }
/* Social links: the list lives in site.js; a network with no URL is never drawn. */
.social{ list-style:none; margin:-9px -11px; padding:0; display:flex; gap:4px; }
.social[hidden]{ display:none; }
.social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; color:#a9bacb; transition:color .15s; }
.social a:hover, .social a:focus-visible{ color:var(--teal-l); text-decoration:none; }
.social svg{ width:18px; height:18px; display:block; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{ display:none; }
  .head-right{ display:flex; }
  .igrid.four{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .sec{ padding:72px 0; }
  .grid{ grid-template-columns:1fr 1fr; }
  .grid .wide{ grid-column:1 / -1; }
  .cta{ align-items:stretch; max-width:none; width:100%; }
  .cta-line{ text-align:left; }
  .split,.split.wide-media,.fgroup,.with-aside,.legal,.appband,.biz{ grid-template-columns:1fr; gap:40px; }
  .split.reverse > :first-child{ order:0; }
  .doc3,.steps3,.gallery,.plans,.good{ grid-template-columns:1fr 1fr; }
  .pf,.cards2{ grid-template-columns:1fr; }
  .faq-group{ grid-template-columns:1fr; gap:20px; }
  .aside,.toc{ position:static; }
  .biz-photo{ min-height:340px; }
  .appband .phone-col{ margin-bottom:-72px; }
  .appband-wrap{ padding-bottom:72px; }
}
@media (max-width:640px){
  body{ font-size:15.5px; }
  .wrap{ padding:0 16px; }
  .top .wrap{ height:62px; }
  .logo img{ height:34px; }
  .menu-list{ top:62px; }
  .sec{ padding:60px 0; }
  .sec.tight{ padding:52px 0; }
  .head{ margin-bottom:32px; }
  .head p,.lead{ font-size:16px; }
  .hero{ padding:40px 0 140px; }


  .card-zone{ margin-top:-112px; }
  .qcard-top{ padding:13px 16px; }
  .qcard-body{ padding:20px 16px 22px; }
  .grid{ grid-template-columns:1fr 1fr 1fr; gap:12px; }
  .field input{ height:48px; padding:0 12px; }
  .result{ flex-direction:column; align-items:stretch; gap:18px; }
  .actions{ flex-direction:column; }
  .btn{ width:100%; }
  .doc3,.steps3,.gallery,.plans,.good,.igrid,.igrid.four{ grid-template-columns:1fr; }
  .doc3{ gap:36px; }
  .step{ padding:28px 24px 30px; }
  .step .n{ font-size:44px; margin-bottom:22px; }
  .ticks.two{ grid-template-columns:1fr; }
  .pages{ gap:12px; }
  .biz{ border-radius:22px; }
  .biz-text{ padding:36px 22px 40px; }
  .biz-photo{ min-height:260px; }
  .won-card{ left:16px; bottom:16px; min-width:0; padding:12px 14px; }
  .won-amt{ font-size:20px; }
  .phone{ width:236px; border-radius:38px 38px 0 0; padding:10px 10px 0; }
  .phone img{ height:360px; border-radius:29px 29px 0 0; }
  .phone.full{ border-radius:36px; padding:9px; }
  .phone.full img{ height:auto; border-radius:28px; }
  .pf .box,.card,.plan,.fcard{ padding:24px 20px; }
  .closing-panel{ padding:48px 20px; border-radius:22px; }
  .phero{ padding:36px 0 44px; }
  .crumb{ margin-bottom:18px; }
  .hrow .num{ font-size:46px; margin-bottom:16px; }
  .title-note{ padding:16px; }
  .compare{ font-size:14.5px; }
  .compare th,.compare td{ padding:12px 12px; }
  .compare tbody th{ width:auto; }
  .qa .ans{ padding-right:4px; }
  .foot{ flex-direction:column; gap:28px; }
}
.ticks li.off{ color:var(--muted); }
.ticks li.off svg{ color:#a3acb8; }

/* ---------- second pass ---------- */
.sec.after-card{ padding-top:40px; }
.band-pad{ padding-top:96px; }
.qa summary .pm{ transform:rotate(45deg); }
.qa[open] summary .pm{ transform:rotate(0); }
.doc .note{ background:var(--tint); border-left:3px solid var(--blue); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:16px 20px; margin:0 0 1.2em; }
.doc .note p:last-child{ margin-bottom:0; }
.doc .note-t{ font-weight:600; color:var(--head); margin-bottom:6px; }
.doc .def{ margin:0 0 1em; }
@media (max-width:900px){ .band-pad{ padding-top:72px; } }
@media (max-width:640px){
  .sec.after-card{ padding-top:28px; }
  .band-pad{ padding-top:60px; }
  .biz-photo .ph{ place-items:start center; padding-top:28px; }
}

/* ---------- 404 page ---------- */
.phero.nf{ padding:72px 0 96px; }
.nf-code{ display:inline-block; margin:0 0 18px; padding:5px 12px; border-radius:999px; background:var(--blue-tint); color:var(--blue-d); font-size:13px; font-weight:600; letter-spacing:.02em; }
.nf-actions{ margin-top:32px; }
.nf-links{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line); max-width:760px; }
.nf-links h2{ font-size:15px; font-weight:600; letter-spacing:0; color:var(--text-2); }
.nf-links .jump{ list-style:none; padding:0; margin-top:16px; }
@media (max-width:640px){
  .phero.nf{ padding:40px 0 64px; }
  .nf-actions .btn{ flex:1 1 100%; }
}

/* ---------- analytics consent banner (design only; the Accept / Decline wiring goes into
   analytics-consent.js at go-live) ---------- */
.consent{ position:fixed; left:24px; bottom:24px; z-index:60; width:min(420px, calc(100% - 32px)); background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-card); padding:20px 22px; font-size:14.5px; line-height:1.55; }
.consent h2{ font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px; }
.consent p{ margin:0; }
.consent .consent-actions{ display:flex; gap:10px; margin-top:16px; }
.consent .btn{ flex:1; min-height:44px; padding:0 18px; font-family:inherit; font-size:14.5px; cursor:pointer; }
.consent[hidden]{ display:none; }
@media (max-width:640px){
  .consent{ left:16px; right:16px; bottom:16px; width:auto; padding:18px; }
}