/* CREW-SITE F, inner pages (6 Oct): every page that isn't the home speaks in F's type and sits on Crew's ground.
   Linked last by tools/chrome.py (after each page's inline stylesheet) so these roles win by order, never by !important.
   Type: FIFT RULES 3a (Crew web type): Newsreader for headlines and the voice, Schibsted Grotesk for the interface.
   Ground: crew-tokens.css (the background lock) is linked right before this file. */
@font-face { font-family: 'Newsreader Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-display.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-text.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-text-italic.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/schibsted-grotesk.woff2) format('woff2'); }

:root {
  --e-display: 'Newsreader Display', 'Newsreader Text', ui-serif, Georgia, serif;
  --e-serif: 'Newsreader Text', ui-serif, Georgia, serif;
  --e-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-ui: var(--e-sans);
  --ground: var(--fift-ground);
}
body { font-family: var(--e-sans); background: var(--fift-ground); font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* the serif speaks: page titles, section titles, the lede */
h1, h2,
.display, .sec-head h2, .turn-h, .close h2, .ph h1, .legal h1, .prose h1, .nf h1, .wi-hero h1, .hook h1, .row h2, .sc-text h3, .jr-text h3 {
  font-family: var(--e-display); font-weight: 400; letter-spacing: -0.022em; line-height: 1.04; font-feature-settings: 'kern', 'liga';
}
.ph h1, .legal h1, .prose h1, .nf h1, .wi-hero h1, .hook h1 { letter-spacing: -0.028em; line-height: 1; }
.legal h2, .prose h2 { font-family: var(--e-display); font-weight: 400; letter-spacing: -0.015em; }
.lede { font-family: var(--e-serif); font-size: var(--t-question); line-height: 1.45; letter-spacing: -0.003em; }
.pr h3, .price-side h3 { font-family: var(--e-sans); font-weight: 600; letter-spacing: -0.012em; }

/* labels in sentence case, like the home (no tracked capitals) */
.eyebrow, .hook-k { text-transform: none; letter-spacing: -0.005em; font-size: var(--t-note); }

/* page heads read from the left, like the home */
.ph.center { text-align: left; }
.ph.center h1, .ph.center .lede { margin-left: 0; margin-right: 0; }

/* the header: the home's lockup and its one action */
.top { background: color-mix(in srgb, var(--fift-ground) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.top .lockup b { display: inline; }
.top .site-nav a.nav-cta { font-family: var(--e-sans); color: var(--fift-ivory);
  background: linear-gradient(180deg, var(--fift-face-cherry-hi) 0%, var(--fift-face-cherry-a) 48%, var(--fift-face-cherry-b) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fift-ivory) 30%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--fift-black) 26%, transparent); }
.top .nav-cta .short { display: none; }
@media (max-width: 899px) {
  .top .site-nav a:not(.nav-cta) { display: none; }
  .top .nav-cta .long { display: none; }
  .top .nav-cta .short { display: inline; }
}
@media (min-width: 900px) { .top .lockup span { display: inline; } }

/* section heads read from the left too (one alignment per page) */
.sec-head, .close { text-align: left; }
.sec-head h2, .sec-head .lede, .close h2, .close .lede { margin-left: 0; margin-right: 0; }
.top .lockup span { display: inline; }
@media (max-width: 380px) { .top .lockup span { display: none; } }

/* product shots: flat and quiet (no tilt, no halo), framed like the home's */
.buy-shot::before { display: none; }
.buy-shot img, .buy-shot:hover img { transform: none; }
@media (max-width: 999px) { .buy-hero .buy-shot { order: 2; } }
.shot img { border-radius: var(--fift-corner-16); corner-shape: squircle; box-shadow: 0 0 0 1px var(--fift-hairline), var(--fift-shadow-object); background: var(--fift-surface); }
.shot-note { margin-top: var(--fift-space-24); }

/* small titles stay in the interface face, as on the home ("It remembers") */
h2.h3, .pillar h3, .pillar .h3 { font-family: var(--e-sans); font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
.sec-faq-h { font-family: var(--e-sans); font-weight: 600; text-transform: none; letter-spacing: -0.005em; font-size: var(--t-note); line-height: 1.3; }
.buy-label { text-transform: none; letter-spacing: -0.005em; font-family: var(--e-sans); font-weight: 600; color: var(--e-accent-text, var(--fift-crew-accent)); }

/* changelog: the permalink is a quiet note beside the version, not a second headline */
.version-link { font: 400 var(--t-note)/1 var(--e-sans); color: var(--fift-tertiary); text-decoration: none; margin-left: var(--fift-space-8); vertical-align: 0.2em; }
.version-link:hover { color: var(--fift-text); text-decoration: underline; }
:root { --e-accent-text: var(--fift-crew-accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --e-accent-text: color-mix(in srgb, var(--fift-crew-accent) 68%, var(--fift-text)); } }
:root[data-theme="dark"] { --e-accent-text: color-mix(in srgb, var(--fift-crew-accent) 68%, var(--fift-text)); }
.eyebrow { color: var(--e-accent-text); }
.shot-note { font: 400 var(--t-note)/1.5 var(--e-sans); color: var(--fift-tertiary); }

/* one flat ground, like the home: no coloured field behind a page head */
.field, .buy > .field, .buy-tile::before { display: none; }
/* every price is set in the display serif, like the home's $50 */
.buy-amt b { font-family: var(--e-display); font-weight: 400; letter-spacing: -0.02em; }

/* one left edge per page: the narrower blocks sit on the column's left edge, not centred inside it */
.sec-head, .price-wrap, .faq, .cmp, .cmp-with { margin-left: 0; margin-right: 0; }
.sec-head { margin-bottom: var(--fift-space-48); }
.sec-faq-h { margin-left: 0; margin-right: 0; }
.wrap > .prose { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
/* /security's long section shares the page's left edge (its measure stays) */
main > .prose { max-width: var(--max); padding-left: var(--gutter); padding-right: var(--gutter); }
main > .prose > * { max-width: var(--fift-type-measure-body); }
/* section titles beside a shot read as titles (the home's section scale), never smaller than the text under them */
.row h2 { font-size: var(--t-display); line-height: 1.06; }

/* H elegance layer (7 Oct, Sunny: "it has to be more elegant"): small, flat buttons in the one accent; no decorative
   gradients or halos (photographs only); hairlines before shadows; the FAQ groups sit on the questions' own column. */
.btn, .buy .btn, .buy .btn-cherry { min-height: 44px; padding: 0 var(--fift-space-20); font-size: var(--t-body); }
.btn-cherry, .buy .btn-cherry { box-shadow: none; filter: none; }   /* fill: m.css, the one cherry */
.btn-cherry:hover, .buy .btn-cherry:hover { transform: none; opacity: .92; filter: none; }
.buy .btn-cherry::before { display: none; }
.top .site-nav a.nav-cta { background: var(--fift-face-cherry-a); box-shadow: none; }
.buy > .field, .buy-tile::before { display: none; }
.buy-card, .buy .wi-hero .buy-card { box-shadow: 0 0 0 1px var(--fift-hairline); }
.faq, .sec-faq-h { margin-left: auto; margin-right: auto; max-width: 820px; }
.sec-faq-h { color: var(--fift-tertiary); margin-top: var(--fift-space-64); }
.buy-list li > span { display: block; }

/* footer v2 (7 Oct): two quiet rows, on every page */
.foot .f-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fift-space-8) var(--fift-space-24); }
.foot .foot-lock { display: inline-flex; align-items: center; gap: var(--fift-space-8); min-height: 44px; color: var(--fift-text); text-decoration: none; }
.foot nav { display: flex; flex-wrap: wrap; column-gap: var(--fift-space-20); margin: 0; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fift-secondary); text-decoration: none; }
.foot .f-legal { margin-top: var(--fift-space-12); font-size: var(--t-note); line-height: 1.5; color: var(--fift-tertiary); }
/* the tier cards bleed to the page edge by the page gutter (h/tiers.css reads --e-gutter, the home's name for it) */
:root { --e-gutter: var(--gutter); }

/* the lockup (Sunny 23:55): the bare feather, then "Crew" and "by FIFT Studio" on one baseline */
.lockup, .foot-lock { align-items: baseline; min-height: 0; padding-block: var(--fift-space-12); }
.mark { align-self: center; flex: none; width: 24px; height: 24px; margin-inline: -4px -2px; background: var(--fift-crew-accent); -webkit-mask: url(/assets/favicon.svg) center / contain no-repeat; mask: url(/assets/favicon.svg) center / contain no-repeat; }   /* the brand's own feather file (favicon.svg: the bare mark, centred in its square) */
.foot-lock .mark { width: 20px; height: 20px; }
/* the mark (fift-studio-design §10, Raven 00:13): cherry (--fift-crew-accent) on light, ivory (--fift-ivory-night) on dark; never gold */
@media (prefers-color-scheme: dark) { .mark { background: var(--fift-ivory-night); } }
.source { margin: var(--fift-space-24) auto 0; max-width: var(--fift-type-measure-body); text-align: center; font: 400 var(--fift-type-size-note)/1.5 var(--e-sans); color: var(--fift-tertiary); }

/* P2-31 (site-rip): every inner page opens in the home's world: a quiet strip of its sky and sand (the hero's own plate),
   fading into the ground. App captures are solid objects: no fade masks. */
.pg, main > .p-hero { position: relative; isolation: isolate; }
.pg::before, main > .p-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 320px; z-index: -1; pointer-events: none;
  background: url(/assets/h/v5/day-wide-plate.webp) center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, var(--fift-ground), transparent); mask-image: linear-gradient(180deg, var(--fift-ground), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pg::before, :root:not([data-theme="light"]) main > .p-hero::before { background-image: url(/assets/h/v5/night-wide-plate.webp); } }
@media (max-width: 640px) { .pg::before, main > .p-hero::before { height: 240px; } }
.p-shot { -webkit-mask-image: none; mask-image: none; }

/* SITE-RELEASE1: the two lines under a pair of CTAs (the trial terms, compliance S7; then the requirement) */
p.cta-note, .still p.cta-note, .nf p.cta-note, .join-p p.cta-note { margin: var(--fift-space-16) auto 0; max-width: 46ch; font-size: var(--fift-type-size-note); line-height: 1.5; color: var(--fift-tertiary); }
.nf .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fift-space-12); margin-top: var(--fift-space-32); }