/* ==========================================================================
   FreeSiteCrew
   Built on the same layout system as siteaim.com: one stylesheet, BEM-ish
   class names, a 1200px content wrap, a dark hero band the header floats on,
   and titles on a display face with body copy on the system stack.

   The palette is built from #7500ca, the purple sampled straight out of the
   FreeSiteCrew logo on the live site, so the site matches the brand rather
   than the other way round. Every value below was checked against the surface
   it actually sits on rather than picked by eye - the ratios are recorded next
   to each token so a future change can be checked the same way.
   ========================================================================== */

:root{
  /* The brand purple, taken from the logo. It is dark enough in luminance
     terms to do three jobs the green it replaced could not do at once: shapes,
     text on white (8.05:1) and a solid fill under a white label (8.05:1). That
     is why there is no separate "text" and "button" purple below the way there
     was a separate --green and --green-btn. */
  --purple:#7500ca;

  /* A deeper purple for hover states, and for text that needs more weight than
     the brand value gives it. 10.6:1 on white, 9.2:1 on --lilac. */
  --purple-dark:#5d00a1;

  /* Kept as separate names so the button rules read for themselves, but both
     resolve to the brand values: white on #7500ca is already 8.05:1, far past
     the 4.5:1 a 15px label needs, so there is nothing to correct for. */
  --purple-btn:#7500ca;
  --purple-btn-dark:#5d00a1;   /* hover, 10.6:1 */

  /* Lifted purple, for text and marks sitting on the dark band. 9.1:1 there.
     The brand purple on the band is far too close to it to read, so this keeps
     the hue and pulls it clear of the background. */
  --purple-lit:#cf9bff;

  /* Tint blocks. --lilac is the section wash and the soft button fill,
     --lilac-2 is that button's hover a shade deeper. */
  --lilac:#f5ecfd;
  --lilac-2:#ead7fb;

  --ink:#0d1526;
  --slate:#4a5769;
  --line:#e4e8ee;

  /* The dark band, used by the hero, the header island and the footer. Kept as
     tokens because three separate gradients drifted apart the last time they
     were written out longhand. Deep violet rather than the navy this used to
     be, so the band belongs to the same family as the logo purple. */
  --band-1:#150425;
  --band-2:#230b3c;
  --band-3:#331154;
  --band-4:#43176d;

  /* Titles only - body text stays on the system stack.
     Familjen Grotesk: Scandinavian grotesque, tops out at 700. */
  --font-display:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,
                 "Segoe UI",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* Every in-page link on this site jumps to a section, and the header is
   sticky - so without this the heading you asked for lands underneath it.
   110px is the header's 92px plus a little air. */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  /* Body: standard system stack. Resolves to Segoe UI on Windows, SF Pro on
     macOS/iOS, Roboto on Android. Titles use --font-display above. */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p{margin:0}
img{max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* Visible only to a screen reader. Used for the menu button's label and the
   skip link, both of which need a name without a visual one. */
.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;
}
.skip{
  position:absolute;top:-60px;left:12px;z-index:60;
  padding:10px 16px;border-radius:8px;
  background:#fff;color:var(--purple-dark);font-weight:600;
  transition:top .16s ease;
}
.skip:focus{top:12px}

/* A single visible focus treatment for everything. Keyboard only, so it never
   fires on a mouse click, and it sits on an outline rather than a border so it
   cannot change any element's size when it appears. */
:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:2px;
  border-radius:4px;
}

/* Emphasis inside a heading is the purple accent, not italics. Every <em> in a
   title on this site means "this is the phrase that matters", never "read this
   in a different voice". */
h1 em,h2 em,h3 em{font-style:normal;color:var(--purple-dark)}
.hero h1 em,.cta h2 em{color:var(--purple-lit)}

/* ========================== BUTTONS ========================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;
  border:1px solid var(--purple-btn);
  border-radius:8px;
  background:var(--purple-btn);
  color:#fff;
  font-size:0.97rem;
  font-weight:600;
  white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,
             box-shadow .16s ease,color .16s ease;
}
.btn:hover{background:var(--purple-btn-dark);border-color:var(--purple-btn-dark)}
.btn--sm{padding:8px 14px;font-size:0.92rem;flex:none}
.btn--lg{padding:15px 30px;font-size:1.04rem}

/* Muted fill, sits quieter than the primary next to it */
.btn--soft{background:var(--lilac);border-color:transparent;color:var(--purple-dark)}
.btn--soft:hover{background:var(--lilac-2);border-color:transparent;color:var(--purple-dark)}

/* On the dark band, purple on purple disappears - invert it */
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{background:#ece2f8;border-color:#ece2f8;color:var(--ink)}

/* The primary call to action, sitting on the dark band, plus a glow to lift it
   off. Same fill as every other filled button; the glow is decoration and
   never has to be legible, so it uses the brand purple at low alpha. */
.btn--brand{
  background:var(--purple-btn);
  border-color:var(--purple-btn);
  color:#fff;
  box-shadow:0 2px 16px rgba(117,0,202,.34);
}
.btn--brand:hover{
  background:var(--purple-btn-dark);border-color:var(--purple-btn-dark);
  box-shadow:0 4px 24px rgba(117,0,202,.48);
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .18s ease}
.btn:hover svg{transform:translateX(3px)}

/* ========================== TOP BAR ==========================
   A shade darker than the hero band's darkest stop, so it reads as a strip
   above the colour rather than part of it. Scrolls away with the page; the
   nav island below is what stays stuck. Two near-blacks barely differ by
   contrast ratio at this end of the scale, so the hairline is what actually
   separates the bar from the band. */
.topbar{
  position:relative;z-index:11;
  background:#14041f;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#fff;
}
.topbar__inner{
  max-width:1380px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  height:40px;
  font-size:0.85rem;
}
.topbar__right{display:flex;align-items:center;gap:18px}
/* Padding rather than height, so the row keeps its 40px and the hit area grows
   around the label. This used to sit a tint below white and lift to white on
   hover; now that it starts white there is nowhere for the colour to go, so
   hover moves to a background wash - the same one the two <details> triggers
   beside it use, which makes all three behave alike. */
.topbar__login{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 10px;
  border-radius:7px;
  color:#fff;font-weight:600;
  transition:background-color .16s ease;
}
.topbar__login:hover{background:rgba(255,255,255,.09)}
.topbar__login svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Both top-bar dropdowns - the contact menu on the left and the currency
   switcher on the right - are <details>, so they open and close with no
   JavaScript at all. Everything below the trigger styling is shared. */
.contact,.money{position:relative}
.contact summary,.money summary{
  display:flex;align-items:center;gap:8px;
  padding:5px 9px;
  border-radius:7px;
  cursor:pointer;list-style:none;
  color:#fff;font-weight:600;
  transition:background-color .16s ease;
}
.contact summary::-webkit-details-marker,
.money summary::-webkit-details-marker{display:none}
.contact summary:hover,.money summary:hover{background:rgba(255,255,255,.09)}
.contact__ico{width:16px;height:16px;flex:none;fill:var(--purple-lit)}
.money__globe{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.money__cur{
  padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:0.8rem;letter-spacing:.03em;
}
.topbar__chev{width:11px;height:11px;opacity:.7;transition:transform .2s ease}
.contact[open] .topbar__chev,.money[open] .topbar__chev{transform:rotate(180deg)}

.contact__menu,.money__menu{
  position:absolute;top:calc(100% + 8px);z-index:30;
  padding:6px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 18px 40px rgba(4,12,22,.30);
}
.contact__menu{left:0;min-width:262px}
.money__menu{right:0;min-width:220px}

.contact__menu a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:8px;
  color:var(--ink);
  transition:background-color .15s ease;
}
.contact__menu a:hover{background:#f8f4fc}
.contact__menu svg{
  width:32px;height:32px;flex:none;
  padding:8px;border-radius:9px;
  background:var(--purple);fill:#ffffff;
}
.contact__menu b{display:block;font-size:0.92rem;font-weight:600;line-height:1.3}
.contact__menu b span{
  display:block;margin-top:2px;
  font-size:0.82rem;font-weight:500;color:var(--slate);
}
.money__menu button{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;
  padding:10px 12px;border-radius:8px;
  font-size:0.9rem;font-weight:600;
  color:var(--ink);text-align:left;
  transition:background-color .15s ease;
}
.money__menu button:hover{background:#f8f4fc}
.money__menu button span{font-size:0.85rem;font-weight:500;color:var(--slate)}
/* The currency you are currently seeing prices in. The brand --purple would
   clear AA on this tint on its own (7.0:1), but the marked row uses the deeper
   --purple-dark so every "this one is active" state on the site matches. */
.money__menu button[aria-current="true"]{background:var(--lilac);color:var(--purple-dark)}
.money__menu button[aria-current="true"] span{color:var(--purple-dark)}

@media (max-width:760px){
  /* Both triggers drop to their icon and chevron. The contact menu is the one
     people actually reach for on a phone, so it keeps its full panel. */
  .topbar__inner{height:38px}
  .contact summary span{display:none}
  .money__label{display:none}
  .contact__menu{min-width:250px}
}
/* At 360px the bar needs more room than it has, so "Client login" wrapped onto
   a second line and made the bar taller. Dropping the login label to its icon
   buys the width back. */
@media (max-width:420px){
  .topbar__inner{gap:10px}
  .topbar__right{gap:10px}
  .topbar__login span{display:none}
}

/* ========================== HEADER ==========================
   Transparent rail; the white "island" is .header__inner. The negative margin
   pulls it out of flow so the hero's colour band starts at the very top of the
   page and the header floats on it. That frees <main> to wrap every section
   instead of being trapped inside the band. 14 + 64 + 14 = 92px total. */
.header{
  position:sticky;top:0;z-index:10;
  padding:14px 20px;
  margin-bottom:-92px;
  background:transparent;
}
/* A white island floating on the violet band, carrying the purple logo. The
   shadow is what lifts it off the band; white on deep violet needs no border to
   separate the two the way the dark version did. */
.header__inner{
  position:relative;              /* containing block for the mega panel */
  max-width:1380px;               /* wider than the 1200px content wrap, so the
                                     nav has room without widening every section */
  margin:0 auto;
  display:flex;align-items:center;gap:18px;
  height:64px;
  padding:0 12px 0 22px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 30px rgba(12,2,26,.45);
}

/* The logo artwork, 203x44. Two files: the header uses the purple version on
   its white island, the footer the white one on the dark band.

   Height is set here and width left auto so the 4.61:1 artwork keeps its
   proportions; the img carries its intrinsic width/height so the browser
   reserves the box before the file lands and the nav does not jump.

   Sized off the CREW badge rather than the overall height. The badge is only
   15 of the artwork's 44 units tall, and its letters are counter-shapes cut out
   of that, so they end up roughly a seventh of whatever height is set here. At
   30px that put them near 4px and the badge read as a purple smudge; 38px
   brings them past 5px and the word resolves. It is also why the small-screen
   floor is 32px rather than dropping further.

   38px inside a 64px island leaves 13px of air top and bottom, which is enough
   that the logo does not crowd the bar. The link keeps its padding because the
   artwork alone is still under a thumb-sized target. */
.logo{display:inline-flex;align-items:center;flex:none;padding:6px 0}
.logo img{display:block;width:auto;height:38px}
@media (max-width:420px){.logo img{height:32px}}

/* auto margins centre the links in the space left between logo and actions */
.nav{display:flex;align-items:center;gap:2px;margin:0 auto}
/* Direct children only. This must not reach the links inside the mega panel,
   where nowrap sizes every card to its longest line and overflows the grid. */
/* Slate rather than full --ink, so the links sit a step below the logo in the
   hierarchy and darken on hover. 8.9:1 on white either way. */
.nav > a,.nav__link{
  padding:8px 12px;border-radius:7px;
  font-size:0.97rem;font-weight:600;color:#333d4e;
  white-space:nowrap;             /* a top-level item must never wrap */
  transition:color .15s ease,background-color .15s ease;
}
.nav > a:hover,.nav__link:hover{color:var(--ink);background:rgba(13,21,38,.05)}
.nav > a[aria-current="page"]{color:var(--purple-dark)}
.nav__actions{display:none}
.nav__item{position:static}       /* so the panel can span the whole island */
.nav__trigger{display:inline-flex;align-items:center;gap:6px}
.chev{width:11px;height:11px;opacity:.65;transition:transform .2s ease}
[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav__trigger[aria-expanded="true"]{color:var(--ink);background:rgba(13,21,38,.05)}

/* ---- panel colours -------------------------------------------------------
   Both panels are painted from these six properties rather than from literal
   colours, so the mobile block further down can flip the whole component to
   the light scheme by redefining them once. Every rule below reads a token;
   none hard-codes a colour that only works over one background. */
.mega,.drop{
  /* Below the whole band, not inside it. Measured across the area a panel
     covers, the hero runs about #160428 at the top left to #2b0e49 at the
     bottom right, and the first version of this gradient ran #260d40 to
     #1a0730 - lighter than the band at one corner, darker at the other, and
     crossing over it in between, so the edge dissolved wherever the two
     happened to meet. Both stops now sit under #160428, which keeps the panel
     reading as a hole punched in the band at every point along it.

     Kept as a gradient, but a shallow one: the band brightens down and to the
     right, so the panel darkens the same way and the gap between the two stays
     roughly even instead of closing at the bottom. */
  --panel-bg:linear-gradient(160deg,#110322,#08010f);
  /* At this end of the scale two near-blacks barely differ by contrast ratio,
     the same problem the top bar has - so the hairline, not the fill, is what
     actually draws the edge. Hence a brighter one than a panel on white would
     want. */
  --panel-edge:rgba(207,155,255,.34);
  --panel-title:#ffffff;
  --panel-desc:rgba(255,255,255,.64);
  --panel-hover:rgba(207,155,255,.10);
  --panel-rule:rgba(255,255,255,.13);
}

/* ---- mega panel ----
   Dark rather than white on purpose. The island is a white object floating on
   the hero's violet band, so a white panel under it is a second card stacked
   on the first; in the band's own colours it reads as pulled out of the
   trigger instead. The inset highlight is doing real work - without it the
   panel's top edge merges into the band behind it and the whole thing goes
   flat. */
.mega{
  position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:30;
  padding:14px;
  border:1px solid var(--panel-edge);
  border-radius:16px;
  background:var(--panel-bg);
  /* Deeper and wider than a panel on white needs. On a dark ground a shadow
     is not read as a shadow, it is read as the band losing its colour around
     the panel - which is most of what separates the two. */
  box-shadow:0 0 30px 3px rgba(3,0,10,.4),
             0 30px 70px rgba(3,0,10,.7),
             inset 0 1px 0 rgba(255,255,255,.09);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-mega.is-open .mega{opacity:1;visibility:visible;transform:translateY(0)}

/* The trigger darkens while its panel is open, which is what makes the two
   read as one object rather than a light button with a dark card below it.
   Desktop only: below the breakpoint the panel is an in-flow list on white,
   where a dark trigger above it would be a stray tab. The lighter open state
   further up stays in force there. */
@media (min-width:1081px){
  .nav__trigger[aria-expanded="true"]{background:var(--band-2);color:#fff}
  .nav__trigger[aria-expanded="true"] .chev{opacity:.9}
}

/* ---- split layout ----
   Two cards left, the offer right. The panel used to be narrowed to hide the
   empty half that two cards leave in a full-island panel; this fills it
   instead, and it is also the only place in the header that can carry a price.

   Still capped and centred rather than spanning the island: at the wrap's full
   1200px the panel is wider than any menu wants to be.

   Desktop only, for the same reason as the old two-card rule: below the
   breakpoint the panel is static and in flow, and a translate(-50%) on a
   static element drags it off the left edge of the nav. */
@media (min-width:1081px){
  .mega--split{
    left:50%;right:auto;
    width:min(880px,calc(100% - 24px));
    padding:0;                   /* the two columns carry their own padding */
    overflow:hidden;             /* so the aside's corners follow the radius */
    transform:translate(-50%,-8px);
  }
  .has-mega.is-open .mega--split{transform:translate(-50%,0)}
  .mega__in{display:grid;grid-template-columns:1.24fr .76fr}
  /* One column: the cards stack down the left rather than sitting side by
     side, which is what leaves the room for the aside. align-content keeps
     them together at the top - the grid is as tall as the aside beside it,
     and stretched rows pushed the two cards to opposite ends of it. */
  .mega--split .mega__grid{grid-template-columns:1fr;gap:2px;padding:12px;
                           align-content:start}
  /* and go horizontal, so the left column stays short enough that the aside
     does not have to stretch to meet it */
  .mega--split .mega__link{display:flex;align-items:flex-start;gap:13px;
                           padding:13px;border-radius:11px}
  .mega--split .mega__ico{width:36px;height:36px;margin-bottom:0}
}

/* ---- compact dropdown, for a short list with no artwork (About) ----
   Padding, radii, colours and type all match .mega, so the two panels read as
   one component at two widths. The difference is anchoring: the wide services
   panel spans the whole island via .nav__item{position:static}, while this one
   hangs off its own nav item, so that item has to become the containing
   block. */
.nav__item--drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 12px);left:50%;z-index:30;
  width:340px;
  padding:14px;
  border:1px solid var(--panel-edge);
  border-radius:16px;
  background:var(--panel-bg);
  /* Deeper and wider than a panel on white needs. On a dark ground a shadow
     is not read as a shadow, it is read as the band losing its colour around
     the panel - which is most of what separates the two. */
  box-shadow:0 0 30px 3px rgba(3,0,10,.4),
             0 30px 70px rgba(3,0,10,.7),
             inset 0 1px 0 rgba(255,255,255,.09);
  opacity:0;visibility:hidden;
  transform:translate(-50%,-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-mega.is-open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop__link{display:block;padding:14px 16px 16px;border-radius:12px;transition:background-color .15s ease}
.drop__link:hover{background:var(--panel-hover)}
.drop__link strong{
  display:block;
  font-family:var(--font-display);
  font-size:0.98rem;font-weight:700;letter-spacing:-.01em;color:var(--panel-title);
}
.drop__link span{display:block;margin-top:4px;font-size:0.87rem;line-height:1.5;color:var(--panel-desc)}

/* The wide panel hangs off .header__inner, so its 100% is the island itself.
   This one hangs off its own nav item, which is shorter than the island and
   would leave the panel sitting 12px too high, flush against the bar.
   Stretching the nav and the item to full island height makes 100% mean the
   same thing for both. Desktop only - below 1080px the nav is an in-flow
   accordion where stretching would break the layout. */
@media (min-width:1081px){
  .nav{align-self:stretch}
  .nav__item--drop{align-self:stretch;display:flex;align-items:center}
}

/* Four columns is the base, because that is what a full-island panel is for.
   The split rule above narrows it to one for this page's two services. */
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mega__link{display:block;padding:16px 16px 18px;border-radius:12px;transition:background-color .15s ease}
.mega__link:hover{background:var(--panel-hover)}
.mega__link[aria-current="page"]{background:rgba(207,155,255,.16)}
.mega__link[aria-current="page"] strong{color:var(--purple-lit)}
.mega__body{display:block;min-width:0}
/* A lilac wash with a visible edge, rather than the solid band colour the tile
   used to carry - on a dark panel that fill was the panel, and the tile
   disappeared into it. */
.mega__ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;margin-bottom:11px;
  border-radius:10px;
  background:rgba(207,155,255,.13);
  border:1px solid rgba(207,155,255,.28);
}
.mega__ico svg{width:22px;height:22px;fill:none;stroke:var(--purple-lit);stroke-width:1.7;
               stroke-linecap:round;stroke-linejoin:round}
.mega__link strong{
  display:block;
  font-family:var(--font-display);
  font-size:0.98rem;font-weight:700;letter-spacing:-.01em;color:var(--panel-title);
}
.mega__desc{display:block;margin-top:4px;font-size:0.87rem;line-height:1.5;color:var(--panel-desc)}

/* ---- the aside ----
   A step lighter than the panel rather than a new colour, so the two columns
   read as one surface folded rather than two cards side by side. It goes up
   rather than down because the panel is now close to black: another step
   darker would have been no step at all. It replaces the lilac "not sure
   which one?" strip that used to close the panel. */
.mega__aside{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:20px;
  border-left:1px solid var(--panel-rule);
  background:rgba(207,155,255,.055);
}
/* Two class names deep on purpose: it has to outrank .mega__aside p, which
   would otherwise win on specificity and set the title at body size. It was an
   <h3> until the SEO pass - a promo heading inside a nav panel is not a
   document heading, and this one sat before the page's <h1> in source. */
.mega__aside .mega__aside__title{
  margin:0;
  font-family:var(--font-display);
  font-size:1.06rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;
  color:var(--panel-title);
}
.mega__aside p{margin:0;font-size:0.86rem;line-height:1.55;color:var(--panel-desc)}
/* The price, lifted out of the sentence. It carries a data-price key, so the
   currency switcher rewrites it along with every other figure on the page. */
.mega__aside p b{color:#efe2ff}
.mega__list{
  margin:0;padding:12px 0 0;list-style:none;
  display:flex;flex-direction:column;gap:7px;
  border-top:1px solid var(--panel-rule);
  font-size:0.82rem;font-weight:600;color:#dcc9ee;
}
.mega__list li{display:flex;align-items:center;gap:8px}
.mega__list svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--purple-lit);
                stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* The site-wide focus ring is the brand purple, which measures about 2.3:1
   against a panel this dark - under the 3:1 a focus indicator has to reach.
   Inside the panels it becomes the lit lilac instead, which is 8.7:1 there.
   Desktop only: below the breakpoint the panels are back on white, where the
   purple ring is the correct one. */
@media (min-width:1081px){
  .mega :focus-visible,.drop :focus-visible{outline-color:var(--purple-lit)}
}

/* ---- hamburger ---- */
.toggle{display:none;margin-left:auto;padding:10px;border-radius:8px}
.toggle:hover{background:rgba(13,21,38,.05)}
.toggle__bars{display:block;width:22px}
.toggle__bars i{
  display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.toggle__bars i + i{margin-top:5px}
.toggle[aria-expanded="true"] .toggle__bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.toggle[aria-expanded="true"] .toggle__bars i:nth-child(2){opacity:0}
.toggle[aria-expanded="true"] .toggle__bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.actions{display:flex;align-items:center;gap:10px;flex:none}

/* Below 1080px the nav does not fit across the island, so it becomes a panel
   that drops out of the island and scrolls on its own. The mega panels flatten
   into plain in-flow lists inside it - a floating panel inside a floating
   panel is impossible to dismiss on a touch screen. */
@media (max-width:1080px){
  .toggle{display:block}
  .actions{display:none}
  /* Matches the white island above it, so the open panel reads as an extension
     of the header rather than a separate card. */
  .nav{
    display:none;
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    max-height:calc(100vh - 140px);overflow-y:auto;
    padding:12px;
    border:1px solid var(--line);border-radius:14px;
    background:#fff;
    box-shadow:0 24px 50px rgba(12,2,26,.22);
  }
  .nav.is-open{display:flex}
  .nav > a,.nav__link{width:100%;padding:12px 14px;text-align:left}
  .nav__trigger{justify-content:space-between}
  /* Back to the light scheme. Here both panels are in-flow lists inside the
     white nav sheet, where the dark treatment would be a black hole in the
     middle of it. Redefining the six properties does the whole component -
     every rule up there reads them, so none of it needs restating. */
  .mega,.drop{
    --panel-bg:none;
    --panel-edge:transparent;
    --panel-title:var(--ink);
    --panel-desc:var(--slate);
    --panel-hover:#faf7fd;
    --panel-rule:var(--line);
  }

  /* Both panel types flatten into plain in-flow lists. The compact dropdown
     has to be included here as well as the wide one: left with its desktop
     rules it would stay absolutely positioned and translate(-50%) would drag
     it half off the left edge of the nav. */
  .mega,.has-mega.is-open .mega,
  .drop,.has-mega.is-open .drop{
    position:static;
    width:auto;
    opacity:1;visibility:visible;transform:none;
    display:none;
    padding:4px 0 8px;border:0;box-shadow:none;
  }
  .has-mega.is-open .mega,
  .has-mega.is-open .drop{display:block}
  .mega__grid{grid-template-columns:1fr;gap:2px}
  .mega__ico{display:none}
  /* The aside sells; the accordion is for navigating. Its content is on the
     free-website page anyway, one tap further on. */
  .mega__aside{display:none}
  .drop__link{padding:12px 14px}
  .nav__actions{
    display:flex;flex-direction:column;gap:8px;
    margin-top:10px;padding-top:12px;
    border-top:1px solid var(--line);
  }
  .nav__actions .btn{width:100%}
}

/* =========================== HERO =========================== */
.hero{
  position:relative;
  /* 92px of floating header, then air. The air was 40px when the announcement
     pill opened the hero and carried its own height; with the headline first,
     56px is what keeps the same optical gap under the header island. */
  padding:148px 0 84px;
  color:#fff;
  background:linear-gradient(165deg,var(--band-1) 0%,var(--band-2) 42%,
                                    var(--band-3) 76%,var(--band-4) 100%);
  overflow:hidden;
}
.hero__inner{position:relative;z-index:1;text-align:center}

/* Side artwork. Decorative, so aria-hidden: it restates the headline rather
   than adding to it. Inline rather than <img> on purpose - an SVG loaded
   through <img> renders in its own context, where a prefers-reduced-motion
   query inside the file never sees the visitor's real setting, so the animated
   parts keep moving for people who asked them not to. Inline, this stylesheet
   governs both the motion and the opt-out.

   They sit in the gap beside the lede, not the headline, which runs nearly the
   full width of the wrap. Dropped below 1200px, where that gap closes. */
/* Dropped from 150px so the artwork sits beside the lede and the buttons rather
   than level with the headline, and scaled from its native 260px to 220px wide.

   The width matters more than it looks. Below roughly 1416px the max() below
   stops tracking the centre and pins the artwork to the viewport edge, so the
   gap between it and the 820px headline closes as the window narrows. At 260px
   wide that gap went negative at 1280px and the artwork sat under the words -
   which the old 1200px cutoff was too low to catch. At 220px the cutoff can sit
   at 1340px and still leave a 32px gutter at the narrowest width that shows it.

   height:auto keeps the viewBox ratio, so the artwork is 338px tall here.
   250 + 338 stays well clear of the bottom of the band, which matters because
   the hero clips anything past it. */
.hero__art{position:absolute;top:250px;z-index:0;pointer-events:none;width:220px;height:auto}
.hero__art--l{left:max(8px,calc(50% - 700px))}
.hero__art--r{right:max(8px,calc(50% - 700px))}
@media (max-width:1339px){.hero__art{display:none}}

.announce{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  max-width:100%;
  padding:7px 16px 7px 9px;
  border-radius:10px;
  /* see-through: a barely-there wash, not a solid fill */
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow:0 0 22px rgba(207,155,255,.18);
  font-size:0.93rem;font-weight:600;line-height:1.35;
  color:#dcc9ee;
  transition:box-shadow .2s ease;
}
.announce:hover{box-shadow:0 0 28px rgba(207,155,255,.34)}
.announce__badge{
  flex:none;padding:3px 9px;border-radius:7px;
  background:var(--purple);color:#ffffff;
  font-size:0.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
@media (max-width:560px){.announce__tail{display:none}}

/* Capped and centred rather than left to run the full 1200px wrap. At the old
   full width the headline reached into the columns the side artwork sits in and
   the two collided; holding it to 820px keeps a clear gutter either side, which
   is what fixes the overlap - moving the artwork down only adds to it. */
.hero h1{
  max-width:820px;
  /* No top margin: the headline is the hero's first element now, so the space
     above it is the hero's own padding. */
  margin:0 auto;
  font-family:var(--font-display);
  font-weight:700;                /* 700 is Familjen Grotesk's heaviest */
  font-size:clamp(2.25rem,5.6vw,4.6rem);
  line-height:1.08;
  letter-spacing:-.03em;
  color:#fff;
}
/* On a 320px phone - the narrowest still in real use - the clamp's 2.25rem
   floor leaves "business deserves." a few pixels short of fitting, and the
   forced breaks collapse into four ragged lines. Half a step down buys the
   room back. Held to 340px so 360px phones keep the full size. */
@media (max-width:340px){.hero h1{font-size:2rem}}
/* The lede sets its own line breaks rather than wrapping, so this width is not
   the measure - it only has to be wide enough that the longest line does not
   wrap and break the taper. The lines themselves stay inside the comfortable
   45-75ch measure, the longest being about 76 characters. */
.hero__lede{
  max-width:700px;
  margin:26px auto 0;
  font-size:1.1rem;line-height:1.6;
  color:rgba(255,255,255,.82);
}
/* The longest line renders at 595px, so the forced breaks hold until the
   content box drops below that - a viewport of roughly 635px. Cutting at 680
   leaves a little margin for a wider system font without giving up the taper
   on tablets. Below it the breaks all go and the lede wraps as an ordinary
   centred paragraph, since a forced break that itself wraps looks worse than
   no forced break at all. */
@media (max-width:680px){.hero__lede br{display:none}}
.hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}
/* A phone is 320-430px wide and two buttons side by side leave neither enough
   room, so they stack and go full width where a thumb expects them to. */
@media (max-width:520px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}

.hero__note{
  margin-top:16px;
  font-size:0.9rem;color:rgba(255,255,255,.6);
}

/* ---- proof row ---- */
.proof{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:0;
  max-width:820px;margin:48px auto 0;
  text-align:center;
}
.proof li{
  flex:1 1 200px;
  padding:6px 22px;
  border-left:1px solid rgba(255,255,255,.14);
}
.proof li:first-child{border-left:0}
@media (max-width:640px){
  .proof li{flex-basis:100%;padding:14px 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .proof li:first-child{border-top:0}
}
.proof__figure{
  display:block;
  font-family:var(--font-display);
  font-size:1.6rem;font-weight:700;letter-spacing:-.02em;
  color:var(--purple-lit);
}
.proof__label{display:block;margin-top:4px;font-size:0.88rem;color:rgba(255,255,255,.72)}

/* ---- trust strip ---- */
.trust{margin-top:52px}
.trust__label{
  font-size:0.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.trust__row{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  margin-top:16px;
}
.trust__row li{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  font-size:0.9rem;font-weight:600;color:rgba(255,255,255,.86);
}
.trust__row svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--purple-lit);
                stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ======================= SECTION HEADS ======================= */
.sechead{max-width:760px;margin:0 0 44px}
.sechead--mid{margin-left:auto;margin-right:auto;text-align:center}
/* .h2 carries the section-heading type on its own, for the headings that sit
   in a two-column block rather than inside a .sechead - the catch section and
   the apply form both need the type without the centred wrapper. */
.sechead h2,.h2{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,3.6vw,2.85rem);
  font-weight:700;line-height:1.14;letter-spacing:-.025em;
}
.sechead p{margin-top:14px;font-size:1.06rem;color:var(--slate)}
.eyebrow{
  display:inline-block;margin-bottom:14px;
  padding:4px 10px;border-radius:6px;
  background:var(--lilac);color:var(--purple-dark);
  font-size:0.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* ========================= THE CATCH =========================
   The single most important section on the page. Every visitor arrives asking
   what the catch is, and the competitors bury the answer - so this one leads
   with it, in the plainest words available, before asking for anything. */
.catch{padding:88px 0;background:#fff}
.catch__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){.catch__inner{grid-template-columns:1fr;gap:36px}}
.catch__copy p{margin-top:16px;font-size:1.05rem;color:var(--slate)}
.catch__copy p strong{color:var(--ink)}
.catch__list{margin-top:26px;display:grid;gap:12px}
.catch__list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:1rem;color:var(--ink);
}
.catch__list svg{
  width:21px;height:21px;flex:none;margin-top:2px;
  fill:none;stroke:var(--purple-dark);stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;
}
/* The maths panel. Deliberately looks like a receipt, because that is the
   argument: here is what this normally costs, here is what it costs here. */
.ledger{
  padding:30px 32px;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,#fdfbff 0%,var(--lilac) 100%);
}
.ledger h3{
  font-family:var(--font-display);
  font-size:1.15rem;font-weight:700;letter-spacing:-.01em;
}
.ledger__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 0;
  border-bottom:1px dashed rgba(13,21,38,.14);
  font-size:0.98rem;
}
.ledger__row span{color:var(--slate)}
.ledger__row b{font-variant-numeric:tabular-nums;font-weight:600}
.ledger__row--total{
  border-bottom:0;padding-bottom:0;
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;
}
.ledger__row--total b{color:var(--purple-dark);font-size:1.6rem}
.ledger__foot{margin-top:18px;font-size:0.88rem;line-height:1.55;color:var(--slate)}

/* ========================== STEPS ========================== */
.steps{padding:88px 0;background:linear-gradient(180deg,#faf7fd 0%,#fff 100%)}
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
             background:var(--line);border:1px solid var(--line);
             border-radius:14px;overflow:hidden}
@media (max-width:980px){.steps__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps__grid{grid-template-columns:1fr}}
.step{
  display:flex;flex-direction:column;
  padding:30px 26px 28px;
  background:#fff;
  transition:background-color .16s ease;
}
.step:hover{background:#fdfbff}
.step__n{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-bottom:16px;
  border-radius:10px;
  background:var(--lilac);color:var(--purple-dark);
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;
}
.step h3{font-family:var(--font-display);font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.step p{margin-top:9px;font-size:0.96rem;color:var(--slate)}
.step__when{
  margin-top:auto;padding-top:18px;
  font-size:0.83rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--purple-dark);
}

/* ========================= INCLUDED ========================= */
.included{padding:88px 0;background:#fff}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 56px}
@media (max-width:800px){.incl{grid-template-columns:1fr;gap:28px}}
.incl__item{display:flex;gap:16px;align-items:flex-start}
.incl__ico{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;
  border-radius:11px;background:var(--lilac);
}
.incl__ico svg{
  width:21px;height:21px;
  fill:none;stroke:var(--purple-dark);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.incl__item h3{font-family:var(--font-display);font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.incl__item p{margin-top:7px;font-size:0.96rem;color:var(--slate)}

/* ======================== COMPARISON ========================
   Scrolls inside its own container below 760px rather than letting the page
   scroll sideways - a horizontally scrolling body breaks every other section. */
.compare{padding:88px 0;background:linear-gradient(180deg,#fff 0%,#faf7fd 100%)}
.compare__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.compare table{min-width:660px}
.compare th,.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{
  font-family:var(--font-display);font-size:0.98rem;font-weight:700;
  background:#fdfbff;
}
/* The column that is us. Tinted the whole way down so the eye tracks it
   without needing a heavier border on every cell. */
.compare .col-us{background:var(--lilac)}
.compare thead .col-us{background:var(--lilac-2);color:var(--purple-dark)}
.compare tbody th{font-weight:600;font-size:0.96rem}
.compare td{font-size:0.95rem;color:var(--slate)}
.compare td.col-us{color:var(--ink);font-weight:600}
.compare .yes,.compare .no{display:inline-flex;align-items:center;gap:8px}
.compare .yes svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--purple-dark);
                  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.compare .no svg{width:17px;height:17px;flex:none;fill:none;stroke:#9aa5b4;
                 stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.compare__note{margin-top:16px;font-size:0.87rem;color:var(--slate)}

/* ========================== PRICING ==========================
   NO MARKUP USES THIS. The pricing section was taken off the homepage, and
   these rules are kept the way .announce and .topbar__login are kept: the
   block is finished, and rebuilding it from scratch for a pricing page later
   would be wasted work. The plan card wants .plan > .plan__flag, h3,
   .plan__price with .plan__amount and .plan__per, .plan__sub, .plan__list,
   .plan__cta and .plan__foot.

   Where prices still appear on the homepage, every figure is written by app.js
   from a single table, so changing one is one edit in one file. */
.pricing{padding:88px 0;background:#faf7fd}
.plan{
  position:relative;
  max-width:560px;margin:0 auto;
  padding:38px 38px 34px;
  border:1px solid var(--line);border-radius:18px;
  background:#fff;
  box-shadow:0 18px 44px rgba(4,12,22,.07);
  text-align:center;
}
.plan__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:5px 14px;border-radius:999px;
  background:var(--purple-btn);color:#fff;
  font-size:0.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;
}
.plan h3{font-family:var(--font-display);font-size:1.3rem;font-weight:700}
.plan__price{
  display:flex;align-items:baseline;justify-content:center;gap:6px;
  margin-top:14px;
}
.plan__amount{
  font-family:var(--font-display);
  font-size:clamp(3rem,7vw,3.9rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;
}
.plan__per{font-size:1.02rem;font-weight:600;color:var(--slate)}
.plan__sub{margin-top:10px;font-size:0.97rem;color:var(--slate)}
.plan__list{margin:26px 0 0;display:grid;gap:11px;text-align:left}
.plan__list li{display:flex;align-items:flex-start;gap:11px;font-size:0.98rem}
.plan__list svg{width:19px;height:19px;flex:none;margin-top:3px;
                fill:none;stroke:var(--purple-dark);stroke-width:2.4;
                stroke-linecap:round;stroke-linejoin:round}
.plan__cta{margin-top:28px}
.plan__cta .btn{width:100%}
.plan__foot{margin-top:14px;font-size:0.87rem;color:var(--slate)}
@media (max-width:560px){.plan{padding:34px 22px 30px}}

/* ========================== EXAMPLES ========================== */
/* The hairline is doing real work: the cards section above this one is also
   white, and two card grids running together with nothing between them read
   as one very long section. */
.examples{padding:88px 0;background:#fff;border-top:1px solid var(--line)}
.exs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.exs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.exs{grid-template-columns:1fr}}
.ex{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;
  background:#fff;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.ex:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(4,12,22,.10)}
.ex__media{
  display:block;aspect-ratio:16/10;
  background:linear-gradient(150deg,var(--band-2),var(--band-4));
}
.ex__media svg{display:block;width:100%;height:100%}
.ex__body{padding:20px 22px 22px}
.ex__body h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700}
.ex__body p{margin-top:6px;font-size:0.93rem;color:var(--slate)}

/* ============================ FAQ ============================
   Native <details>, so every answer is in the DOM for a crawler and the whole
   section works with JavaScript switched off. */
.faq{padding:88px 0;background:#faf7fd}
.faq__list{max-width:840px;margin:0 auto;display:grid;gap:12px}
.qa{
  border:1px solid var(--line);border-radius:12px;
  background:#fff;overflow:hidden;
}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:19px 22px;
  cursor:pointer;list-style:none;
  font-family:var(--font-display);
  font-size:1.03rem;font-weight:700;letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--purple-dark)}
.qa__chev{width:16px;height:16px;flex:none;opacity:.6;transition:transform .2s ease;
          fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qa[open] .qa__chev{transform:rotate(180deg)}
.qa__a{padding:0 22px 20px;font-size:0.98rem;color:var(--slate)}
.qa__a p + p{margin-top:12px}

/* =========================== APPLY ===========================
   The conversion point, and the only dark section below the hero. That is the
   whole reason it is dark: after six white and lilac sections the page has gone
   quiet, and dropping back to the hero's band makes the form read as the end
   of the argument rather than as one more block. */
.apply{
  padding:88px 0;
  color:#fff;
  background:linear-gradient(160deg,var(--band-1) 0%,var(--band-2) 48%,var(--band-3) 100%);
}
.apply__inner{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start}
@media (max-width:900px){.apply__inner{grid-template-columns:1fr;gap:38px}}
/* The lilac eyebrow is a light-background component; on the band it inverts. */
.eyebrow--dark{background:rgba(207,155,255,.16);color:var(--purple-lit)}
.apply__copy p{margin-top:16px;font-size:1.05rem;color:rgba(255,255,255,.78)}
.apply__points{margin-top:26px;display:grid;gap:12px}
.apply__points li{display:flex;align-items:flex-start;gap:12px;font-size:0.98rem;color:rgba(255,255,255,.9)}
.apply__points svg{
  width:20px;height:20px;flex:none;margin-top:2px;
  fill:none;stroke:var(--purple-lit);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- the form ----
   Two columns on desktop so the short fields pair up; one column below 560px,
   where a half-width input is too narrow to type a real email address into. */
.form{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:32px;
  border:1px solid rgba(255,255,255,.14);border-radius:18px;
  background:rgba(255,255,255,.05);
}
@media (max-width:560px){.form{grid-template-columns:1fr;padding:24px 20px}}
.field{grid-column:1 / -1;display:flex;flex-direction:column;gap:7px}
.field--half{grid-column:auto}
@media (max-width:560px){.field--half{grid-column:1 / -1}}
.field label{font-size:0.9rem;font-weight:600;color:rgba(255,255,255,.86)}
/* The asterisk marking a required field. It is aria-hidden in the markup, so
   this is purely the visual cue; the real signal is the required attribute. */
.field label span{color:var(--purple-lit)}
.field input,.field select,.field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.20);border-radius:9px;
  background:rgba(4,12,22,.35);
  color:#fff;font:inherit;font-size:0.97rem;
  transition:border-color .16s ease,background-color .16s ease;
}
.field textarea{resize:vertical;min-height:110px}
/* A placeholder at full white reads as a filled-in answer. Held well back so
   it is clearly a prompt, but still above the 4.5:1 that makes it legible. */
.field ::placeholder{color:rgba(255,255,255,.5)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,255,255,.34)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--purple-lit);
  background:rgba(4,12,22,.55);
  box-shadow:0 0 0 3px rgba(207,155,255,.22);
}
/* The select's own dropdown list is drawn by the operating system in its own
   colours, so the options need an explicit dark pair or they render as white
   text on white on Windows. */
.field select option{background:#331154;color:#fff}

/* Marked by app.js after a failed submit, not by :invalid - :invalid matches
   every empty required field the moment the page loads, so the form would
   greet a first-time visitor covered in red. */
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:#ff8a7a;
  box-shadow:0 0 0 3px rgba(255,138,122,.20);
}
.field__err{font-size:0.85rem;color:#ffb3a8}

.field--check{flex-direction:row;align-items:flex-start;gap:11px}
.field--check input{width:19px;height:19px;flex:none;margin-top:2px;padding:0;accent-color:var(--purple)}
.field--check label{font-size:0.92rem;font-weight:400;color:rgba(255,255,255,.78)}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   anything hidden outright but will happily fill a field they can "see". */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__submit{grid-column:1 / -1;width:100%;margin-top:4px}
.form__note{grid-column:1 / -1;font-size:0.86rem;color:rgba(255,255,255,.55);text-align:center}
/* Empty until app.js writes to it, so it must not reserve space when silent. */
.form__msg{grid-column:1 / -1;font-size:0.94rem;font-weight:600}
.form__msg:empty{display:none}
.form__msg--ok{color:var(--purple-lit)}
.form__msg--bad{color:#ffb3a8}

/* ============================ CTA ============================
   The closing call, sitting between the last body section and the footer. It
   is a dark panel on white rather than a full dark band, so it reads as one
   last thing to do rather than as the start of the footer.

   The top padding is carrying the whole gap at the moment, because the hero is
   the only thing above it. Once real sections sit in between, each already
   ending in 88px of its own padding, drop this to 0 or the gap doubles. */
/* ======================= PAGE HEAD =======================
   The hero band cut down for inside pages. The header island is white and
   floats, so every page needs something dark under it or the island lands on
   white and loses its own edges. Same padding logic as the hero: 92px of
   floating header, then air. */
.phead{
  padding:140px 0 56px;
  color:#fff;
  background:linear-gradient(165deg,var(--band-1) 0%,var(--band-2) 52%,
                                    var(--band-3) 100%);
}
.phead h1{
  max-width:20ch;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.4rem);
  line-height:1.06;letter-spacing:-.03em;
  text-wrap:balance;
}
.phead__lede{margin-top:16px;max-width:60ch;font-size:1.05rem;line-height:1.6;
             color:rgba(255,255,255,.78)}
/* The date is a fact about the document, not part of the pitch, so it sits
   below the lede at label size rather than beside the heading. */
.phead__meta{
  margin-top:20px;
  font-size:0.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ========================== LEGAL ==========================
   List on the left, both documents on the right. One page rather than two,
   because somebody checking the cancellation clause should not first have to
   work out which of two documents it lives in. */
.legal{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:60px;
  padding-top:56px;padding-bottom:80px;
}
.legal__nav{position:sticky;top:110px;align-self:start}
.legal__navtitle{
  font-family:var(--font-display);
  font-size:0.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);
}
.legal__nav ul{margin-top:12px;display:grid;gap:2px}
.legal__nav ul a{
  display:block;padding:9px 12px;border-radius:9px;
  font-size:0.95rem;font-weight:600;color:var(--ink);
  transition:background-color .15s ease,color .15s ease;
}
.legal__nav ul a:hover{background:var(--lilac);color:var(--purple-dark)}
.legal__ask{
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:0.88rem;line-height:1.55;color:var(--slate);
}
.legal__ask a{color:var(--purple-dark);font-weight:600;
              text-decoration:underline;text-underline-offset:3px}

/* 68ch, not the column width. The right column is wide enough to take the
   whole grid track, and legal text at full width is the exact thing nobody
   reads. */
.legal__doc{max-width:68ch}
.legal__part + .legal__part{
  margin-top:56px;padding-top:48px;border-top:1px solid var(--line);
}
.legal__part h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;letter-spacing:-.025em;
  color:var(--ink);
}
.legal__intro{
  margin-top:12px;padding:16px 18px;
  border-radius:12px;background:var(--lilac);
  font-size:0.97rem;line-height:1.6;color:var(--purple-dark);
}
.legal__part h3{
  margin-top:34px;
  font-family:var(--font-display);
  font-size:1.06rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.legal__part p{margin-top:10px;font-size:0.97rem;line-height:1.72;color:var(--slate)}
.legal__part a{color:var(--purple-dark);font-weight:600;
               text-decoration:underline;text-underline-offset:3px}
.legal__part code{
  padding:2px 6px;border-radius:5px;
  background:var(--lilac);color:var(--purple-dark);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.88em;
}

/* Below 900px the sidebar stops being a sidebar. Sticky would eat a third of
   a phone screen for two links, so it becomes a plain pair of links above the
   text and the offer of help drops off - it is repeated in the footer. */
@media (max-width:900px){
  .phead{padding:126px 0 40px}
  .legal{grid-template-columns:1fr;gap:28px;padding-top:36px;padding-bottom:56px}
  .legal__nav{position:static}
  .legal__nav ul{grid-auto-flow:column;justify-content:start;gap:8px}
  .legal__nav ul a{background:var(--lilac);color:var(--purple-dark)}
  .legal__ask{display:none}
  .legal__part + .legal__part{margin-top:40px;padding-top:34px}
}

/* ========================== STATS ==========================
   Sits directly under the hero, where the dark band stops. White is the
   quietest possible floor for a band that loud, and it lets the figures carry
   the brand purple without competing with the gradient behind them.

   The dividers are borders on the columns themselves rather than filled gaps,
   so they turn into rules between stacked rows at the breakpoint instead of
   having to be removed and rebuilt. */
.stats{padding:56px 0;background:#fff;border-bottom:1px solid var(--line)}
/* Wider than the 1200px content wrap, matching the CTA panel near the footer
   so the two full-width bands on the page line up with each other rather than
   each picking their own edge. */
.stats .wrap{max-width:1380px}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:4px 34px}
.stat + .stat{border-left:1px solid var(--line)}
.stat:first-child{padding-left:0}
.stat:last-child{padding-right:0}
.stat__fig{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.3rem,4.2vw,3.3rem);
  line-height:1;
  letter-spacing:-.035em;
  /* Tabular figures: the three numbers are read as a set, and proportional
     digits set them at three visibly different weights on the page. */
  font-variant-numeric:tabular-nums;
  /* The fallback, and the colour anywhere the gradient below cannot paint.
     --purple-dark rather than --purple: at this size the flat brand purple
     went candy-bright against the white, which is what the gradient is here
     to fix in the first place. */
  color:var(--purple-dark);
}
/* The figures ramp from the hero band's last stop into the brand purple, so
   the numbers read as the band continuing past the fold rather than as a new
   colour introduced on white. Both ends are dark enough to hold at this
   weight - #3d1463 is 12.4:1 on white and #7500ca is 8.05:1 - so no part of
   the ramp is a light-purple-on-white legibility problem.

   Behind @supports because the fallback has to survive: without the guard a
   browser that cannot clip a background to text still applies
   color:transparent and the number vanishes. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat__fig{
    background-image:linear-gradient(96deg,#3d1463 0%,#7500ca 72%);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
/* In a forced-colours mode the gradient is dropped and transparent text would
   leave nothing at all, so the figures go back to the system's own text
   colour. */
@media (forced-colors:active){
  .stat__fig{
    background-image:none;
    color:CanvasText;
    -webkit-text-fill-color:currentColor;
  }
}
/* The plus is not part of the number. At full size it sat on the baseline
   like an operator and pulled the figure off centre in its column. */
.stat__fig span{font-size:.6em;vertical-align:.16em;margin-left:.03em}
.stat__label{
  margin-top:11px;
  font-family:var(--font-display);
  font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
/* text-wrap:pretty rather than balance: these run to four lines, where
   balance evens the lines out and leaves a ragged block, while pretty only
   pulls back the last-line orphan - which is the one thing that actually
   looked wrong here. */
.stat__note{
  margin-top:6px;
  /* No cap of its own: at this width the column is the measure, and holding
     the text narrower than the column left an obvious empty channel down the
     right of each one. About 50 characters a line, inside the comfortable
     range. */
  font-size:0.92rem;line-height:1.6;color:var(--slate);
  text-wrap:pretty;
}

/* One column below 860px. Three figures this size need about 280px each to
   keep their label on one line, and the middle column is the first to break. */
@media (max-width:860px){
  .stats{padding:38px 0}
  .stats__grid{grid-template-columns:1fr;gap:0}
  .stat{padding:20px 0}
  .stat:first-child{padding-top:0}
  .stat:last-child{padding-bottom:0}
  .stat + .stat{border-left:0;border-top:1px solid var(--line)}
}

/* ====================== WHAT YOU GET ======================
   Six cards, three across. The wrap matches the stats band and the CTA panel
   rather than the 1200px content wrap, so the three full-width blocks on the
   page share one pair of edges instead of stepping in and out. */
.feats{padding:76px 0;background:#fff}
.feats .wrap{max-width:1380px}
/* A px cap, not a ch one: ch resolves against this element's own 16px
   font, not the 2.9rem heading inside it, so 48ch here was about 380px and
   broke the heading over three lines. */
.feats__head{max-width:720px;margin:0 auto;text-align:center}
.feats__head h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
.feats__head p{margin-top:12px;font-size:1.05rem;color:var(--slate)}

.feats__grid{
  margin-top:44px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
/* Hairline card rather than a floating white one: the section is already
   white, so a shadow here would be an object casting onto its own colour.
   The border does the separating and the hover does the lifting. */
.feat{
  padding:26px 26px 28px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.feat:hover{
  border-color:rgba(117,0,202,.28);
  box-shadow:0 10px 26px rgba(30,4,58,.08);
  transform:translateY(-2px);
}
/* The mega panel's icon tile inverted for a white surface: there the tile is
   dark with a lilac stroke, here it is lilac with the brand purple, which
   keeps one icon treatment across the site rather than two. */
.feat__ico{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;
  border-radius:13px;
  background:var(--lilac);
}
.feat__ico svg{
  width:26px;height:26px;
  fill:none;stroke:var(--purple);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.feat h3{
  margin-top:18px;
  font-family:var(--font-display);
  font-size:1.12rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);
}
.feat p{margin-top:8px;font-size:0.94rem;line-height:1.65;color:var(--slate);
        text-wrap:pretty}

/* Two across, then one. Three cards need about 320px each before the headings
   start breaking onto three lines. */
@media (max-width:1080px){.feats__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){
  .feats{padding:52px 0}
  .feats__grid{margin-top:32px;grid-template-columns:1fr;gap:14px}
  .feat{padding:22px}
}

/* ====================== REASSURANCE ======================
   The lilac wash rather than another white block. It is the same tint the
   soft buttons and the legal intro use, so it reads as the site's own quiet
   surface, and it separates this from the white card grid above without
   introducing a second dark band so close to the footer. */
.guide{padding:72px 0;background:var(--lilac)}
.guide .wrap{max-width:1380px}
.guide__grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px;align-items:start}
.guide__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.75rem);
  line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);
}
/* --purple-dark, not the --purple-lit the dark bands use: on lilac the lifted
   purple is 1.9:1 and effectively invisible, while this is 9.2:1. */
.guide__title em{color:var(--purple-dark)}
.guide__body{display:flex;flex-direction:column;gap:16px;max-width:60ch}
.guide__body p{font-size:1.02rem;line-height:1.7;color:var(--slate);text-wrap:pretty}

/* The heading's forced break only works while it has a column to itself. In
   one column it would leave a short orphan line, so it wraps naturally. */
@media (max-width:900px){
  .guide{padding:52px 0}
  .guide__grid{grid-template-columns:1fr;gap:20px}
  .guide__title br{display:none}
}

/* =========================== CTA =========================== */
.cta{padding:80px 0;background:#fff}
/* Wider than the 1200px content wrap, matching the nav island instead. The
   extra width is what keeps the panel short: at 1200 the headline needed three
   lines and the panel stood over 220px tall, and trimming the padding alone
   could not fix that. With this the headline sits on two lines and the panel
   is about a third shorter. */
.cta .wrap{max-width:1380px}
.cta__panel{
  position:relative;overflow:hidden;   /* keeps the corner glow inside the radius */
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  /* Safety net. If the headline ever cannot fit beside the buttons, the buttons
     drop to their own row and the headline keeps its width, instead of being
     squeezed into an extra line and making the panel taller. */
  flex-wrap:wrap;
  padding:30px 40px;
  border-radius:18px;
  background:linear-gradient(150deg,var(--band-4) 0%,var(--band-2) 58%,var(--band-1) 100%);
  color:#fff;
}
.cta__panel h2{
  position:relative;z-index:1;
  flex:1 1 440px;
  font-family:var(--font-display);
  /* 2.3vw, not the 2.6 this started at. The buttons beside it are a fixed ~443px
     whatever the window does, so as the viewport narrows they take a steadily
     larger share and the headline's column shrinks faster than the viewport.
     At 2.6vw the text needed its column to within 1-2px between 1100 and 1180
     and tipped into a third line; 2.3 leaves roughly 65px of slack there, which
     is enough that a different button label or font fallback will not break it. */
  font-size:clamp(1.5rem,2.3vw,2.2rem);font-weight:700;
  line-height:1.16;letter-spacing:-.02em;
}
.cta__actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}

/* This panel had three thin horizontal light streaks across it, borrowed from
   the hero artwork. They ran the full width and passed straight behind the
   headline, so in the gaps between words they read as scan lines rather than
   decoration. A glow in the corner behind the buttons does the same job of
   stopping the panel being flat, without crossing any text.
   Sized in px rather than % so it stays a circle as the panel changes shape. */
.cta__panel::after{
  content:"";
  position:absolute;z-index:0;
  right:-140px;bottom:-180px;
  width:460px;height:460px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(207,155,255,.20),transparent 70%);
  pointer-events:none;
}
/* Stacks at 1080 rather than 860. Between those two widths the buttons still
   claimed their full width beside the headline, leaving it a narrow column that
   broke into four lines - taller than the stacked version it was avoiding. */
@media (max-width:1080px){
  .cta__panel{flex-direction:column;align-items:flex-start;padding:28px 24px;gap:24px}
  /* The flex-basis above is a WIDTH only while the panel is a row. Once it
     turns into a column that same 440px becomes a HEIGHT, and the heading
     inflates to 440px tall, taking the panel to 571px. Reset it here. */
  .cta__panel h2{flex:0 0 auto;width:100%}
  .cta__actions{width:100%}
  .cta__actions .btn{flex:1 1 auto}
}

/* =========================== FOOTER =========================== */
.foot{
  padding:72px 0 30px;
  background:linear-gradient(165deg,var(--band-3) 0%,var(--band-2) 46%,var(--band-1) 100%);
  color:#fff;
}
.foot__top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:900px){.foot__top{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:520px){.foot__top{grid-template-columns:1fr}}
.foot__brand .logo{padding:0}
.foot__brand .logo img{height:34px}
.foot__brand p{margin-top:16px;max-width:34ch;font-size:0.94rem;color:rgba(255,255,255,.66)}
.foot__col h3{
  font-family:var(--font-display);
  font-size:0.86rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.foot__col ul{margin-top:14px;display:grid;gap:9px}
.foot__col a{font-size:0.95rem;color:rgba(255,255,255,.82);transition:color .15s ease}
.foot__col a:hover{color:var(--purple-lit)}
/* Social links: mark then label, stacked. The mark is set in currentColor so
   it picks up the same hover as the text beside it instead of needing its own
   rule, and it is sized to the cap height of the label rather than the line
   box, so the two sit on the same optical line. */
.foot__social a{display:inline-flex;align-items:center;gap:10px}
.foot__social svg{
  width:15px;height:15px;flex:none;
  fill:currentColor;
  /* the glyphs are drawn on their own baselines and ride high next to text */
  transform:translateY(-1px);
}
.foot__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:24px;
  font-size:0.86rem;color:rgba(255,255,255,.55);
}
.foot__bar a{text-decoration:underline}
.foot__bar a:hover{color:var(--purple-lit)}

/* ========================== MOTION ==========================
   Two animations run on this page: the sweep along the hero trace and the
   pulse on the "live" dot. Both are decoration. Anyone who has asked their
   system for less motion gets the artwork in its resting state instead. */
.sweep{
  stroke-dasharray:22 78;
  animation:sweep 3.2s linear infinite;
}
@keyframes sweep{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.ping{animation:ping 2.4s ease-out infinite;transform-origin:center}
@keyframes ping{
  0%{transform:scale(.55);opacity:.9}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}

/* Sections fade up as they arrive. app.js adds .is-in; with no JavaScript the
   :not(.reveal) default below never applies and everything is simply visible. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
}