/* gofred.ai early access. Built from the approved comps (comp-final-phone), page 2's In Line and
   card screens, and the desktop stage A. Phone first; desktop at 1024 and up. */
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/fonts/schibsted-grotesk-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/fonts/schibsted-grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/fonts/schibsted-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/fonts/schibsted-grotesk-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/fonts/schibsted-grotesk-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{--ground:#F6F1E7;--ink:#17140F;--ink-soft:rgba(23,20,15,.66);--line:rgba(23,20,15,.22);--hair:rgba(23,20,15,.12);
  --orange:#FF7A00;--bar:#1B212B;--paper:#FFFCF6;--off:#E8E1D4;--off-ink:#5E5850;--stage:#120b07}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--ground);color:var(--ink)}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;font-family:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{color:inherit}
[hidden]{display:none!important}
button{-webkit-tap-highlight-color:transparent}

.bar{position:relative;z-index:5;height:46px;flex:none;background:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.bar img{display:block;height:28px;width:auto}
/* the (TM) after Go Fred in the footer line: 40 percent of the line's cap height, its top on the capitals' tops (the
   glyph's ink is .36em tall and sits at the cap height) */
.tmk{font-size:.79em;line-height:0;vertical-align:.19em}
/* the (TM) on the go fred wordmark (brief 70 amend 10): text beside the logo, never in the file. 40 percent of the
   letters' ascender height (147 of the lockup's 222.36 units), in the letters' own colour, its ink top level with the
   tops of the f and d, a hairline after the d; absolute, so it never moves or wraps the header. --lh is the logo's height,
   --tt its drop from the logo's top (per size: the glyph lands on whole pixels) */
.wm{position:relative;display:block;--lh:28px;--tt:.065}
.wm .tmk{position:absolute;left:calc(100% + 1px);top:calc(var(--lh) * var(--tt));font-size:calc(var(--lh) * .735);font-weight:700;line-height:1;color:#FFF6E6;white-space:nowrap;pointer-events:none}
.bar .ea{color:var(--orange);font-weight:800;font-size:13px;letter-spacing:.07em}
/* the hero's own sign says EXCLUSIVE EARLY ACCESS on page 1 (phone and desktop), so the bar says it only on page 2 */
html:not(.p2) .bar .ea{visibility:hidden}

.screens{flex:1;display:grid}
.screen{grid-area:1/1;display:flex;flex-direction:column;min-width:0}

h1{font-weight:900;font-size:40px;line-height:.98;letter-spacing:-.025em}
h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.14em;letter-spacing:-.01em;line-height:.9}
h1:focus{outline:none}
br.y{display:none}

/* the hero: a stage that covers its box at the render's own aspect, so the overlays can use render pixels */
.hero{position:relative;overflow:hidden;background:var(--stage);width:100%;aspect-ratio:1170/1152;container-type:size}
.stage{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 1170 / 1152));aspect-ratio:1170/1152;transform:translate(-50%,-50%)}
.stage picture,.stage>picture img{display:block;width:100%;height:100%}
.ov{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.ov .g{position:absolute;left:0;top:0;width:100%;height:100%}
.ov .g>img,.ov .g>canvas{position:absolute;left:0;top:0;display:block}
/* the board, drawn by the page over the picture's blank board (the sign, the marquee number and its bulbs, the two lines,
   the gold frame); its letters in the page's own heaviest face */
.ov .board{position:absolute;display:block;overflow:visible}
.ov .board .bt{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-weight:900;letter-spacing:.01em}
/* the live card: FOUNDING FRED and the brand, written by the page onto the card's measured face (its size is set from
   the face's own shape in gofred.js), so both stay crisp at any size */
.live{position:absolute;left:0;top:0;width:600px;height:500px;transform-origin:0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6%;white-space:nowrap}
.live span{flex:none;font-weight:800;letter-spacing:-.01em;color:#17140F;mix-blend-mode:multiply;line-height:1;opacity:.92}
.live .ff{letter-spacing:.03em;opacity:.8}
.live.ghost .bn{color:rgba(23,20,15,.30);font-weight:700}

.copy{padding:18px 20px 0}
/* the kicker over the headline (brief 70 amend 9): a label, not a sentence; small caps, tracked out, the page's own soft
   ink, nothing beside it */
.kicker{margin-bottom:10px;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.16em;color:var(--ink-soft)}
/* one line under the headline: the end of the statement, in the headline's own colour; never
   orange, never a badge */
.nlo{margin-top:10px;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
/* variant W only (preview, ?w=1): one small line about the first wave, right above the fields */
.doors{margin-top:8px;font-size:15px;line-height:1.35;color:var(--ink-soft)}
/* what the card is (brief 70 amend 8): it is free and it is the way in */
.free{margin-top:8px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);text-wrap:balance}
form{display:grid;gap:10px;margin-top:18px}
input{height:54px;width:100%;border:1.5px solid var(--line);background:transparent;border-radius:12px;padding:0 16px;
  font:500 16px 'Schibsted Grotesk',system-ui,sans-serif;color:var(--ink);-webkit-appearance:none;appearance:none}
input::placeholder{color:var(--ink-soft);opacity:1}
input:focus{outline:none;border-color:var(--ink)}
input[aria-invalid=true]{border-color:var(--ink);border-width:2px}
form button,.btn{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border:0;border-radius:12px;background:var(--orange);
  color:var(--ink);font:700 17px 'Schibsted Grotesk',system-ui,sans-serif;text-decoration:none;cursor:pointer}
form button:focus-visible,.btn:focus-visible,.foot a:focus-visible,.consent a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
form button[aria-busy=true]{cursor:progress}
.msg{font-size:14px;font-weight:600;line-height:1.35;min-height:0}
.msg:empty{display:none}
.nopay{font-size:13px;line-height:1.4;color:var(--ink-soft);text-align:center;text-wrap:balance}
.consent{font-size:13px;line-height:1.4;color:var(--ink-soft)}
.consent a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-soft);padding:30px 20px 22px}
.foot a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot .legal{display:flex;gap:16px;flex:none}
/* the one footer line, under the links: the smallest and lightest words on the page (still 4.6:1 on the ground) */
.foot .indep{font-size:11px;line-height:1.4;color:rgba(23,20,15,.6)}

/* page 2: the flat silver card. Brand area from card-silver-face.json */
.band{width:100%;aspect-ratio:390/384;display:grid;place-items:center;padding:0 34px}
.fcard{position:relative;width:100%;max-width:322px}
.fcard img{display:block;width:100%;height:auto}
.fbrand{position:absolute;left:7%;top:47%;width:71%;height:23%;display:flex;align-items:center;white-space:nowrap}
.fbrand span{flex:none;font-weight:800;letter-spacing:-.01em;line-height:1;color:var(--ink);mix-blend-mode:multiply;opacity:.92}
.fcard.dim img{filter:grayscale(1) contrast(.85) brightness(1.02);opacity:.55}
.fcard.dim .fbrand{opacity:.5}
.stamp{position:absolute;left:50%;top:88%;transform:translate(-50%,-50%) rotate(-7deg);border:2.5px solid var(--ink);border-radius:8px;
  padding:7px 14px 6px;font-weight:800;font-size:20px;letter-spacing:.06em;color:var(--ink);background:rgba(246,241,231,.88);white-space:nowrap}
.lede{font-size:17px;line-height:1.4;margin-top:14px;max-width:34em}
.lede.then{margin-top:4px;text-wrap:balance}
.inline .copy .btn{margin-top:24px}

/* page 2: the card (brief 70 amend 8), then (amend 14) one more thing: the sales question as four buttons, two by two
   on a phone and one row on a desktop, a "Skip for now" link, "Saved." once the answer is stored, and the one line.
   No figure and no payment of any kind. */
.pick{padding:26px 20px 0}
.one{margin-top:22px;font-weight:700;font-size:17px;line-height:1.35;text-wrap:balance}
.ask{border:0;margin:14px 0 0;padding:0;min-width:0}
.q{font-weight:700;font-size:15px;color:var(--ink-soft);padding:0}
.bands{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.bandopt{display:flex;justify-content:center;align-items:center;min-height:52px;padding:0 8px;background:var(--paper);color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;font:700 16px 'Schibsted Grotesk',system-ui,sans-serif;white-space:nowrap;cursor:pointer;
  outline:none;-webkit-appearance:none;appearance:none}
.bandopt:focus-visible{box-shadow:0 0 0 3px rgba(255,122,0,.55)}
.bandopt[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.saved{margin-top:12px;font-weight:700;font-size:15px}
.saved:empty{display:none}
/* amend 15: under Saved., small; the answer can always be changed */
.change{margin-top:2px;font-size:14px;color:var(--ink-soft)}
.skip{display:block;margin:12px auto 0;padding:6px 4px;background:none;border:0;font:400 14px 'Schibsted Grotesk',system-ui,sans-serif;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.skip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.more[hidden],.skip[hidden],.soon[hidden],.change[hidden]{display:none}
.soon{margin-top:14px;min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:12px;background:var(--off);color:var(--ink);
  font-weight:700;font-size:16px;line-height:1.3;padding:10px 16px}
.pick-card{display:flex;justify-content:center;margin-top:18px}
.pick-card .fcard{max-width:322px}
.fcard.black .fbrand span{color:#dfe2e7;mix-blend-mode:normal;opacity:.9}
.cta{padding:16px 0 4px}
.cta .open{display:grid;gap:10px}
.cta .open[hidden]+.soon{display:flex}
.cta .open:not([hidden])+.soon{display:none}
.btn.hold{background:var(--ink);color:var(--ground)}
.btn:disabled{opacity:.45;cursor:default}
.cta-note{font-size:14px;line-height:1.4;color:var(--ink-soft);text-align:center}
.err{font-size:14px;line-height:1.4;color:#a32a00;text-align:center}
.err:empty{display:none}

/* the motion layer: off until the script turns it on after load */
.shine{position:absolute;left:0;top:0;width:856px;height:540px;transform-origin:0 0;overflow:hidden;border-radius:30px}
.shine i{position:absolute;top:-50%;left:0;width:34%;height:200%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 30%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 100%);
  transform:translateX(-120%) rotate(18deg);will-change:transform}
.glint{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;opacity:0;transform:scale(.2);will-change:transform,opacity}
.glint svg{display:block;width:100%;height:100%}
.flyer{position:fixed;left:0;top:0;width:856px;height:540px;transform-origin:0 0;z-index:20;pointer-events:none}
.flyer img{display:block;width:100%;height:100%}
.flyer .fbrand{left:7%;top:47%;width:71%;height:23%}
.leaving{pointer-events:none}

/* the sign's shine (the variations): a slow light sweep inside the letters' own mask */
.signshine{position:absolute;overflow:hidden;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.signshine i{position:absolute;top:-50%;left:0;width:22%;height:200%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.22) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.22) 70%,rgba(255,255,255,0) 100%);
  transform:translateX(-140%) rotate(16deg);will-change:transform}

/* preview only: the motion switches */
.pv{position:fixed;right:8px;top:54px;z-index:30;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;
  font-size:13px;line-height:1.3;box-shadow:0 6px 24px rgba(23,20,15,.16);max-width:230px}
.pv b{display:block;font-weight:800;margin-bottom:6px}
.pv.shut{padding:0;border-radius:999px}
.pv.shut>*:not(.pv-open){display:none}
.pv .pv-open{display:none}
.pv.shut .pv-open{display:block;margin:0;padding:6px 12px;text-decoration:none;font-weight:700}
.pv label{display:flex;gap:8px;align-items:center;padding:3px 0;cursor:pointer}
.pv a{display:inline-block;margin:6px 10px 0 0;text-decoration:underline;text-underline-offset:3px}
.pv button{border:0;background:none;font:inherit;text-decoration:underline;cursor:pointer;margin-top:6px;color:inherit}

@media (min-width:600px) and (max-width:1023.98px){
  .home .hero{aspect-ratio:auto;height:min(98.5vw,56vh);min-height:380px}
  .copy,.pick{max-width:560px;margin-left:auto;margin-right:auto;width:100%}
  .copy{padding-left:0;padding-right:0}
  h1{font-size:48px}
  .band .fcard{max-width:420px}
}

/* ---------- desktop: the stage (A) ----------
   One picture (3840 x 2400 master) is the page. FRED, the card, the sign, the whole 1,000 and the stanchions sit in the
   subject box, x 0.4316..0.9743 and y 0.0644..0.9444 of it (fred-reference site.json). The stage box is placed so
   that box is never cropped and never under the words: the render covers the window when it can (right-anchored),
   and shrinks when it must, either to keep the subject clear of the words column (narrow windows) or inside the
   window's height (very wide ones). Past the render's edges the page is the stage's own colour, which the render's
   outer band eases into. */
@media (min-width:1024px){
  :root{--stage-bg:#090300;--cream:#F4F0E8;--cream-soft:#BDB6AB;--pad:clamp(40px,4.4vw,96px);--col:clamp(420px,40vw,640px);
    --lw:calc(var(--pad) + var(--col) + 32px);--top:72px;--bot:24px;--sx0:.4316;--sy0:.0644;--sy1:.9444}
  html:not(.p2),html:not(.p2) body{background:var(--stage-bg)}
  html,body,.bar{transition:background-color .45s ease}
  .bar{height:64px;padding:0 var(--pad)}
  .bar img{height:32px}
  .wm{--lh:32px;--tt:.038}
  .bar .ea{font-size:14px}
  html:not(.p2) .bar{position:absolute;left:0;right:0;top:0;background:transparent}
  h1{font-size:56px}
  body{--ph:max(640px,calc(100vh - 56px))}

  .home{position:relative;min-height:max(620px,100vh);min-height:max(620px,100svh);display:flex;flex-direction:row;align-items:center;padding:64px 0 80px;color:var(--cream)}
  .home .hero{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;background:var(--stage-bg);z-index:0}
  .home .stage{--iw:min(max(100cqw,160cqh),calc((100cqw - var(--lw)) / (1 - var(--sx0))),calc((100cqh - var(--top) - var(--bot)) * 1.6 / (var(--sy1) - var(--sy0))));
    --ih:calc(var(--iw) / 1.6);--want:calc(50cqh + (var(--top) - var(--bot)) / 2 - var(--ih) * (var(--sy0) + var(--sy1)) / 2);
    width:var(--iw);aspect-ratio:1600/1000;left:calc(100cqw - var(--iw));transform:none;
    top:clamp(min(0px,calc(100cqh - var(--ih))),var(--want),max(0px,calc(100cqh - var(--ih))))}
  .home .copy{position:relative;z-index:2;width:var(--col);margin-left:var(--pad);padding:0}
  /* the headline carries the column: about 18 percent larger than before, never wider than the column (three lines) */
  .home h1{color:var(--cream);font-size:min(clamp(50px,4.6vw,84px),calc(var(--col) / 8.8))}
  /* Never logs off. scales with the headline (0.4 of it, never under 22 px) */
  .home .nlo{color:var(--cream);margin-top:16px;font-size:max(22px,calc(min(clamp(50px,4.6vw,84px),calc(var(--col) / 8.8)) * .4))}
  .home .kicker{color:var(--cream-soft);font-size:clamp(12px,.9vw,14px);margin-bottom:16px}
  .home .doors{color:rgba(244,240,232,.75);font-size:clamp(16px,1.2vw,18px);margin-top:12px}
  .home .free{color:var(--cream);font-size:clamp(17px,1.25vw,19px);margin-top:10px}
  .home form{margin-top:clamp(28px,3.4vh,40px);width:min(440px,100%)}
  .home input{background:#FFFFFF;border-color:#FFFFFF;color:#17140F}
  .home input::placeholder{color:#6B655C}
  .home input:focus{border-color:var(--orange)}
  .home input[aria-invalid=true]{border-color:var(--orange)}
  .home form button:focus-visible,.home .foot a:focus-visible,.home .consent a:focus-visible{outline-color:var(--cream)}
  .home .msg{color:var(--cream)}
  .home .consent,.home .nopay{color:var(--cream-soft)}
  .home .foot{position:absolute;z-index:2;left:var(--pad);bottom:28px;width:var(--col);padding:0;color:var(--cream-soft)}
  .home .foot .indep{color:#9E978C}
  /* the stage's lit floor can reach under the footer at some sizes: a soft dark halo and a dark fade at the foot of the
     words column (never over the subject, which stays clear of that column) keep it readable */
  .home .foot,.home .consent,.home .nopay,.home .free,.home .msg,.home .kicker{text-shadow:0 0 3px rgba(9,3,0,.95),0 0 8px rgba(9,3,0,.85)}
  .home .hero::after{content:"";position:absolute;left:0;bottom:0;width:var(--lw);height:190px;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(9,3,0,.96),rgba(9,3,0,.85) 40%,rgba(9,3,0,0));
    -webkit-mask-image:linear-gradient(to right,#000 92%,transparent);mask-image:linear-gradient(to right,#000 92%,transparent)}
  .screen{position:relative;min-height:var(--ph)}


  /* the stop D variations (preview only, ?v=1..6): the sign or seal in the scene says EXCLUSIVE EARLY ACCESS, so the
     bar does not say it again (the default stage carries the sign too: see the rule after .bar .ea) */
  html[data-v] .bar .ea{visibility:hidden}

  /* A2, preview only (?d=a2): the same stage, the words on a cream panel floating on its left */
  html.a2{--lw:calc(var(--pad) + var(--col) + 88px)}
  html.a2 .home .copy{background:var(--cream);color:var(--ink);border-radius:20px;padding:40px 40px 34px;width:calc(var(--col) + 56px);margin-left:calc(var(--pad) - 28px)}
  html.a2 .home h1{color:var(--ink);font-size:min(clamp(40px,3.4vw,64px),calc(var(--col) / 8.8))}
  html.a2 .home input{border-color:var(--line)}
  html.a2 .home input:focus{border-color:var(--ink)}
  html.a2 .home .msg{color:var(--ink)}
  html.a2 .home .consent{color:var(--ink-soft)}
  html.a2 .home form button:focus-visible,html.a2 .home .consent a:focus-visible{outline-color:var(--ink)}

  .inline{display:grid;grid-template-columns:minmax(0,1fr) min(calc(var(--ph) * 800 / 844),58vw);grid-template-rows:var(--ph)}
  .inline .band{grid-column:2;grid-row:1;aspect-ratio:auto;height:100%;padding:0 96px 0 40px}
  .inline .band .fcard{max-width:560px}
  .inline .copy{grid-column:1;grid-row:1;align-self:center;padding:0 0 0 clamp(40px,5vw,96px);margin-top:-30px;max-width:640px}
  .inline .copy .btn{width:440px;margin-top:34px}
  .inline .foot{position:absolute;left:clamp(40px,5vw,96px);right:auto;width:calc(100% - min(calc(var(--ph) * 800 / 844),58vw) - 2 * clamp(40px,5vw,96px));bottom:30px;padding:0}
  .lede{font-size:19px;margin-top:18px}
  .stamp{font-size:30px;border-width:3px;padding:10px 22px 9px;border-radius:10px}

  .choose .pick{width:min(1100px,calc(100% - 80px));margin:0 auto;padding:48px 0 104px;flex:1;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,460px);column-gap:72px;align-content:center}
  .choose .pick>*{grid-column:1}
  .choose .pick>.pick-card{grid-column:2;grid-row:1/span 5;align-self:center;margin:0}
  .bands{grid-template-columns:repeat(4,1fr)}
  .one{font-size:19px}
  .pick-card .fcard{max-width:460px}
  .choose .foot{position:absolute;left:max(40px,calc(50% - 550px));width:min(1100px,calc(100% - 80px));bottom:30px;padding:0}
  .amt{font-size:46px}
  .cta .open{grid-template-columns:1fr 1fr}
  .cta .open p{grid-column:1/-1}
}

/* wide desktop (brief 70 amend 12): from 1920 the words column grows with the window in steps, everything in it in
   proportion (zoom: the type, the fields, the button, the gaps), and the script centres it on the middle of the scene
   (alignCopy). The stage keeps the grown column clear (--lw). Nothing here reaches 1680, 1440 or a phone. */
@media (min-width:1920px){
  :root{--k:1.1;--lw:calc(var(--pad) + var(--col) * var(--k) + 32px)}
  .home .copy{zoom:var(--k);margin-left:calc(var(--pad) / var(--k))}
}
@media (min-width:2240px){:root{--k:1.18}}
@media (min-width:2560px){:root{--k:1.26}}
@media (min-width:2880px){:root{--k:1.32}}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}