/* ==========================================================================
   QuoteSketch — public website design system
   ==========================================================================
   One stylesheet for every public page: Home, About, Contact, Privacy, Terms.
   The pages are written against these tokens and classes rather than repeating
   the same style string, which is what keeps the type scale, the radii, the
   shadows and the section rhythm identical across the whole site.

   Blue is the brand: deep navy for the moments that carry weight (the hero, the
   reuse band, the closing call), teal for accents and marks. Everything between
   those moments is white or a pale blue-grey wash, so the site reads light and
   the blue keeps its impact — roughly 60% light, 40% blue by area.

   Loaded from the <helmet> of each public document, the same way the Builder
   loads its own design-system sheet. Nothing here is used by the signed-in
   application; the app ships its own styles.
   ========================================================================== */

:root{
  --ink:#14181d; --navy:#0d2340; --teal:#0a7f95; --teal-d:#086a7d; --muted:#5b636e;
  --line:#e6e8ec; --soft:#f7f8fa; --softer:#eef1f4;
  --navy-700:#123054; --navy-900:#081727; --teal-l:#7fd0dd; --teal-tint:#e9f3f6;
  --line-2:#dbe1e8; --tint:#f4f7fa; --ink-2:#3d4753;
  /* one shadow scale, so nothing invents its own */
  --sh-1:0 1px 2px rgba(13,35,64,.06);
  --sh-2:0 12px 30px -20px rgba(13,35,64,.34);
  --sh-3:0 30px 60px -28px rgba(13,35,64,.30);
  --sh-lift:0 18px 40px -24px rgba(13,35,64,.42);
  --r-sm:10px; --r-md:14px; --r-lg:20px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:#fff; color:var(--ink); font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; text-wrap:pretty; }
h1,h2,h3{ text-wrap:balance; }
a{ color:var(--teal-d); text-decoration:none; }
a:hover{ color:var(--navy); }
img{ max-width:100%; }
/* The sticky header would otherwise land on top of an anchored section. */
section[id],article[id],h2[id]{ scroll-margin-top:92px; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* Keyboard users get past the header without tabbing the whole nav. */
.hs-skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--navy); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:600; font-size:14px; }
.hs-skip:focus{ left:0; color:#fff; }

/* ---- layout ---------------------------------------------------------- */
.hs-wrap{ max-width:1280px; margin:0 auto; padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); }
.hs-wrap-n{ max-width:960px; margin:0 auto; padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); }
/* 112px top and bottom put 224px between consecutive bands, and the home page has
   sixteen of them. Tightened so the page reads as one continuous argument rather
   than as slides with gaps between them. No section and no sentence was removed. */
.hs-sec{ padding-top:clamp(48px,5vw,84px); padding-bottom:clamp(48px,5vw,84px); }
.hs-sec-s{ padding-top:clamp(40px,4vw,64px); padding-bottom:clamp(40px,4vw,64px); }
.hs-head{ max-width:660px; }
.hs-head-c{ max-width:660px; margin:0 auto; text-align:center; }
.hs-rule{ border-top:1px solid var(--line); }
.hs-wash{ background:var(--tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hs-dark{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
/* One soft light source per dark band -- no stacked gradients, no mesh. */
.hs-dark::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 420px at 78% 8%, rgba(10,127,149,.38), transparent 68%); }
.hs-dark > *{ position:relative; }

/* ---- type scale ------------------------------------------------------ */
/* Was 12px / .14em / uppercase. Twenty-three of these sit above nearly every
   heading on the site, which made the loudest element on a quiet page a label
   that only repeats the heading beneath it. Set in the words own case it still
   names the section and stops competing with the H2. */
.hs-eyebrow{ display:inline-block; font-size:13px; font-weight:650; letter-spacing:0; color:var(--teal-d); }
.hs-dark .hs-eyebrow{ color:var(--teal-l); }
/* Capped at 60px the hero headline broke onto five lines in its column, with
   "Create" stranded on the first. At 54px the same words land in three, which is
   a stronger headline than a larger one that has to be reassembled while reading. */
/* text-wrap:balance is set on every heading, and on a six-word hero headline it
   equalises the lines into a narrow stack -- "Create" alone, then "professional",
   then "quotes and". pretty keeps the orphan control and lets the line fill its
   column, so the headline reads across instead of down. */
.hs-h1{ font-size:clamp(38px,4.6vw,54px); line-height:1.06; letter-spacing:-.026em; font-weight:800; margin:18px 0 0;
  text-wrap:pretty; }
.hs-h2{ font-size:clamp(28px,3.5vw,42px); line-height:1.09; letter-spacing:-.022em; font-weight:800; margin:14px 0 0; }
.hs-h3{ font-size:clamp(19px,2vw,23px); line-height:1.25; letter-spacing:-.014em; font-weight:700; margin:0; }
.hs-lead{ font-size:17px; line-height:1.65; color:var(--muted); margin:16px 0 0; max-width:56ch; }
.hs-lead-lg{ font-size:19px; line-height:1.6; margin:22px 0 0; max-width:52ch; }
.hs-dark .hs-lead{ color:#b6c4d4; }
.hs-card-t{ font-weight:650; font-size:15.5px; letter-spacing:-.005em; margin-top:14px; }
.hs-card-b{ font-size:14px; line-height:1.55; color:var(--muted); margin-top:6px; }

/* ---- buttons --------------------------------------------------------- */
.hs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600;
  border-radius:var(--r-sm); white-space:nowrap; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; }
.hs-btn:active{ transform:translateY(1px); }
/* Named for what it is on the page, kept as hs-cta so every call to action
   on the site is unmistakably the same button. */
.hs-cta{ background:var(--navy); color:#fff; box-shadow:var(--sh-1), 0 10px 22px -14px rgba(13,35,64,.65); }
.hs-cta:hover{ background:var(--navy-700); color:#fff; box-shadow:var(--sh-1), 0 14px 26px -14px rgba(13,35,64,.7); }
.hs-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.hs-ghost:hover{ background:var(--soft); border-color:#c2cad5; color:var(--ink); }
/* On a dark band the roles invert: white carries the primary action. */
.hs-cta-inv{ background:#fff; color:var(--navy); box-shadow:0 14px 34px -16px rgba(0,0,0,.6); }
.hs-cta-inv:hover{ background:#eef5f8; color:var(--navy); }
.hs-ghost-inv{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.26); }
.hs-ghost-inv:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.46); color:#fff; }
/* Three sizes, so no page invents its own padding for the same button. */
.hs-btn-sm{ font-size:14.5px; padding:11px 20px; }
.hs-btn-md{ font-size:14.5px; padding:13px 22px; }
.hs-btn-lg{ font-size:16px; padding:15px 26px; }

/* ---- header ---------------------------------------------------------- */
.hs-hdr{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line); }
.hs-hdr-in{ height:72px; display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.hs-navlink{ color:var(--muted); transition:color .15s ease; }
.hs-navlink:hover{ color:var(--ink); }
.hs-navlinks a{ position:relative; padding:6px 0; }
.hs-navlinks a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
.hs-navlinks a:hover::after{ transform:scaleX(1); }
/* The page you are on is marked, not merely hovered. */
.hs-navlinks a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.hs-navlinks a[aria-current="page"]::after{ transform:scaleX(1); }
.hs-hamburger{ display:none; }
@keyframes hs-rise{ from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }
.hs-mmenu{ animation:hs-rise .18s ease both; }
.hs-mlink{ padding:14px 2px; color:var(--ink); border-bottom:1px solid var(--line); }

/* ---- cards ----------------------------------------------------------- */
.hs-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:22px 20px 24px;
  box-shadow:var(--sh-1); transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.hs-card:hover{ border-color:#cfd7e1; box-shadow:var(--sh-lift); transform:translateY(-3px); }
/* The icon tile. One shape, one tint -- it is what makes a dozen cards read
   as one set instead of a dozen loose glyphs. */
.hs-ico{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  border-radius:11px; background:var(--teal-tint); color:var(--teal-d); font-size:21px; }
.hs-ico-sm{ width:34px; height:34px; font-size:18px; }
.hs-chip{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; background:#fff; box-shadow:var(--sh-1);
  transition:border-color .18s ease, box-shadow .18s ease; }
.hs-chip:hover{ border-color:#cfd7e1; box-shadow:var(--sh-2); }
.hs-panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-3); }

/* ---- pricing --------------------------------------------------------- */
.hs-plan{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md);
  background:#fff; padding:30px 26px 28px; box-shadow:var(--sh-1); position:relative;
  transition:box-shadow .18s ease, border-color .18s ease; }
.hs-plan:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); }
/* The recommended plan is marked once -- a heavier navy edge and one label -- rather
   than by an edge, a gradient rail and a coloured chip all saying the same thing. */
.hs-plan-hi{ border:1.5px solid var(--navy); box-shadow:var(--sh-3); }
/* The plan name identifies the card, so it is set as a name rather than as a
   tracked-out label: it should be the first thing read on the card, not the faintest. */
.hs-plan-name{ font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--navy); margin:0; }
/* Every card gives the same four bands to price, terms and description, so the three
   read across as one comparison instead of three cards that happen to sit in a row.
   The min-heights are what hold that line when one card prices and two do not. */
.hs-plan-price,.hs-plan-free{ min-height:50px; margin-top:14px; }
.hs-plan-price{ display:flex; align-items:baseline; gap:6px; }
.hs-plan-price b{ font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1;
  color:var(--navy); font-variant-numeric:tabular-nums; }
.hs-plan-price span{ font-size:15px; color:var(--muted); font-weight:500; }
/* Margins set on all sides: these are <p> elements beside a <span>, and the
   browser default bottom margin on one card but not the others is exactly what
   knocks the row out of line. */
.hs-plan-alt,.hs-plan-nocard{ min-height:21px; margin:8px 0 0; }
.hs-plan-alt{ font-size:13.5px; color:var(--muted); }
.hs-plan-sub{ font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:12px 0 0; min-height:45px; }
.hs-plan-badge{ position:absolute; top:-11px; right:22px; background:var(--navy); color:#fff;
  font-size:11.5px; font-weight:650; letter-spacing:.01em; padding:5px 12px; border-radius:6px; }
/* The action sits with the price, above the list. The three lists run 8, 14 and 14
   rows, so a button placed after them could never line up across the row. */
.hs-plan-go{ width:100%; font-size:15px; padding:13px; margin-top:20px; }
.hs-feats{ list-style:none; padding:22px 0 0; margin:22px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px; font-size:14.5px; line-height:1.45; color:var(--ink-2); }
.hs-feats li{ display:flex; gap:10px; align-items:flex-start; }
.hs-feats i{ flex:none; margin-top:2px; font-size:15px; }
.hs-yes{ color:var(--teal); }
/* Raised off #b6bcc4, which sat near 2.2:1 on white -- under the 3:1 a meaningful
   icon needs. The lock shape, not the colour, is what carries the meaning. */
.hs-no{ color:#8b939d; }
.hs-feats li.hs-off{ color:var(--muted); }
/* What a plan does not include is set below a rule rather than mixed into the list,
   so every card leads with what it gives you. */
.hs-feats li:not(.hs-off) + li.hs-off{ margin-top:14px; padding-top:15px; border-top:1px solid var(--line); }

/* ---- faq ------------------------------------------------------------- */
.hs-faq{ border-bottom:1px solid var(--line); }
.hs-faq summary{ list-style:none; cursor:pointer; padding:20px 2px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; font-weight:650; font-size:16.5px; letter-spacing:-.005em; transition:color .15s ease; }
.hs-faq summary:hover{ color:var(--teal-d); }
.hs-faq summary::-webkit-details-marker{ display:none; }
.hs-faq summary .hs-chev{ transition:transform .2s ease; color:var(--teal); flex:none; }
.hs-faq[open] summary{ color:var(--navy); }
.hs-faq[open] summary .hs-chev{ transform:rotate(45deg); }
.hs-faq .hs-faq-a{ margin:0 0 22px; color:var(--muted); font-size:15.5px; line-height:1.7; max-width:70ch; }
.hs-faq .hs-faq-a p{ margin:0; }
.hs-faq .hs-faq-a p + p{ margin-top:12px; }

/* ---- interior page hero ----------------------------------------------
   About, Contact, Privacy and Terms open light. The navy is spent on the
   home page and on each page's closing call; an interior page that opened
   dark would tip the site past the balance the design is built on. */
.hs-phero{ background:linear-gradient(180deg, var(--teal-tint) 0%, #fff 100%);
  border-bottom:1px solid var(--line); padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(36px,4.5vw,60px); }
.hs-phero .hs-h1{ font-size:clamp(32px,4.4vw,50px); }
.hs-phero .hs-lead{ max-width:62ch; }
.hs-crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.hs-crumb a{ color:var(--teal-d); }
.hs-crumb i{ font-size:12px; color:#a6aeb9; }

/* ---- long-form prose (About, Privacy, Terms) -------------------------
   One measure, one rhythm. Legal text is read, not scanned, so the column
   is narrow and the leading is generous. */
.hs-prose{ max-width:72ch; }
.hs-prose > :first-child{ margin-top:0; }
.hs-prose h2{ font-size:clamp(21px,2.2vw,26px); line-height:1.25; letter-spacing:-.016em; font-weight:750;
  margin:52px 0 0; padding-top:4px; }
.hs-prose h3{ font-size:17px; line-height:1.35; letter-spacing:-.008em; font-weight:700; margin:30px 0 0; }
.hs-prose p{ font-size:15.5px; line-height:1.75; color:var(--ink-2); margin:14px 0 0; }
.hs-prose ul,.hs-prose ol{ margin:14px 0 0; padding-left:20px; }
.hs-prose li{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-top:8px; }
.hs-prose strong{ color:var(--ink); font-weight:650; }
.hs-prose a{ text-decoration:underline; text-underline-offset:2px; }
/* A short definition list reads better than a paragraph for "what we collect". */
.hs-defs{ margin:18px 0 0; display:flex; flex-direction:column; gap:14px; }
.hs-def{ border-left:3px solid var(--teal-tint); padding-left:16px; }
.hs-def dt{ font-weight:650; font-size:15px; color:var(--ink); }
.hs-def dd{ margin:5px 0 0; font-size:15px; line-height:1.7; color:var(--ink-2); }
/* The one place a page says something about itself rather than its subject. */
.hs-note{ background:var(--tint); border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:16px 18px; margin:24px 0 0; }
.hs-note p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-2); }
.hs-note p + p{ margin-top:10px; }
.hs-note-t{ font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--navy); margin-bottom:6px; }
/* A value the operator still has to supply. Visible on purpose. */
.hs-tbd{ display:inline-block; font-weight:650; font-size:.92em; color:var(--teal-d);
  background:var(--teal-tint); border:1px dashed #b6d5dd; border-radius:5px; padding:1px 7px; }

/* ---- table of contents ----------------------------------------------- */
.hs-legal{ display:grid; grid-template-columns:236px 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.hs-toc{ position:sticky; top:96px; border-left:1px solid var(--line); padding-left:18px; }
.hs-toc-t{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.hs-toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.hs-toc a{ font-size:13.5px; line-height:1.4; color:var(--ink-2); }
.hs-toc a:hover{ color:var(--teal-d); }

/* ---- grids ----------------------------------------------------------- */
/* The words carried 527px of a 1168px column and the H1 broke onto five lines
   with "Create" alone on the first. The headline is the page, so it takes the
   larger half now. */
.hs-hero{ display:grid; grid-template-columns:1.14fr 1fr; gap:clamp(36px,4vw,64px); align-items:center; }
.hs-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,28px); }
.hs-features{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:14px; margin-top:44px; }
.hs-usp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.hs-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,64px); align-items:center; }
.hs-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,30px); margin-top:44px; }
.hs-aud{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:38px; }
.hs-pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; align-items:stretch; }
.hs-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px); margin-top:40px; }
.hs-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,26px); margin-top:36px; }
.hs-foot{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(24px,3.4vw,44px); }

/* Step numerals, joined by a hairline so four boxes read as one sequence. */
.hs-step{ position:relative; }
.hs-step-n{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  border-radius:11px; background:var(--navy); color:#fff; font-weight:700; font-size:16px; }
.hs-step::after{ content:""; position:absolute; left:52px; right:-14px; top:20px; height:1px; background:var(--line-2); }
.hs-step:last-child::after{ display:none; }

/* ---- footer ---------------------------------------------------------- */
.hs-ftr{ border-top:1px solid var(--line); background:var(--tint); }
.hs-ftr-t{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.hs-ftr-col{ display:flex; flex-direction:column; gap:11px; font-size:14.5px; }
.hs-ftr-col a{ color:var(--ink-2); }
.hs-ftr-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:clamp(36px,4vw,52px); padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }

/* ---- responsive ------------------------------------------------------
   Each breakpoint changes proportion, not scale: columns collapse in the
   order that keeps the reading line sensible, and the dense grids drop a
   column before the sparse ones do. */
@media (max-width:1120px){
  .hs-pricing{ grid-template-columns:1fr 1fr; }
  .hs-steps{ grid-template-columns:1fr 1fr; }
  .hs-step::after{ display:none; }
  .hs-legal{ grid-template-columns:1fr; }
  .hs-toc{ position:static; border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:20px; }
  .hs-toc ol{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px 24px; }
  .hs-foot{ grid-template-columns:1fr 1fr 1fr; }
  .hs-foot > :first-child{ grid-column:1 / -1; }
}
@media (max-width:960px){
  .hs-navlinks{ display:none !important; }
  .hs-navright{ display:none !important; }
  .hs-hamburger{ display:inline-flex !important; }
  .hs-hero{ grid-template-columns:1fr !important; gap:44px; }
  .hs-hero-visual{ order:2; }
  .hs-usp{ grid-template-columns:1fr !important; }
  .hs-split{ grid-template-columns:1fr !important; }
  .hs-trio{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hs-pricing{ grid-template-columns:1fr; }
  .hs-benefits{ grid-template-columns:1fr 1fr; }
  .hs-steps{ grid-template-columns:1fr; }
  .hs-duo{ grid-template-columns:1fr; }
  .hs-foot{ grid-template-columns:1fr 1fr; }
  .hs-hero-cta{ flex-direction:column; align-items:stretch; }
  .hs-hero-cta .hs-btn{ width:100%; }
  .hs-h1{ font-size:clamp(32px,8.6vw,42px); }
  .hs-lead-lg{ font-size:17px; }
  .hs-plan-sub{ min-height:0; }
  .hs-prose h2{ margin-top:40px; }
  .hs-toc ol{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .hs-benefits{ grid-template-columns:1fr; }
  .hs-foot{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---- print -----------------------------------------------------------
   Legal pages get printed and filed. Chrome, the sticky header and the
   navigation are not part of the document. */
@media print{
  .hs-hdr,.hs-ftr,.hs-toc,.hs-skip,.hs-crumb{ display:none !important; }
  .hs-phero{ background:none; border-bottom:0; padding:0 0 12px; }
  .hs-legal{ grid-template-columns:1fr; }
  body{ font-size:11pt; }
  .hs-prose p,.hs-prose li{ color:#000; }
  a{ color:#000; text-decoration:none; }
}

/* ---- Authentication pages ---------------------------------------------------
   Signup, Login and Onboarding. One centred card on the site's own wash, built
   from the tokens above so these pages are part of the site rather than beside
   it. No new colours, no new type scale. */
.hs-auth{ min-height:100vh; display:flex; flex-direction:column; background:var(--tint); }
.hs-auth-main{ flex:1; display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,5vw,56px) clamp(20px,4vw,32px); }
.hs-auth-card{ width:100%; max-width:440px; background:#fff; border:1px solid var(--line);
  /* was var(--r), which is not a token in this sheet -- the declaration was
     invalid and the card rendered with square corners, alone on the site. */
  border-radius:var(--r-md); padding:clamp(24px,3.4vw,36px); box-shadow:var(--sh-2); }
.hs-auth-wide{ max-width:520px; }
.hs-auth-brand{ display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.hs-auth-brand img{ height:34px; width:auto; }
.hs-auth-t{ font-size:23px; line-height:1.2; letter-spacing:-.018em; font-weight:800; margin:0; text-align:center; }
.hs-auth-s{ font-size:14px; line-height:1.55; color:var(--muted); margin:8px 0 0; text-align:center; }
.hs-field{ margin-top:16px; }
.hs-field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.hs-input{ width:100%; box-sizing:border-box; height:44px; padding:0 13px; font-family:inherit; font-size:15px;
  color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm); }
.hs-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint); }
/* The file field was the only browser-default control on any QuoteSketch page. */
.hs-input[type="file"]{ height:auto; padding:8px 10px; font-size:13.5px; color:var(--muted); cursor:pointer; }
.hs-input[type="file"]::file-selector-button{ font:inherit; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:7px 13px;
  margin-right:12px; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.hs-input[type="file"]::file-selector-button:hover{ background:var(--soft); border-color:#c2cad5; }
.hs-hint{ font-size:12.5px; line-height:1.5; color:var(--muted); margin:6px 0 0; }
.hs-auth-btn{ width:100%; margin-top:22px; }
.hs-auth-alt{ font-size:13.5px; color:var(--muted); text-align:center; margin:18px 0 0; }
.hs-auth-err{ margin-top:16px; padding:10px 12px; border-radius:var(--r-sm); font-size:13.5px; line-height:1.5;
  background:#fdeede; border:1px solid #f0d9b5; color:#8a5a12; }
/* The plan chooser: two rows, selectable, showing what was picked on the pricing
   page and letting it be changed before the account exists. */
.hs-plan-pick{ display:grid; gap:10px; margin-top:6px; }
.hs-plan-opt{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:13px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff;
  font-family:inherit; color:var(--ink); }
.hs-plan-opt:hover{ border-color:var(--teal-l); }
.hs-plan-opt[aria-pressed="true"]{ border-color:var(--teal); background:var(--teal-tint); }
.hs-plan-opt-n{ font-weight:700; font-size:14.5px; }
.hs-plan-opt-p{ margin-left:auto; font-weight:700; font-size:14.5px; white-space:nowrap; }
.hs-plan-opt-d{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.hs-auth-note{ font-size:12.5px; line-height:1.6; color:var(--muted); margin:18px 0 0; padding-top:16px;
  border-top:1px solid var(--line); }
@media (max-width:640px){
  .hs-auth-main{ align-items:flex-start; }
  .hs-auth-card{ padding:22px 18px; }
}

/* ---- Authentication: the two-column Signup / Login shell ---------------------
   Signup and Login share one composition so the two read as one product: a quiet
   brand column carrying the headline and the reasons to have an account, and a
   white card carrying the work. Onboarding keeps the single centred card above --
   it is a step inside the product, not a front door, and the two are deliberately
   not the same thing.

   Built from the tokens at the top of this file. No new colours, no new type
   scale, no imagery: the only picture on these pages is the real logo. */
.hs-au{ min-height:100vh; display:grid; grid-template-columns:1.02fr 1fr; background:#fff; }

/* The brand column. A pale wash rather than the navy band the marketing pages
   use, because the only logo asset is dark: putting it on navy would mean either
   inventing a light variant or sitting it on a plate. Light keeps the real mark. */
.hs-au-side{ background:var(--tint); border-right:1px solid var(--line); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(34px,4vw,68px) clamp(24px,4vw,60px); }
.hs-au-side::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 440px at 14% 10%, rgba(10,127,149,.11), transparent 70%); }
.hs-au-side > *{ position:relative; }
.hs-au-motif{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  z-index:0; overflow:hidden; }
.hs-au-motif svg{ position:absolute; display:block; }
/* The sheet, bottom-right, large and quiet. */
.hs-au-motif-sheet{ right:-9%; bottom:-13%; width:min(40%,300px); height:auto;
  color:var(--navy); opacity:.075; }
/* A second sheet behind it, so the stack reads as a set of quotations. */
.hs-au-motif-sheet-b{ right:17%; bottom:-7%; width:min(27%,205px); height:auto;
  color:var(--teal); opacity:.085; }
/* A dot field in the opposite corner, to weight the panel diagonally. */
.hs-au-motif-dots{ left:-3%; top:-5%; width:min(30%,215px); height:auto;
  color:var(--teal); opacity:.15; }
@media (max-width:1024px){
  /* The panel is a header at this width; only the dots still fit. */
  .hs-au-motif-sheet,.hs-au-motif-sheet-b{ display:none; }
  .hs-au-motif-dots{ width:min(46%,180px); left:auto; right:-20px; top:-20px; opacity:.13; }
}
@media (max-width:680px){ .hs-au-motif{ display:none; } }
.hs-au-inner{ width:100%; max-width:452px; margin-left:auto; margin-right:clamp(0px,3vw,64px); }
.hs-au-side-hi{ justify-content:flex-start; padding-top:clamp(44px,8vh,92px); }
.hs-au-logo{ display:inline-flex; margin-bottom:clamp(20px,2.2vw,30px); }
.hs-au-logo img{ height:56px; width:auto; display:block; }
.hs-au-h1{ font-size:clamp(29px,3.1vw,40px); line-height:1.13; letter-spacing:-.026em; font-weight:800;
  margin:0; color:var(--navy); }
.hs-au-lede{ font-size:clamp(15px,1.15vw,16.5px); line-height:1.6; color:var(--muted); margin:15px 0 0; }
.hs-au-benefits{ list-style:none; margin:clamp(28px,3vw,40px) 0 0; padding:0; display:grid; gap:19px; }
.hs-au-benefit{ display:flex; gap:13px; align-items:flex-start; }
.hs-au-tick{ flex:none; width:27px; height:27px; border-radius:9px; background:var(--teal-tint); color:var(--teal-d);
  display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.hs-au-bt{ font-size:14.5px; font-weight:700; color:var(--ink); margin:0; }
.hs-au-bd{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:3px 0 0; }

/* The working column. */
.hs-au-main{ display:flex; align-items:center; justify-content:center; background:#fff;
  padding:clamp(20px,2.2vw,30px) clamp(20px,3.4vw,44px); }
.hs-au-card{ width:100%; max-width:524px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:clamp(20px,1.8vw,26px); }
.hs-au-t{ font-size:21px; line-height:1.22; letter-spacing:-.02em; font-weight:800; margin:0; }
.hs-au-s{ font-size:13.5px; line-height:1.5; color:var(--muted); margin:5px 0 0; }
.hs-au-legend{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 7px; }

/* The plan chooser: two pricing cards, not two rows of a list. The selected one
   is obvious from three things at once -- border, wash and a filled radio -- so
   it never rests on colour alone. */
.hs-au-plans{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hs-au-plan{ position:relative; text-align:left; cursor:pointer; font-family:inherit; color:var(--ink);
  border:1.5px solid var(--line-2); background:#fff; border-radius:var(--r-md); padding:12px 13px 13px;
  transition:border-color .16s, box-shadow .16s, background .16s; }
.hs-au-plan:hover{ border-color:var(--teal-l); }
.hs-au-plan[aria-pressed="true"]{ border-color:var(--teal); background:var(--teal-tint);
  box-shadow:0 0 0 3px rgba(10,127,149,.12); }
.hs-au-plan-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hs-au-plan-n{ font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.hs-au-plan[aria-pressed="true"] .hs-au-plan-n{ color:var(--teal-d); }
.hs-au-radio{ flex:none; width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line-2);
  background:#fff; display:inline-flex; align-items:center; justify-content:center; }
.hs-au-plan[aria-pressed="true"] .hs-au-radio{ border-color:var(--teal); background:var(--teal); }
.hs-au-radio b{ width:6px; height:6px; border-radius:50%; background:#fff; display:none; }
.hs-au-plan[aria-pressed="true"] .hs-au-radio b{ display:block; }
.hs-au-plan-p{ display:flex; align-items:baseline; gap:3px; margin-top:8px; }
.hs-au-plan-free{ display:flex; align-items:center; min-height:24px; margin-top:8px;
  font-size:13px; font-weight:700; line-height:1.25; letter-spacing:-.006em; color:var(--teal-d); }
.hs-au-plan[aria-pressed="true"] .hs-au-plan-free{ color:var(--teal-d); }
.hs-au-plan-p b{ font-size:24px; font-weight:800; letter-spacing:-.032em; line-height:1; }
.hs-au-plan-p span{ font-size:13px; color:var(--muted); font-weight:500; }
.hs-au-plan-l{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:3px; }
.hs-au-plan-l li{ font-size:12.5px; line-height:1.4; color:var(--muted); }
.hs-au-pending{ margin:8px 0 0; padding:8px 11px; border-radius:var(--r-sm); font-size:12.5px; line-height:1.5;
  background:#fdeede; border:1px solid #f0d9b5; color:#8a5a12; }
.hs-au-pending b{ font-weight:700; }

/* Fields. Taller than the marketing forms, because these are the ones people fail
   at and a 50px target is comfortable under a thumb. */
.hs-au-field{ margin-top:14px; }
.hs-au-lab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.hs-au-lab label{ font-size:13.5px; font-weight:650; color:var(--ink-2); }
.hs-au-inp{ position:relative; display:block; }
.hs-au-inp input{ width:100%; height:48px; padding:0 15px; font-family:inherit; font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .16s, box-shadow .16s; }
.hs-au-inp input::placeholder{ color:#9aa3ae; }
.hs-au-inp input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(10,127,149,.13); }
.hs-au-inp input:disabled{ background:var(--soft); color:var(--muted); cursor:not-allowed; }
.hs-au-inp-bad input{ border-color:#8a5a12; }
.hs-au-inp-bad input:focus{ border-color:#8a5a12; box-shadow:0 0 0 4px rgba(138,90,18,.14); }
.hs-au-inp-btn input{ padding-right:54px; }
.hs-au-peek{ position:absolute; top:0; right:0; width:50px; height:48px; border:0; background:none; cursor:pointer;
  color:var(--muted); font-family:inherit; display:inline-flex; align-items:center; justify-content:center;
  border-radius:0 var(--r-sm) var(--r-sm) 0; }
.hs-au-peek:hover{ color:var(--teal-d); }
.hs-au-forgot{ font-size:13px; font-weight:650; color:var(--teal-d); background:none; border:0; padding:0;
  cursor:pointer; font-family:inherit; }
.hs-au-forgot:hover{ color:var(--navy); text-decoration:underline; }
.hs-au-forgot:disabled{ color:var(--muted); cursor:not-allowed; text-decoration:none; }

/* The primary action. Exactly one control on the page looks like this. */
.hs-au-cta{ width:100%; height:54px; margin-top:20px; border:0; border-radius:var(--r-sm);
  background:var(--navy); color:#fff; font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-.004em;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:var(--sh-1), 0 14px 28px -16px rgba(13,35,64,.8);
  transition:background .16s, box-shadow .16s, transform .1s; }
.hs-au-cta:hover:not(:disabled){ background:var(--navy-700);
  box-shadow:var(--sh-1), 0 18px 34px -16px rgba(13,35,64,.85); }
.hs-au-cta:active:not(:disabled){ transform:translateY(1px); }
.hs-au-cta:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.hs-au-spin{ width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid rgba(255,255,255,.38); border-top-color:#fff; animation:hs-au-rot .7s linear infinite; }
@keyframes hs-au-rot{ to{ transform:rotate(360deg); } }

/* Messages. Failure and success are different shapes, not one box recoloured. */
.hs-au-msg{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:11px 13px;
  border-radius:var(--r-sm); font-size:13.5px; line-height:1.55; }
.hs-au-msg svg{ flex:none; margin-top:1px; }
.hs-au-bad{ background:#fdeede; border:1px solid #f0d9b5; color:#8a5a12; }
.hs-au-ok{ background:var(--teal-tint); border:1px solid #bfdfe6; color:#0a5d6e; }

.hs-au-alt{ font-size:13.5px; color:var(--muted); text-align:center; margin:12px 0 0; }
.hs-au-alt a{ font-weight:650; }
.hs-au-or{ display:flex; align-items:center; gap:12px; margin:13px 0 0; color:#9aa3ae; font-size:11.5px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.hs-au-or::before,.hs-au-or::after{ content:""; height:1px; background:var(--line); flex:1; }
.hs-au-ghost{ display:flex; align-items:center; justify-content:center; width:100%; height:44px; margin-top:10px;
  border:1.5px solid var(--line-2); border-radius:var(--r-sm); background:#fff; color:var(--ink-2);
  font-size:14.5px; font-weight:650; }
.hs-au-ghost:hover{ border-color:#c6cfda; background:var(--soft); color:var(--navy); }
.hs-au-legal{ font-size:11.5px; line-height:1.5; color:var(--muted); text-align:center;
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.hs-au-note{ font-size:12px; line-height:1.55; color:var(--muted); margin:14px 0 0; padding-top:13px;
  border-top:1px solid var(--line); }

/* ---- the same pages on a narrow screen ---------------------------------------
   One column, the card first-class, and the brand column shrunk to a header that
   introduces the page without pushing the form below the fold. */
@media (max-width:1024px){
  .hs-au{ grid-template-columns:1fr; min-height:0; }
  .hs-au-side{ border-right:0; border-bottom:1px solid var(--line); justify-content:flex-start;
    padding:clamp(28px,6vw,44px) clamp(20px,5vw,40px) clamp(26px,5vw,38px); }
  .hs-au-inner{ margin:0 auto; max-width:600px; }
  .hs-au-benefits{ grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:26px; }
  .hs-au-main{ padding:clamp(24px,5vw,40px) clamp(18px,5vw,36px) clamp(40px,7vw,60px); }
  .hs-au-card{ max-width:600px; }
}
@media (max-width:680px){
  /* The benefits are the first thing to go. On a phone the form is the page, and
     three reasons to sign up must not stand between the visitor and it. */
  .hs-au-benefits{ display:none; }
  .hs-au-side{ padding:26px 20px 24px; text-align:center; }
  .hs-au-logo{ margin-bottom:16px; }
  .hs-au-logo img{ height:46px; }
  .hs-au-h1{ font-size:clamp(24px,6.4vw,30px); }
  .hs-au-lede{ font-size:14.5px; margin-top:10px; }
  .hs-au-card{ padding:20px 16px; border-radius:var(--r-md); box-shadow:var(--sh-2); }
  .hs-au-main{ padding:22px 16px 40px; background:var(--soft); }
}
@media (max-width:420px){
  /* Two price cards stop being comparable when neither fits its own numbers. */
  .hs-au-plans{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .hs-au-spin{ animation:none; }
  .hs-au-plan,.hs-au-inp input,.hs-au-cta{ transition:none; }
}

/* ---- the brand mark ----------------------------------------------------------
   quotesketch-logo.png is 100% opaque: it carries a white rectangle baked into
   its pixels, which is invisible on white and a visible box on anything else --
   the footer's --tint ground included. quotesketch-logo-app.png is the same
   wordmark with a real alpha channel, so it is the one used everywhere on this
   site now.

   That asset also carries transparent padding: measured off the PNG, the ink
   occupies 60.2% of the canvas height, with 16.3% empty above it and 23.4%
   empty below. Setting height alone therefore renders a mark 40% smaller than
   the box it reserves, and pushes the header's alignment off centre. The
   negative margins below trim that padding back out, so the layout box is the
   size of the mark you can actually see and the numbers here mean what they say:

     header  66px canvas  ->  40px of visible mark
     footer  58px canvas  ->  35px of visible mark

   Recompute both if the asset is ever re-exported. */
.hs-brand{ display:inline-flex; align-items:center; flex:none; }
.hs-brand img{ height:66px; width:auto; display:block; margin:-11px 0 -15px; }
.hs-ftr-brand{ display:inline-flex; }
.hs-ftr-brand img{ height:58px; width:auto; display:block; margin:-9px 0 -14px; }
@media (max-width:720px){
  .hs-brand img{ height:58px; margin:-9px 0 -14px; }
}

/* The square mark, used only where a compact symbol reads better than the
   wordmark: the two teaser cards on the home page. Its padding is almost
   symmetric (4.5% / 4.3%), so it needs no trimming. */
.hs-mark{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-sm); background:var(--teal-tint); }
.hs-mark img{ width:32px; height:32px; display:block; }

/* Pricing and FAQ reuse the existing .hs-phero page hero above, the same band
   the legal pages use, so all four interior pages open identically. */

/* ---- pricing page ------------------------------------------------------------ */
/* A free plan states that it is free in words. "$0" reads as a transaction and
   sends people looking for the card field that does not exist. */
.hs-plan-free{ display:flex; align-items:center;
  font-size:26px; font-weight:800; letter-spacing:-.025em; color:var(--navy); }
.hs-plan-nocard{ display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:650; color:var(--teal-d); }
.hs-plan-nocard i{ font-size:15px; }
/* The trial belongs to the action, not to the comparison bands above it: what a
   visitor needs before pressing "Start Pro" is what pressing it costs, and the
   answer is nothing. So it sits under the button rather than in the four-band row,
   which stays exactly as aligned as it was. It is the one place a card is allowed
   to run taller than its neighbours -- what it pushes down is the feature list,
   and those already run 8, 14 and 14 rows. */
.hs-plan-trial{ display:flex; align-items:flex-start; gap:7px; margin:12px 0 0;
  padding:10px 12px; border-radius:var(--r-sm); background:var(--teal-tint);
  font-size:13px; font-weight:600; line-height:1.45; color:var(--teal-d); text-align:left; }
.hs-plan-trial i{ font-size:15px; flex:none; margin-top:1px; }

/* The three plans read as one row that can be compared, so they share a grid
   rather than each sizing to its own content. */
.hs-pricing-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,22px);
  align-items:stretch; margin-top:clamp(30px,3.2vw,44px); }
/* Tablet keeps two columns and lays the recommended plan across the foot, rather
   than dropping straight to one narrow column stranded in a wide gutter. */
@media (max-width:1000px){
  .hs-pricing-3{ grid-template-columns:1fr 1fr; max-width:780px; margin-left:auto; margin-right:auto; }
  .hs-pricing-3 .hs-plan-hi{ grid-column:1 / -1; }
  /* Spanning two columns, a full-width button stops reading as a button. */
  .hs-pricing-3 .hs-plan-hi .hs-plan-go{ max-width:320px; }
}
@media (max-width:680px){
  .hs-pricing-3{ grid-template-columns:1fr; max-width:520px; }
  .hs-pricing-3 .hs-plan-hi{ grid-column:auto; }
  /* Stacked, there is no row to hold, so the bands stop reserving height. */
  .hs-plan-price,.hs-plan-free,.hs-plan-alt,.hs-plan-nocard,.hs-plan-sub{ min-height:0; }
}

/* The short answers under the plans: what is metered, what is not, what happens
   at a limit. Three cards, not three paragraphs. */
.hs-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); margin-top:clamp(26px,3vw,40px); }
@media (max-width:900px){ .hs-notes{ grid-template-columns:1fr; } }
.hs-note{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:20px; }
.hs-note-i{ width:38px; height:38px; border-radius:10px; background:var(--teal-tint); color:var(--teal-d);
  display:inline-flex; align-items:center; justify-content:center; font-size:19px; }

/* ---- FAQ page ---------------------------------------------------------------- */
/* Centred on its own 860px the list started 210px inside the H1 above it. The
   column is the page column now, and the reading measure the answers want is
   kept on the group instead. */
.hs-faqwrap{ max-width:1280px; margin:0 auto;
  padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); }
.hs-faq-group{ max-width:860px; margin-top:clamp(30px,3.4vw,46px); }
/* These are H2s. At 12px uppercase they were smaller than the H3 questions
   beneath them, so the heading order read backwards down the page. */
.hs-faq-group-t{ font-size:clamp(18px,1.7vw,21px); font-weight:700; letter-spacing:-.012em;
  color:var(--navy); margin:0 0 12px; }
.hs-faq-list{ border-top:1px solid var(--line); }

/* ---- the two teasers that replace the moved sections on the home page --------- */
.hs-teaser{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:clamp(20px,2.4vw,30px); }
.hs-teaser-b{ flex:1 1 320px; min-width:0; }
.hs-teaser-t{ font-size:clamp(19px,2vw,23px); line-height:1.2; letter-spacing:-.018em; font-weight:800; margin:0; }
.hs-teaser-p{ font-size:15px; line-height:1.6; color:var(--muted); margin:9px 0 0; max-width:56ch; }
.hs-teaser .hs-btn{ flex:none; }
@media (max-width:640px){ .hs-teaser .hs-btn{ width:100%; } }

/* The compact plan summary that stays on the home page: the shape of the
   decision, with the detail one click away on the pricing page. */
.hs-minis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px; }
@media (max-width:800px){ .hs-minis{ grid-template-columns:1fr; } }
.hs-mini{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 18px 20px; }
.hs-mini-hi{ border-color:var(--navy); box-shadow:0 18px 40px -28px rgba(13,35,64,.5); }
.hs-mini-n{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.hs-mini-hi .hs-mini-n{ color:var(--navy); }
.hs-mini-p{ font-size:23px; font-weight:800; letter-spacing:-.025em; margin-top:8px; line-height:1.1; }
.hs-mini-p span{ font-size:13px; font-weight:500; color:var(--muted); letter-spacing:0; }
.hs-mini-s{ font-size:13px; line-height:1.5; color:var(--muted); margin-top:7px; }