/* Flinter · the header (src/components/home/Nav.astro), on every page, on top of home.css, whose tokens, .brand, .mk,
   .btn and .li it uses. Behaviour: public/assets/js/nav.js. No orange and no gradients: the logo is flat ink, white
   over the dark sections, and the menus are white and grey.

   The bar, after Vercel's: full width, the logo on the left, the menus in the middle, the buttons on the right; clear inside the home
   hero's dark island at the top, white glass once you scroll, dark glass over the dark sections. The links are grey
   and regular; the buttons are small with 6px corners, Contact white with a hairline and Join the waitlist black. The
   menus open under their buttons on one white ground that moves and changes size as you go from one to the next. */

.hd { --hd-ink: var(--ink); --hd-link: #5A5A62; --hd-soft: var(--soft); --hd-hover: rgba(17, 17, 19, .05);
  --hd-wash: rgba(17, 17, 19, .045); --hd-plate: #F4F4F5;
  position: fixed; z-index: 30; inset: 0 0 auto; }

/* ───────── The bar ───────── */
.hd-bar {
  background: rgba(255, 255, 255, 0); box-shadow: 0 1px 0 rgba(17, 17, 19, 0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color .3s, box-shadow .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s, translate .4s var(--ease);
}
.hd.is-scrolled .hd-bar, .hd.is-sheet .hd-bar {
  background: rgba(255, 255, 255, .86); box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
}
/* Three columns: the logo, the menus, the buttons. The menus are centred in the space between the logo and the buttons,
   not on the page: the buttons are about twice as wide as the logo, so on the page's centre line the menus sat closer
   to them and looked off to the right. Now the gap on either side is the same. */
.hd-shell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; max-width: 1232px; height: 64px; margin: 0 auto; padding: 0 16px; }
.hd-start { grid-column: 1; justify-self: start; display: flex; align-items: center; min-width: 0; }
/* The logo in one flat ink: the mark's fill follows the wordmark's colour instead of the orange gradient. Its eyes are
   holes in the path, so they still show the ground through them. */
/* Lifted 2px: the mark's weight sits in its body below the thin top stem, and the wordmark's letters sit low in their
   box (18 of its 87 units are empty space above them), so centred boxes read low against the menu text. */
.hd .brand { --s: 22px; color: var(--hd-ink); transition: color .3s; translate: 0 -2px; }
.hd .brand .mk { color: inherit; }
.hd .brand .mk path { fill: currentColor; }

.hd-links { grid-column: 2; justify-self: center; position: relative; display: flex; align-items: center; gap: 2px; }
.hd-item { display: contents; }
.hd-link {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px 0 12px; border-radius: 999px;
  font: 400 14px/1 var(--sans); letter-spacing: -.005em; color: var(--hd-link); transition: color .15s;
}
.hd-link:hover, .hd-link[aria-expanded="true"], .hd-link[aria-current="page"] { color: var(--hd-ink); }
.hd-plain { padding: 0 12px; text-decoration: none; }
.hd-link .li { --s: 12px; --sw: 1.8; color: currentColor; opacity: .8; transition: rotate .3s var(--ease), opacity .15s; }
.hd-link:hover .li, .hd-link[aria-expanded="true"] .li { opacity: 1; }
.hd-link[aria-expanded="true"] .li { rotate: 180deg; }
.hd-glide { position: absolute; top: calc(50% - 16px); left: 0; width: 0; height: 32px; border-radius: 999px; background: var(--hd-hover); opacity: 0; pointer-events: none; transition: translate .4s var(--ease), width .4s var(--ease), opacity .2s; }

/* The buttons: 32px high with 6px corners, the label in medium weight. */
.hd-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.hd-btn, .hd .nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px;
  font: 500 14px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
  transition: background-color .15s, color .3s, box-shadow .3s;
}
.hd-btn-line { color: var(--hd-ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .09); }
.hd-btn-line:hover, .hd-btn-line[aria-current="page"] { background: #F4F4F5; }
/* No arrow on the black button; once you've joined, its check shows. */
.hd .nav-cta .li { display: none; --s: 14px; --sw: 2; }
.is-joined .hd .nav-cta .li { display: inline-block; }

/* Over a dark section (the early-access island, the footer) the bar turns to dark glass, the logo and Contact to white
   on a white hairline, and the black button to white. */
.hd.is-dark { --hd-ink: #F5F5F7; --hd-link: rgba(245, 245, 247, .66); --hd-hover: rgba(255, 255, 255, .09); }
.hd.is-dark .hd-bar { background: rgba(11, 11, 12, .96); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hd.is-dark .hd-btn-line { background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.hd.is-dark .hd-btn-line:hover, .hd.is-dark .hd-btn-line[aria-current="page"] { background: rgba(255, 255, 255, .08); }
.hd.is-dark .nav-cta { color: var(--ink); background: #fff; }
.hd.is-dark .nav-cta:hover { background: #E9E9EC; }
/* At the top of the home page the bar sits inside the hero's dark island: light inks, no ground of its own, and moved
   down by the island's inset (12px, 8px on phones) so it keeps clear of the island's top edge. Scrolling, it slides
   back up as it turns to dark glass. */
.hd.is-dark:not(.is-scrolled) .hd-bar { translate: 0 12px; }
.hd.is-dark:not(.is-scrolled):not(.is-sheet) .hd-bar { background: rgba(11, 11, 12, 0); box-shadow: 0 1px 0 rgba(255, 255, 255, 0); }
.hd.is-dark .hd-burger { color: #F5F5F7; background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.hd.is-dark .hd-burger:hover { background: rgba(255, 255, 255, .08); }

/* ───────── The menus ───────── */
/* One white ground (.hd-pop) under the open menu, placed by nav.js on the page's centre line (--x) and sized to it.
   Moving to the next button slides and resizes it while the links blur out and in on top. An invisible strip above
   each menu bridges the gap to its button. */
.hd-pop, .hd-menu { position: absolute; top: calc(100% + 10px); left: 0; translate: var(--x, 0) 0; }
.hd-pop {
  z-index: 0; width: 0; height: 0; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px -1px rgba(0, 0, 0, .06), 0 4px 10px -2px rgba(17, 17, 19, .05);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .14s, transform .14s, translate .4s var(--ease), width .4s var(--ease), height .4s var(--ease);
}
.hd-pop.is-open { opacity: 1; transform: none; transition: opacity .22s var(--ease), transform .3s var(--ease), translate .4s var(--ease), width .4s var(--ease), height .4s var(--ease); }
.hd-pop.is-snap { transition-property: opacity, transform; }
.hd-menu {
  z-index: 2; padding: 8px; opacity: 0; filter: blur(4px); transform: translateY(-4px); visibility: hidden; pointer-events: none;
  transition: opacity .12s, filter .12s, transform .12s, visibility 0s .12s;
}
.hd-menu.is-on {
  opacity: 1; filter: none; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .28s var(--ease) .05s, filter .28s var(--ease) .05s, transform .32s var(--ease) .05s, visibility 0s;
}
.hd-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
/* One spacing for every menu. Columns are 300px with 8px between them, plain or on a grey plate alike. Each column has
   12px above its label and 4px round its list, and labels and items start 8px in, so every label, icon and name sits
   20px in from the menu's edge and every pill 12px in. Every list has 4px between its rows. */
.hd-menu ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hd-label { margin: 0 0 6px; padding: 0 8px; font: 500 12px/1 var(--sans); color: var(--mute); }
.pm-group, .sm-who, .sm-use, .rm-group { padding: 12px 4px 4px; }

/* Every item: a grey line icon in a white tile with a hairline, then the name in ink and one grey line under it, after
   Linear's and Lovable's menus. No colour: pointing at one lays a grey pill under it and turns its icon to ink. */
.hd-it { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 8px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .15s; }
.hd-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; color: var(--soft); background: #fff; box-shadow: 0 0 0 1px var(--line-2); transition: color .15s; }
.hd-ic .li { --s: 18px; --sw: 1.6; }
.hd-tx { display: grid; gap: 3px; min-width: 0; }
.hd-tx b { font: 500 14px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.hd-tx span { font-size: 12.5px; line-height: 1.3; color: var(--soft); }
.hd-it:hover, .hd-it:focus-visible, .hd-it[aria-current="page"] { background: var(--hd-wash); }
.hd-it:hover .hd-ic, .hd-it:focus-visible .hd-ic, .hd-it[aria-current="page"] .hd-ic { color: var(--ink); }

/* Product: Build and Built in side by side: two columns of 300px. */
.pm { display: grid; grid-template-columns: repeat(2, 300px); gap: 8px; }

/* Product's one highlight, SEO (menu.ts productFeature): a grey plate under both columns, like the use cases' plate.
   On the left a white pill with "SEO" on a live night chip (as every "Coming soon" pill), the promise and a link; on
   the right the search result Flinter's page becomes, faded, with SEO, GEO and AEO ticked in front. Its text starts 20px in,
   as every label and icon. When the menu opens, the result and its ticks rise in one after the other. */
.pm-feat {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 264px; align-items: center; gap: 16px;
  padding: 12px; border-radius: 12px; color: inherit; text-decoration: none; background: var(--hd-plate);
  transition: background-color .2s;
}
.pm-feat:hover, .pm-feat:focus-visible, .pm-feat[aria-current="page"] { background: #EDEDEF; }
.pf-tx { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pf-tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 3px; border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: -.01em; color: var(--soft); background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
.pf-tag .chip { height: 22px; padding: 0 9px; font-size: 11.5px; letter-spacing: .03em; }
.pf-h { margin-top: 14px; font: 500 16px/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.pf-p { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--soft); }
.pf-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font: 500 12.5px/1 var(--sans); color: var(--ink); }
.pf-more .li { --s: 13px; --sw: 2; transition: translate .25s var(--ease); }
.pm-feat:hover .pf-more .li, .pm-feat:focus-visible .pf-more .li { translate: 3px 0; }

/* The search result is only a backdrop: it fades out downwards into the plate, and the words (SEO, GEO, AEO) sit sharp
   in front of the faded part. */
.pf-art { position: relative; display: block; }
.pf-serp {
  display: grid; gap: 9px; padding: 8px 8px 34px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .07), 0 1px 2px -1px rgba(0, 0, 0, .06);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, rgba(0, 0, 0, .35) 62%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 20%, rgba(0, 0, 0, .35) 62%, transparent 96%);
  transition: translate .3s var(--ease);
}
.pm-feat:hover .pf-serp { translate: 0 -2px; }
.pf-q { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); }
.pf-q .li { --s: 13px; --sw: 1.8; color: var(--mute); }
.pf-res { display: grid; gap: 4px; padding: 0 4px; }
.pf-site { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.pf-site img { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(17, 17, 19, .06); }
.pf-site > span { display: grid; gap: 2px; }
.pf-site b { font: 500 10.5px/1 var(--sans); color: var(--ink); }
.pf-site small { font-size: 9.5px; line-height: 1; color: var(--mute); }
.pf-t { font: 500 13px/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink); text-underline-offset: 2px; }
.pm-feat:hover .pf-t { text-decoration: underline; }
.pf-d { font-size: 11px; line-height: 1.4; color: var(--soft); }
.pf-ok { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.pf-ok span { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font: 600 11.5px/1 var(--sans); letter-spacing: .03em; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px -2px rgba(17, 17, 19, .12); }
.pf-ok .li { --s: 12px; --sw: 2.2; color: var(--ink); }
@keyframes pf-rise { from { opacity: 0; transform: translateY(6px); } }
.hd-menu.is-on .pf-res { animation: pf-rise .45s var(--ease) .12s both; }
.hd-menu.is-on .pf-ok span { animation: pf-rise .4s var(--ease) both; }
.hd-menu.is-on .pf-ok span:nth-child(1) { animation-delay: .32s; }
.hd-menu.is-on .pf-ok span:nth-child(2) { animation-delay: .4s; }
.hd-menu.is-on .pf-ok span:nth-child(3) { animation-delay: .48s; }

/* Solutions: who it's for, then the use cases on a grey column, after Lovable's menu: two columns of 300px. */
.sm { display: grid; grid-template-columns: repeat(2, 300px); gap: 8px; }
/* The use cases share the column's height, so the grey ends with them. */
.sm-use { display: grid; grid-template-rows: auto 1fr; border-radius: 12px; background: var(--hd-plate); }
.sm-use ul { grid-auto-rows: 1fr; }
.sm-use .hd-it:hover, .sm-use .hd-it:focus-visible, .sm-use .hd-it[aria-current="page"] { background: #fff; }
/* Under both columns: every Solutions page, by problem (/solutions). */
.sm-all { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px 0 14px; border-radius: 12px; font: 400 13.5px/1.3 var(--sans); color: var(--mute); text-decoration: none; transition: background-color .15s, color .15s; }
.sm-all b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.sm-all .li { --s: 14px; --sw: 1.8; transition: translate .25s var(--ease); }
.sm-all:hover, .sm-all:focus-visible, .sm-all[aria-current="page"] { color: var(--ink-2); background: var(--hd-wash); }
.sm-all:hover .li, .sm-all:focus-visible .li { translate: 3px 0; }

/* Resources: Updates and Get started side by side: two columns of 300px. */
.rm { display: grid; grid-template-columns: repeat(2, 300px); gap: 8px; }

/* ───────── The drawings (NavArt.astro) ───────── */
.na { position: absolute; inset: 0; display: grid; place-items: center; place-content: center; gap: 10px; scale: 1.06; pointer-events: none; }
/* The tallest drawings come down a little, so every one keeps about 28px of plate above and below it. */
.na-site, .na-templates { scale: 1; }
.na-tools { scale: .94; }
.na-app { scale: .82; }
.na-win { display: block; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07), 0 1px 2px -1px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .03); }
.na-b { display: block; flex: none; width: var(--w, 40px); height: 6px; border-radius: 3px; background: rgba(17, 17, 19, .09); }
.na-b.k { background: rgba(17, 17, 19, .78); }
.na-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.na img { display: block; object-fit: cover; }

/* Website builder: the sentence, and the bakery's site it became. */
.na-ask { display: flex; align-items: center; gap: 10px; width: 236px; height: 36px; padding: 0 5px 0 14px; border-radius: 999px; font-size: 12px; color: var(--ink-2); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08); }
.na-send { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; color: #fff; background: var(--ink); }
.na-send .li { --s: 13px; --sw: 2; }
.na-site-win { width: 260px; padding-bottom: 8px; }
.na-site-top { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 10px; }
.na-site-top b { margin-right: auto; font: 400 13px/1 var(--serif); color: #1E1814; }
.na-site-top .na-b { height: 4px; }
.na-site-top em { padding: 4px 8px; border-radius: 999px; font: 500 9px/1 var(--sans); font-style: normal; color: #fff; background: #1E1814; }
.na-site-hero { position: relative; display: block; height: 92px; margin: 0 8px; overflow: hidden; border-radius: 8px; }
.na-site-hero img { width: 100%; height: 100%; }
.na-site-hero b { position: absolute; left: 10px; top: 10px; font: 400 15px/1.05 var(--serif); color: #fff; }
.na-site-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 8px 0; }
.na-site-cols img { width: 100%; height: 34px; border-radius: 6px; }

/* App builder: sign-in, and the plan you pay for. */
.na-signin { display: grid; gap: 8px; width: 232px; padding: 16px; }
.na-h { font: 500 14px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); margin-bottom: 2px; }
.na-field { display: grid; gap: 5px; }
.na-field small { font-size: 10px; color: var(--mute); }
.na-field span { display: flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 8px; font-size: 11px; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); }
.na-dots { letter-spacing: .08em; color: var(--soft) !important; }
.na-btn { display: grid; place-items: center; height: 30px; margin-top: 2px; border-radius: 8px; font: 500 11px/1 var(--sans); color: #fff; background: var(--ink); }
.na-plan { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 8px 8px 10px; border-radius: 10px; background: var(--hd-plate); }
.na-plan > span { display: grid; gap: 3px; }
.na-plan b { font: 500 11px/1 var(--sans); color: var(--ink); }
.na-plan small { font-size: 9.5px; color: var(--soft); }
.na-plan em { margin-left: auto; padding: 6px 9px; border-radius: 999px; font: 500 10px/1 var(--sans); font-style: normal; color: #fff; background: var(--ink); }

/* Mobile apps: the bakery's app. */
.na-ph { position: relative; display: flex; flex-direction: column; gap: 8px; width: 136px; height: 262px; padding: 26px 10px 0; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 0 0 5px #fff, 0 0 0 6px rgba(17, 17, 19, .08); }
.na-ph-notch { position: absolute; left: 50%; top: 9px; width: 44px; height: 10px; translate: -50% 0; border-radius: 999px; background: #111113; }
.na-ph-img { display: block; height: 70px; overflow: hidden; border-radius: 12px; }
.na-ph-img img { width: 100%; height: 100%; }
.na-ph-h { font: 400 14px/1 var(--serif); color: #1E1814; margin: 2px 0 0 2px; }
.na-ph-row { display: flex; align-items: center; gap: 8px; }
.na-ph-row img { width: 30px; height: 30px; border-radius: 8px; }
.na-ph-row > span { display: grid; gap: 5px; }
.na-ph-row .na-b { height: 5px; }
.na-ph-row em { display: grid; place-items: center; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; font: 500 12px/1 var(--sans); font-style: normal; color: #fff; background: #1E1814; }
.na-ph-tabs { display: flex; justify-content: space-around; margin-top: auto; padding: 10px 6px 12px; border-top: 1px solid var(--line); }
.na-ph-tabs i { width: 14px; height: 4px; border-radius: 2px; background: rgba(17, 17, 19, .12); }
.na-ph-tabs i.is-on { background: var(--ink); }

/* Agents: the steps of one run. */
.na-ag { width: 276px; padding: 6px 0 8px; }
.na-ag-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.na-ag-h b { font: 500 12.5px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.na-ag-h em { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font: 500 10px/1 var(--sans); font-style: normal; color: var(--ink-2); background: rgba(17, 17, 19, .06); }
.na-ag-h em i, .na-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: na-breathe 1.6s ease-in-out infinite; }
.na-ag-row { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 12px; font-size: 11.5px; color: var(--ink-2); }
.na-ag-row > span { flex: 1; }
.na-ag-row img { width: 14px; height: 14px; object-fit: contain; }
.na-ag-row time { width: 26px; text-align: right; font: 400 10px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); }
.na-ck { display: grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 50%; color: #fff; background: var(--ink); }
.na-ck .li { --s: 9px; --sw: 2.6; }
.na-dot { flex: none; margin: 0 4px; }
.na-ring { flex: none; width: 12px; height: 12px; margin: 0 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 19, .16); }
.na-ag-row.is-now { color: var(--ink); font-weight: 500; }
.na-ag-row.is-next { opacity: .45; }
.na-ag-row.is-next time { visibility: hidden; }
@keyframes na-breathe { 50% { opacity: .35; } }

/* Templates: four finished sites, each its own colours; the one you picked carries the ring. */
.na-tpl { display: grid; grid-template-columns: repeat(2, 128px); gap: 10px; }
.na-tp { position: relative; display: flex; flex-direction: column; gap: 6px; height: 104px; padding: 8px; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.na-tp.is-on { box-shadow: 0 0 0 1px rgba(17, 17, 19, .07), 0 0 0 3px var(--hd-plate), 0 0 0 4.5px var(--ink); }
.na-tp-top { display: flex; justify-content: space-between; margin-bottom: 2px; }
.na-tp-top i { width: 18px; height: 4px; border-radius: 2px; background: currentColor; opacity: .5; }
.na-tp-top i + i { width: 28px; opacity: .25; }
.na-tp-h { width: 76%; height: 7px; border-radius: 3px; background: currentColor; }
.na-tp-h.is-2 { width: 52%; }
.na-tp-l { width: 58%; height: 4px; border-radius: 2px; background: currentColor; opacity: .3; }
.na-tp-btn { width: 36px; height: 12px; margin-top: auto; border-radius: 999px; background: var(--b); }
.na-tp img { height: 40px; margin: 0 -8px 2px; width: calc(100% + 16px); }
.na-tp-bake { color: #1E1814; background: #fff; }
.na-tp-bake img { order: -1; margin: -8px -8px 2px; height: 48px; }
.na-tp-bake .na-tp-top { display: none; }
.na-tp-ink { --b: #EDEBE8; color: #EDEBE8; background: #19191B; }
.na-tp-sage { color: #2E3328; background: #E9EEE3; }
.na-tp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: auto; }
.na-tp-cards i { height: 22px; border-radius: 4px; background: #fff; }
.na-tp-navy { --b: #F2C14E; color: #E8EEF8; background: #142235; }

/* Backend and database: the orders table. */
.na-db { width: 280px; padding-bottom: 6px; }
.na-db-tabs { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--mute); }
.na-db-tabs b { font-weight: 500; color: var(--ink); }
.na-db-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; height: 30px; padding: 0 12px; font-size: 10.5px; color: var(--ink-2); }
.na-db-row + .na-db-row { border-top: 1px solid rgba(17, 17, 19, .05); }
.na-db-row.is-h { height: 26px; font-size: 10px; color: var(--mute); }
.na-db-row em { padding: 3px 7px; border-radius: 999px; font: 500 9.5px/1 var(--sans); font-style: normal; color: var(--soft); background: rgba(17, 17, 19, .05); }
.na-db-row em.is-new { color: var(--ink); background: rgba(17, 17, 19, .1); }

/* Integrations: the tools, by their own logos. */
.na-chips { display: grid; justify-items: center; gap: 8px; }
.na-chips > span { display: flex; gap: 8px; }
.na-chips { gap: 10px; }
.na-chips > span { gap: 10px; }
.na-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 12px; border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.na-chip img { width: 18px; height: 18px; object-fit: contain; }

/* Payments: a checkout. */
.na-co { display: grid; gap: 7px; width: 236px; padding: 12px; }
.na-co-item { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 3px; border-bottom: 1px solid var(--line); }
.na-co-item img { width: 34px; height: 34px; border-radius: 8px; }
.na-co-item > span { display: grid; gap: 4px; flex: 1; }
.na-co-item b { font: 500 11.5px/1.1 var(--sans); color: var(--ink); }
.na-co-item small { font-size: 10px; color: var(--mute); }
.na-co-item em { font-size: 11px; font-style: normal; color: var(--ink); }
.na-co-apple, .na-co-g { display: flex; align-items: center; justify-content: center; gap: 4px; height: 30px; border-radius: 8px; font: 500 11.5px/1 var(--sans); }
.na-co-apple { color: #fff; background: #000; }
.na-co-apple .li { --s: 13px; }
.na-co-g { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .12); }
.na-co-or { display: flex; align-items: center; gap: 8px; font-size: 9.5px; color: var(--mute); }
.na-co-or i { flex: 1; height: 1px; background: var(--line); }
.na-co-card { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 10.5px; color: var(--soft); box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .1); }
.na-co-card .li { --s: 14px; color: var(--mute); }

/* Domains and hosting: the address, live, and what's connected. */
.na-dm { display: grid; gap: 10px; width: 272px; }
.na-addr { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 14px; border-radius: 999px; font-size: 12.5px; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08); }
.na-addr .li { --s: 14px; color: var(--ok); }
.na-addr em, .na-dm-row em.is-ok { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }
.na-addr em { margin-left: auto; padding: 6px 10px; border-radius: 999px; font: 500 10.5px/1 var(--sans); color: #0E7A3E; background: #E5F5EB; }
.na-addr em i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.na-dm-list { padding: 4px 0; }
.na-dm-row { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 12px; font-size: 10.5px; color: var(--ink-2); }
.na-dm-row + .na-dm-row { border-top: 1px solid rgba(17, 17, 19, .05); }
.na-dm-row em { font: 500 10px/1 var(--sans); font-style: normal; color: var(--mute); }
.na-dm-row em.is-ok { color: #0E7A3E; }
.na-dm-row .li { --s: 11px; --sw: 2.4; }

/* Analytics: visitors over the week, and the pages they open. */
.na-st { width: 276px; padding: 12px 14px 14px; }
.na-st-h { display: flex; align-items: baseline; justify-content: space-between; }
.na-st-h b { font: 500 12.5px/1 var(--sans); color: var(--ink); }
.na-st-h small { font-size: 10px; color: var(--mute); }
.na-st-chart { display: block; width: 100%; height: 72px; margin: 12px 0 12px; overflow: visible; }
.na-st-chart path { fill: none; vector-effect: non-scaling-stroke; }
.na-st-chart .base { stroke: var(--line-2); stroke-width: 1; }
.na-st-chart .line { stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; }
.na-st-rows { display: grid; gap: 7px; }
.na-st-rows > span { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; font-size: 10px; color: var(--soft); }
.na-st-rows i { width: var(--w); height: 6px; border-radius: 3px; background: rgba(17, 17, 19, .1); }
.na-st-rows > span:first-child i { background: rgba(17, 17, 19, .7); }

/* ───────── Phones and tablets ───────── */
/* The menu button matches the bar's buttons: 32px, 6px corners, white with a hairline; its tap area reaches 44px. */
.hd-burger { position: relative; display: none; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .09); transition: background-color .15s, color .3s, box-shadow .3s; }
.hd-burger::after { content: ""; position: absolute; inset: -6px; }
.hd-burger:hover { background: #F4F4F5; }
.hd-burger .li { grid-area: 1 / 1; --s: 16px; --sw: 1.7; transition: opacity .2s, rotate .3s var(--ease); }
.hd-burger .li + .li { opacity: 0; rotate: -45deg; }
.hd-burger[aria-expanded="true"] .li:first-child { opacity: 0; rotate: 45deg; }
.hd-burger[aria-expanded="true"] .li + .li { opacity: 1; rotate: 0deg; }

.hd-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--hd-h, 64px); display: none; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 16px 40px; background: #fff;
  opacity: 0; filter: blur(4px); transform: translateY(-6px); visibility: hidden;
  transition: opacity .14s, filter .14s, transform .14s, visibility 0s .14s;
}
.hd.is-sheet .hd-sheet { opacity: 1; filter: none; transform: none; visibility: visible; transition: opacity .26s var(--ease), filter .26s var(--ease), transform .3s var(--ease), visibility 0s; }
/* Product, Solutions and Resources as three rows; a tap opens one and closes the others. */
.sh-sec { border-bottom: 1px solid var(--line); }
.sh-h { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 58px; padding: 0 10px; font: 500 17px/1 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.sh-link { text-decoration: none; }
.sh-h .li { --s: 16px; --sw: 1.8; color: var(--mute); transition: rotate .3s var(--ease); }
.sh-h[aria-expanded="true"] .li { rotate: 180deg; }
.sh-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.sh-h[aria-expanded="true"] + .sh-body { grid-template-rows: 1fr; }
.sh-in { display: grid; gap: 6px; min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .4s; }
.sh-h[aria-expanded="true"] + .sh-body .sh-in { opacity: 1; visibility: visible; transition: opacity .3s var(--ease) .06s, visibility 0s; }
.sh-group { padding-bottom: 12px; }
.sh-sub { margin: 0 0 2px; padding: 0 10px; font: 500 12.5px/1.4 var(--sans); color: var(--mute); }
.sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sh-grid a { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: 10px; font: 400 15px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink-2); text-decoration: none; transition: background-color .15s; }
.sh-grid a:hover, .sh-grid a[aria-current="page"] { color: var(--ink); background: var(--hd-wash); }
/* Product's SEO highlight, as the last row of its section: the chip, the promise and an arrow on a grey plate. */
.sh-all { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; font: 500 15px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.sh-all .li { --s: 15px; --sw: 1.8; color: var(--mute); }
.sh-all:hover, .sh-all[aria-current="page"] { background: var(--hd-wash); }
.sh-feat { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 48px; padding: 10px 12px 10px 10px; border-radius: 12px; font: 400 15px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; background: var(--hd-plate); }
.sh-feat .chip { flex: none; height: 22px; padding: 0 9px; font-size: 12px; letter-spacing: .03em; }
.sh-feat .li { --s: 15px; --sw: 1.8; flex: none; margin-left: auto; color: var(--mute); }
html.hd-lock, html.hd-lock body { overflow: hidden; }

@media (max-width: 1023px) {
  .hd-links { display: none; }
  .hd-burger { display: grid; }
  .hd-sheet { display: block; }
}
@media (max-width: 640px) {
  .hd.is-dark:not(.is-scrolled) .hd-bar { translate: 0 8px; }
  .hd-shell { height: 60px; padding: 0 16px; }
  /* On phones Contact moves into the sheet. */
  .hd-btn-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hd *, .hd *::before { transition: none !important; animation: none !important; }
  .hd-menu, .hd-sheet { filter: none; }
  .sh-in { transition: none !important; }
}