/* Self-hosted fonts (tools/fonts/fetch.mjs): Google Fonts' standard latin files, as the approved homepage sets them.
   Plus Jakarta Sans for headings and the brand name (weights 700 to 800), Outfit for everything else (400 to 700).
   The "Fallback" faces stand in while a font loads: local fonts resized to the same widths (measured by
   tools/fonts/fallbacks.mjs), so the swap moves nothing. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700 800;font-display:swap;src:url("/_astro/plus-jakarta-sans-latin.B2KjpZfh.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400 700;font-display:swap;src:url("/_astro/outfit-latin.D6ftewdU.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* FALLBACKS */
@font-face{font-family:"Outfit Fallback";src:local("Arial");font-style:normal;font-weight:100 500;font-stretch:100%;size-adjust:98.86%;ascent-override:101.16%;descent-override:26.30%;line-gap-override:0%} /* 37776 characters */
@font-face{font-family:"Outfit Fallback";src:local("Arial");font-style:italic;font-weight:100 500;font-stretch:100%;size-adjust:102.65%;ascent-override:97.42%;descent-override:25.33%;line-gap-override:0%} /* 208 characters */
@font-face{font-family:"Outfit Fallback";src:local("Arial Bold");font-style:normal;font-weight:600 900;font-stretch:100%;size-adjust:93.65%;ascent-override:106.78%;descent-override:27.76%;line-gap-override:0%} /* 2153 characters */
@font-face{font-family:"Plus Jakarta Sans Fallback";src:local("Arial Bold");font-style:normal;font-weight:600 900;font-stretch:100%;size-adjust:100.80%;ascent-override:102.98%;descent-override:22.02%;line-gap-override:0%} /* 1452 characters */
/* thimbletravel.com: one stylesheet for every page. The homepage is the approved mockup (design handoff
   website-home-chart, mockup version 1790723716-30b8): its tokens, layout and motion, ported as written. Changes from
   the mockup are marked "Not in the mockup". Colour tokens first. */
:root{
  color-scheme:dark;
  --bg:#191C1D; --bg-2:#202425; --bg-3:#2A2F31; --line:#33393B; --line-2:#41484B;
  --fg:#F5F3EF; --fg-2:#B7BCC0; --fg-3:#8D9397;
  --orange:#E65100; --orange-hi:#FF7A2E;
  /* Not in the mockup: white text on --orange is 3.79:1, under the 4.5:1 that small text needs, so fills that
     carry white text use this deeper orange (4.53:1). Orange text keeps --orange (Caleb, G1) */
  --orange-fill:#D04900;
  --sea:#10171b; --grid:rgba(143,178,196,.16); --chart-ink:rgba(169,196,210,.8);
  --good:#7fdca0; --bad:#ff9a8f;
  --f-head:"Plus Jakarta Sans","Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Outfit","Outfit Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hdr:72px; --gut:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* One offset for every in-page link: just under the pinned header, 12 px below it. The glide itself is script
   (glide() in src/scripts/site.ts): smooth for a link click only, so every other scroll stays instant */
html{background:var(--bg);scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--hdr) + 12px)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--f-head);letter-spacing:-.025em;margin:0;text-wrap:balance}
/* Not in the mockup: text-wrap balance. The hero's line is longer now ("Intelligent trip planner and hotel booking")
   and wraps on phones; balanced, it breaks into two even lines instead of leaving one word on the second */
.eyebrow{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-hi);text-wrap:balance}
:focus-visible{outline:2px solid var(--orange-hi);outline-offset:3px}
/* Not in the mockup: read by screen readers, not shown */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Not in the mockup: the first thing Tab reaches, shown only then */
.skip-main{position:fixed;left:12px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:70;padding:10px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip-main:focus-visible{transform:none}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:var(--hdr);display:flex;align-items:center;background:rgba(25,28,29,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.hdr .wrap{display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:auto}
.brand span{font-family:var(--f-head);font-weight:800;font-size:22px;letter-spacing:-.02em}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
.nav a{text-decoration:none}
.nav a:not(.pill):hover{color:var(--orange-hi)}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--orange-fill);color:#fff;font-weight:600;text-decoration:none}
.menu-btn{display:none;appearance:none;width:44px;height:44px;margin-right:-8px;border:0;border-radius:12px;background:none;color:var(--fg);cursor:pointer;place-items:center}
.menu-btn svg{width:24px;height:24px}
.menu{display:none}
.menu:popover-open{display:block;position:fixed;inset:calc(var(--hdr) + 8px) 12px auto auto;margin:0;width:min(260px,calc(100vw - 24px));padding:8px;border-radius:18px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--fg);box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}
.menu a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;text-decoration:none;font-weight:500}
.menu a:hover{background:var(--bg-3)}
.brand span,.pill{white-space:nowrap}
@media (max-width:760px){.nav .hide-sm{display:none}.menu-btn{display:grid}.hdr .wrap{gap:12px}.nav{gap:4px}.brand{gap:8px}.brand span{font-size:18px}.brand img{width:38px}.pill{height:38px;padding:0 14px;font-size:14.5px}}
@media (max-width:359px){.brand span{display:none}}

/* Hero on chart paper */
.hero{position:relative;text-align:center;padding-block:clamp(64px,10vw,128px) clamp(56px,8vw,96px);background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 40%,var(--sea) 100%);overflow:hidden}
/* The hero's grid is the top of the same chart: the story's lines and coastline continue up into it, so there is no
   seam where the two meet (src/scripts/story.ts draws both). With reduce motion on it keeps faint lines only */
.hero-grid{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.45) 60%,transparent);mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.45) 60%,transparent)}
.hero .wrap{position:relative;display:grid;justify-items:center;gap:22px}
.hero h1{font-size:clamp(32px,10.2vw,104px);line-height:.98;font-weight:800}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{max-width:34ch;margin:0;color:var(--fg-2);font-size:clamp(17px,1.6vw,20px)}
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.store{display:inline-block;border-radius:10px;line-height:0}
.store img{height:52px;width:auto}
.store:hover img{filter:brightness(1.2)}
.hero .note{margin:0;color:var(--fg-3);font-size:14.5px}
.hero .note b{color:var(--good);font-weight:600}
.hint{margin-top:14px;color:var(--chart-ink);font-size:13px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
/* Not in the mockup: the mockup had two @keyframes named nudge and the later one drew both arrows; that one, named once */
.hint svg{width:14px;height:14px;animation:nudge 1.6s var(--ease) 3}
@keyframes nudge{0%,100%{transform:none}45%{transform:translateY(4px)}}

/* The chart story. Without motion (reduce motion on, or no script) it is the four screens in a plain row; the sticky
   story below applies only when the script runs and reduce motion is off */
.story{position:relative;background:var(--sea)}
.stage{position:relative}
.fx{position:absolute;inset:0;pointer-events:none;display:none}
.stage-in{position:relative;z-index:3;height:100%;display:none;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px)}
.copy{align-self:center;max-width:420px;display:grid;gap:18px;padding:26px 24px;border-radius:22px;background:rgba(16,23,27,.84);border:1px solid rgba(143,178,196,.22)}
.copy h2{font-size:clamp(28px,3vw,40px);line-height:1.05}
.beats{display:grid}
.beat{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.beat.on{opacity:1;transform:none}
.beat h3{font-size:22px;line-height:1.2;display:flex;gap:12px;align-items:baseline}
.beat h3 .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--orange-fill);color:#fff;font-size:14px;font-family:var(--f-body);font-weight:600;transform:translateY(3px)}
.beat p{margin:10px 0 0 40px;color:var(--fg-2)}
.prog-row{display:flex;align-items:center;gap:14px}
.prog{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.skip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 2px;color:var(--fg-2);font:600 13.5px var(--f-body);text-decoration:none;border-radius:6px}
.skip:hover{color:#fff}
.skip svg{width:13px;height:13px}
.skip.nudge svg{animation:nudge .7s var(--ease) 2}
.prog i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.prog i b{display:block;height:100%;background:var(--orange-hi);transform-origin:left;transform:scaleX(0)}
.phone{position:relative;width:clamp(220px,22vw,300px);aspect-ratio:720/1565;max-height:calc(100svh - var(--hdr) - 48px);border-radius:40px;padding:9px;background:#0b0c0d;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.8);z-index:2}
/* Safari lets fading layers escape a plain rounded clip: clip-path clips them too, and the dark ground behind the
   screens means no light shows at the corners */
.screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;clip-path:inset(0 round 32px);isolation:isolate;background:#0b0c0d}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Not in the mockup: until the script sets each screen's opacity, only the first shows (the mockup's script ran
   before the first paint; this page's runs as a module, which can come just after it) */
.stage-in .shot + .shot{opacity:0;visibility:hidden}
/* Not in the mockup: screens 2 to 4 are not seen until about 400 px into the story, so they are fetched when the visitor
   first scrolls, or a moment after the page has loaded (src/scripts/story.ts), never ahead of the hero */
.stage-in .shot.later{display:none}
.aside{min-width:0}
.gr{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.gl{fill:rgba(169,196,210,.55);font:500 11px var(--f-body);letter-spacing:.08em}
.land{fill:#1d2529;stroke:rgba(169,196,210,.38);stroke-width:1.2;vector-effect:non-scaling-stroke}
.depth{fill:none;stroke:rgba(120,170,200,.2);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.course{fill:none;stroke:var(--orange-hi);stroke-width:2;stroke-dasharray:10 6;vector-effect:non-scaling-stroke}
.mark{fill:var(--orange-hi)}
.ring{fill:none;stroke:var(--orange-hi);stroke-width:1.5}
.lbl{fill:#e9eef1;font:600 12px var(--f-body);letter-spacing:.14em}
.lbl-2{fill:var(--chart-ink);font:500 11px var(--f-body);letter-spacing:.08em}
.river{fill:#16303b}
.street{stroke:rgba(169,196,210,.14);stroke-width:1;fill:none}
.route{fill:none;stroke:var(--orange-hi);stroke-width:2.6;stroke-dasharray:2 6;stroke-linecap:round}
.wp{fill:var(--bg);stroke:var(--orange-hi);stroke-width:2}
.wpl{fill:#f5f3ef;font:600 13px var(--f-body)}
.wpl-2{fill:rgba(233,238,241,.72);font:500 12px var(--f-body)}
.rose path{fill:none;stroke:rgba(169,196,210,.45);stroke-width:1}
.rose text{fill:var(--chart-ink);font:600 11px var(--f-body)}
/* The mockup set these as inline styles on the drawing; classes, so the Content-Security-Policy allows no inline style
   from script */
.rose-ring{fill:none;stroke:rgba(169,196,210,.35)}
.anchor-glow{fill:rgba(255,122,46,.16)}
.anchor{fill:none;stroke:var(--orange-hi);stroke-width:2;stroke-linecap:round}
.anchor-eye{fill:none;stroke:var(--orange-hi);stroke-width:1.6}
.fade{position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;pointer-events:none;opacity:0;display:none;background:linear-gradient(180deg,rgba(16,23,27,0),var(--sea))}
.still{padding-block:clamp(56px,8vw,96px) 24px}
.still-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px}
.still-grid figure{margin:0;display:grid;gap:14px;justify-items:center;text-align:center}
.still-grid .phone{width:min(230px,70vw);height:auto;max-height:none}
.still-grid figcaption h3{font-size:19px}
.still-grid figcaption p{margin:6px 0 0;color:var(--fg-2);font-size:15px}
@media (prefers-reduced-motion:no-preference){
  html.js .story{height:340vh}
  html.js .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr));height:calc(100svh - var(--hdr));overflow:hidden;isolation:isolate}
  html.js .fx,html.js .fade{display:block}
  html.js .stage-in{display:grid}
  html.js .still{display:none}
  html.js .hero-grid{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 45%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 45%,#000 100%)}
}
@media (max-width:899px){
  :root{--hdr:64px}
  .stage-in{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:12px;padding-block:14px calc(18px + var(--ck,0px))}
  .phone{width:auto;height:min(54svh,500px,100%);max-height:none;border-radius:32px;padding:7px}
  .phone .screen{border-radius:26px;clip-path:inset(0 round 26px)}
  .copy{grid-row:2;max-width:520px;width:100%;gap:10px;padding:16px 18px}
  /* Not in the mockup: hidden from sight but still read (the mockup removed it, which broke the heading order) */
  .copy h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .beat h3{font-size:19px}
  .beat p{font-size:15.5px;margin:6px 0 0}
  .aside{display:none}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){html.js .story{height:320vh}}
@media (max-width:899px) and (max-height:700px){
  .copy{padding:12px 14px;gap:8px}
  .copy .eyebrow{display:none}
  .beat h3{font-size:17px}
  .beat h3 .n{width:24px;height:24px;font-size:13px}
  .beat p{font-size:14.5px;line-height:1.45}
}

/* Sections after the story */
.sec{padding-block:clamp(72px,10vw,120px)}
.sec + .sec,.more + .sec{border-top:1px solid rgba(255,255,255,.06)}
.more{--pb:clamp(64px,8vw,104px);background:linear-gradient(180deg,var(--sea) 0,var(--bg) 160px);padding-block:clamp(48px,7vw,88px) var(--pb);overflow:hidden;isolation:isolate}
.more-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-areas:"head shot" "list shot";gap:28px clamp(32px,6vw,80px);max-width:1040px;align-items:start}
.more-head{grid-area:head;align-self:end;display:grid;gap:12px}
.more-head h2{font-size:clamp(30px,4vw,46px);line-height:1.05}
.more-head p.sub{margin:0;color:var(--fg-2);font-size:clamp(17px,1.6vw,19px)}
/* Trip Assistant: the top of a phone rising out of the section's bottom edge, on a warm glow. The answer arrives a
   beat after the question */
.assist-wrap{grid-area:shot;position:relative;align-self:end;justify-self:center;width:min(100%,400px);margin-bottom:calc(-1 * var(--pb))}
.assist-wrap::before{content:"";position:absolute;left:50%;bottom:-12%;width:190%;height:95%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(230,81,0,.30),rgba(230,81,0,0));pointer-events:none}
.assist{position:relative;margin:0;padding:10px 10px 0;border-radius:50px 50px 0 0;background:#0b0c0d;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.assist-screen{border-radius:40px 40px 0 0;overflow:hidden;clip-path:inset(0 round 40px 40px 0 0);isolation:isolate;background:#F8F9FA}
.assist img{display:block;width:100%;height:auto}
.assist .ans{transition:opacity .55s var(--ease) .35s,transform .55s var(--ease) .35s}
.assist.wait .ans{opacity:0;transform:translateY(14px)}
.more-list{grid-area:list;display:grid;gap:12px}
@media (max-width:899px){.more-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "list" "shot";gap:24px}.assist-wrap{width:min(100%,360px);margin-top:12px}}
.feat{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-content:start;padding:22px;border-radius:20px;background:var(--bg-2);border:1px solid var(--line)}
.feat .ic{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(230,81,0,.14);color:var(--orange-hi)}
.feat .ic svg{width:22px;height:22px}
.feat h3{font-size:18px;line-height:1.3}
.feat p{margin:0;color:var(--fg-2);font-size:15.5px}
.head{display:grid;justify-items:center;text-align:center;gap:12px;margin-bottom:clamp(32px,5vw,48px)}
.head h2{font-size:clamp(32px,4.4vw,52px);line-height:1.05}
.head p.sub{margin:0;color:var(--fg-2);max-width:48ch}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;max-width:880px;margin-inline:auto}
.card{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,30px);display:grid;gap:16px;align-content:start}
.card h3{font-size:24px}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:var(--fg-2)}
.card li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.card li::before{content:"";width:12px;height:7px;margin-top:8px;border-left:2px solid var(--orange-hi);border-bottom:2px solid var(--orange-hi);transform:rotate(-45deg)}
.card.best{border-color:rgba(255,122,46,.6);box-shadow:0 30px 70px -40px rgba(230,81,0,.6)}
.card .flag{position:absolute;top:-12px;right:22px;padding:3px 10px;border-radius:999px;background:var(--orange-fill);color:#fff;font-size:12.5px;font-weight:600}
.card .big{margin:-6px 0 0;font-family:var(--f-head);font-size:clamp(20px,2.2vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--fg)}
.card .big.good{color:var(--good)}
.card .small{margin:-4px 0 0;color:var(--fg-3);font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:999px;background:var(--orange-fill);color:#fff;font-weight:600;text-decoration:none;flex:1 1 auto}
.btn.light{background:var(--fg);color:var(--bg)}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;max-width:980px;margin-inline:auto}
.review{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,30px);display:grid;gap:14px;align-content:start}
.stars{display:flex;gap:3px}
.stars svg{width:18px;height:18px;fill:var(--orange-hi)}
.review h3{font-size:19px}
.review blockquote{margin:0;color:var(--fg-2);font-size:17px}
.review figcaption{color:var(--fg-3);font-size:14px}
.review figcaption b{display:block;color:var(--fg);font-weight:600}
.more-link{text-align:center;margin:26px 0 0;font-size:15px}
.more-link a{color:var(--fg-2);text-underline-offset:3px}
.more-link a:hover{color:var(--fg)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;max-width:780px;margin-inline:auto;align-items:start}
.plan{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:22px;padding:26px 24px;display:grid;gap:6px}
.plan.best{border-color:rgba(255,122,46,.6);box-shadow:0 30px 70px -40px rgba(230,81,0,.6)}
.plan .tier{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.plan.best .tier{color:var(--orange-hi)}
.plan .price{font-family:var(--f-head);font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.plan .per{color:var(--fg-3);font-size:14.5px}
.plan ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-size:15.5px}
.plan li{display:grid;grid-template-columns:16px 1fr;gap:8px}
.plan li::before{content:"";width:10px;height:6px;margin-top:8px;border-left:2px solid var(--orange-hi);border-bottom:2px solid var(--orange-hi);transform:rotate(-45deg)}
.plan .flag{position:absolute;top:-12px;right:18px;padding:3px 10px;border-radius:999px;background:var(--orange-fill);color:#fff;font-size:12.5px;font-weight:600}
.fine{text-align:center;color:var(--fg-3);font-size:14px;margin:26px auto 0;max-width:60ch}
.cta{text-align:center;display:grid;justify-items:center;gap:18px}
.cta h2{font-size:clamp(34px,5vw,60px);line-height:1.02}
.cta p{margin:0;color:var(--fg-2)}
.ess .head h2{font-size:clamp(24px,3vw,32px)}
.disclose{margin:0;font-size:14px;color:var(--fg-3)}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;max-width:1000px;margin-inline:auto}
.partner{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:10px;align-content:start;font-size:15px;color:var(--fg-2)}
.partner .logo{height:24px;width:auto;margin-bottom:6px}
.partner .logo.tall{height:28px;margin-bottom:2px}
.partner .code{color:var(--orange-hi);font-weight:600;font-size:14px}
.partner a{justify-self:start;color:var(--fg);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px}
.partner a:hover{border-color:var(--orange-hi)}
.partner a::after{content:" \2192"}

/* Footer, every page */
.ftr{border-top:1px solid rgba(255,255,255,.06);padding-block:40px 120px;color:var(--fg-3);font-size:14px}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:flex-start}
.ftr .legal p{margin:0}
.ftr .legal a{color:var(--fg-2)}
.ftr nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.ftr nav a{text-decoration:none;color:var(--fg-2)}
.ftr nav a:hover,.ftr nav button:hover{color:var(--fg)}
/* Not in the mockup: Cookie settings, a button that reads as one of the links */
.ftr nav button{appearance:none;margin:0;padding:0;border:0;background:none;color:var(--fg-2);font:inherit;cursor:pointer}

/* Quiet fade for sections below the fold, once */
.rv.pre{opacity:0;transform:translateY(16px)}
.rv{transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* Cookie choice before Analytics. It starts hidden; the script after it shows it before the first paint when the
   visitor still has to choose */
.cookie{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;width:min(760px,calc(100vw - 24px));display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px;border-radius:18px;background:rgba(32,36,37,.97);border:1px solid var(--line-2);box-shadow:0 20px 50px -20px rgba(0,0,0,.8);font-size:14.5px}
.cookie p{margin:0;flex:1 1 280px;color:var(--fg-2)}
.cookie .btns{margin:0;flex:0 0 auto}
.cookie button{appearance:none;border:1px solid var(--line-2);background:transparent;color:var(--fg);font:600 14px var(--f-body);height:40px;padding:0 18px;border-radius:999px;cursor:pointer}
.cookie button.yes{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cookie a{color:var(--fg-2)}
.cookie[hidden]{display:none}
/* Out of the way while the visitor is typing in the contact form or its send button would sit under it */
.cookie.away{transform:translate(-50%,calc(100% + 40px));visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .beat,.rv{transition:none}
  .hint svg,.skip.nudge svg{animation:none}
  .rv.pre{opacity:1;transform:none}
  .assist.wait .ans{opacity:1;transform:none}
}

/* Not in the mockup: the contact, privacy, terms and 404 pages, in the homepage's type and colours */
.page{padding-block:clamp(40px,7vw,72px) clamp(64px,9vw,112px)}
.page .wrap{max-width:760px}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--fg-2);font-size:15px;text-decoration:none}
.back:hover{color:var(--fg)}
.back svg{width:16px;height:16px}
.page h1{margin:22px 0 10px;font-size:clamp(32px,5vw,48px);line-height:1.05;font-weight:800}
.page .lead{margin:0;color:var(--fg-2);font-size:clamp(17px,1.6vw,19px)}
.doc{margin-top:28px;color:var(--fg-2);font-size:16px;line-height:1.65}
.doc section{margin-top:34px}
.doc h2{margin:0 0 12px;color:var(--fg);font-size:22px;line-height:1.25}
.doc h3{margin:18px 0 8px;color:var(--fg);font-size:18px}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px;display:grid;gap:8px}
.doc strong{color:var(--fg);font-weight:600}
.doc a{color:var(--fg);text-underline-offset:3px}
.doc a:hover{color:var(--orange-hi)}
.doc .dates{color:var(--fg-3);font-size:15px}
/* Contact form */
.form{margin-top:32px;display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{color:var(--fg-2);font-size:14.5px;font-weight:500}
.field input,.field textarea{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--fg);font:inherit;font-size:16px}
.field textarea{resize:none;min-height:150px}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--orange-hi);outline-offset:1px;border-color:transparent}
.form .btn{width:100%;height:50px;border:0;font:600 16px var(--f-body);cursor:pointer}
.form .btn:disabled{cursor:progress;opacity:.8}
.form-error{margin:0;color:var(--bad);font-size:15px;text-align:center}
.sent{margin-top:32px;padding:clamp(28px,5vw,40px);border-radius:22px;background:var(--bg-2);border:1px solid var(--line);text-align:center;display:grid;justify-items:center;gap:10px}
.sent .tick{color:var(--orange-hi);font-size:40px;line-height:1}
.sent h2{font-size:24px}
.sent p{margin:0;color:var(--fg-2)}
.sent button{appearance:none;margin-top:12px;padding:6px 4px;border:0;background:none;color:var(--orange-hi);font:600 15px var(--f-body);cursor:pointer}
.sent button:hover{text-decoration:underline}
.nf .btns{margin-top:26px;max-width:420px}