/* The website's styles, built from Figma "Website v3" (node 6257-7246).
   Desktop values are the 1920-wide frames; phones and tablets reflow from them.
   privacy.html in the project root keeps its own styles for the app; the site's privacy page is built from it into this layout. */
:root{
  --ink:#0A2538;--cream:#F4EFE6;--paper:#FBF8F2;--coral:#E25A43;--sky:#7FC3E4;--sand:#EFDAB0;
  --ink-88:rgba(10,37,56,.88);--ink-82:rgba(10,37,56,.82);--ink-80:rgba(10,37,56,.8);--ink-75:rgba(10,37,56,.75);
  --ink-70:rgba(10,37,56,.7);--ink-65:rgba(10,37,56,.65);--ink-60:rgba(10,37,56,.6);--ink-55:rgba(10,37,56,.55);
  --display:'Bagel Fat One', ui-rounded, system-ui, sans-serif;--text:'Gabarito', ui-sans-serif, system-ui, sans-serif;
  --gutter:clamp(20px, 6.25vw, 120px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--cream)}
body{color:var(--ink);font:600 16px/1.5 var(--text);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:14px}
img{display:block}

/* paper grain: multiplied over the page colour, under everything else (Figma "Paper grain", 16%) */
.grain::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(img/grain.webp) 0 0/256px 256px;mix-blend-mode:multiply;opacity:.16}

/* nav: Web / Nav on the cream Nav bar */
.nav{position:relative;z-index:5;background:var(--cream);box-shadow:0 6px 18px rgba(10,37,56,.1);padding:24px var(--gutter)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;max-width:1680px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;font:400 32px/1 var(--display);color:var(--ink);text-decoration:none;white-space:nowrap}
.brand img{height:52px;width:auto}
.links{display:flex;align-items:center;gap:36px}
.links a{position:relative;font:700 18px/1 var(--text);color:var(--ink-75);text-decoration:none;padding:8px 0 12px}
.links a::after{content:'';position:absolute;left:50%;bottom:0;width:28px;height:3px;margin-left:-14px;border-radius:2px;background:var(--coral);opacity:0}
.links a[aria-current="page"]{color:var(--ink)}
.links a[aria-current="page"]::after{opacity:1}
.links a:not(.cta):hover{color:var(--ink)}
.links .cta{background:var(--ink);color:var(--cream);font-size:17px;padding:15px 24px;border-radius:999px;white-space:nowrap}
.links .cta::after{display:none}

/* pills: eyebrow, callout and tag */
.pill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;font:700 16px/1.2 var(--text);color:var(--ink)}
.pill img{flex:none}
.eyebrow{background:rgba(244,239,230,.8);padding:9px 18px 9px 16px}
.callout{background:var(--paper);padding:11px 18px 11px 16px;font-size:15px;box-shadow:0 8px 22px rgba(10,37,56,.14)}
.tag{background:var(--paper);padding:9px 16px 9px 14px;gap:8px;font-size:14px;white-space:nowrap;box-shadow:0 6px 16px rgba(10,37,56,.14)}

/* store buttons (Figma placeholders; swap for the official badges once the listings are live) */
.stores{display:flex;flex-wrap:wrap;gap:16px}
.store{background:var(--ink);color:var(--cream);border-radius:16px;padding:12px 30px 14px 26px;white-space:nowrap}
.store small{display:block;font:600 14px/1.2 var(--text);color:rgba(244,239,230,.8)}
.store b{display:block;font:700 26px/1.2 var(--text)}

/* sand footer: Web / Sand footer */
.sand{position:relative;margin-top:auto;height:168px;overflow:hidden}
.sand>img{position:absolute;inset:0;width:100%;height:100%}
.sand .in{position:absolute;left:var(--gutter);right:var(--gutter);top:108px;display:flex;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;font:600 14px/1.3 var(--text);color:var(--ink-70)}
.sand .in a{text-decoration:none}
.sand .in a:hover{text-decoration:underline}

/* ---------- coming soon: Website v3 · 1 · Landing · Safe for work ---------- */
.hero{position:relative;flex:1;display:flex;flex-direction:column;background:#6DB6DE;overflow:hidden;isolation:isolate}
.hero>.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;z-index:-2}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(img/grain.webp) 0 0/256px 256px;mix-blend-mode:multiply;opacity:.16}
.hero .nav{position:absolute;top:0;left:0;right:0}
.copy{display:flex;flex-direction:column;align-items:flex-start}
.copy h1{position:relative;isolation:isolate;font:400 94px/.98 var(--display);letter-spacing:-.015em;margin:28px 0 24px;white-space:nowrap}
.copy h1>span{display:block}
/* Figma Brush stroke: 370×30 at (462, 172) in the 94px headline, i.e. measured from the top of the second line */
.copy h1>span:last-child{position:relative}
.copy h1>span:last-child::before{content:'';position:absolute;z-index:-1;left:4.915em;top:.851em;width:3.936em;height:.319em;background:url(img/brush-stroke.svg) 0 0/100% 100% no-repeat}
.copy .lede{font:600 22px/1.45 var(--text);color:var(--ink-88);max-width:700px}
.copy .note{font:700 17px/1.3 var(--text);color:var(--ink-75);margin:12px 0 32px}
.art{position:relative}
.temp{position:absolute;font:400 270px/normal var(--display);letter-spacing:-.035em;white-space:nowrap;color:var(--ink);user-select:none}
.phone{position:absolute;background:var(--ink);padding:10px;border-radius:50px;box-shadow:0 30px 60px -10px rgba(10,37,56,.28)}
.phone img{width:100%;height:auto;border-radius:40px}
.notif{position:absolute;display:flex;align-items:flex-start;gap:16px;background:var(--paper);border-radius:24px;padding:16px 22px 16px 16px;box-shadow:0 18px 40px rgba(10,37,56,.22)}
.notif img{height:46px;width:auto;flex:none;margin-right:-6px}
.notif p{font:600 15px/1.35 var(--text);color:var(--ink-75)}
.notif .when{font:700 12px/1.2 var(--text);color:var(--ink-55);letter-spacing:.02em}
.notif .title{font:700 18px/1.25 var(--text);color:var(--ink);margin:3px 0}
.art-callout{position:absolute;white-space:nowrap}
.hero .foot{font:600 14px/1.3 var(--text);color:var(--ink-70)}
.hero .foot a{text-decoration:none}

/* desktop: the Figma frame scaled to the window's width as one picture, so the painted beach, the phone and the 27°
   keep their places. A window wider than 16:9 scrolls a little; a taller one shows more sky under the nav. */
@media (min-width:1100px) and (min-aspect-ratio:3/2) and (min-height:620px){
  .hero{container-type:inline-size;min-height:100vh;min-height:max(100svh, 56.25vw)}
  .hero>.scene{top:auto;bottom:0;height:56.25cqw;object-fit:fill}
  .stage{--u:calc(100cqw / 1920);position:absolute;left:0;bottom:0;width:100%;height:56.25cqw}
  .stage .copy{position:absolute;left:calc(var(--u) * 120);top:calc(var(--u) * 150);width:calc(var(--u) * 885)}
  .stage .copy h1{font-size:calc(var(--u) * 94);margin:calc(var(--u) * 28) 0 calc(var(--u) * 24)}
  .stage .copy .lede{font-size:max(16px, calc(var(--u) * 22));max-width:max(440px, calc(var(--u) * 700))}
  .stage .copy .note{font-size:max(14px, calc(var(--u) * 17));margin:calc(var(--u) * 12) 0 calc(var(--u) * 32)}
  .stage .eyebrow{font-size:max(14px, calc(var(--u) * 16))}
  .stage .store{padding:calc(var(--u) * 12) calc(var(--u) * 30) calc(var(--u) * 14) calc(var(--u) * 26);border-radius:calc(var(--u) * 16)}
  .stage .store small{font-size:max(12px, calc(var(--u) * 14))}
  .stage .store b{font-size:max(19px, calc(var(--u) * 26))}
  .stage .temp{left:calc(var(--u) * 1011.5);top:calc(var(--u) * 292);font-size:calc(var(--u) * 270)}
  .stage .art-callout{left:calc(var(--u) * 1036);top:calc(var(--u) * 650);font-size:max(13px, calc(var(--u) * 15))}
  .stage .phone{left:calc(var(--u) * 1474);top:calc(var(--u) * 232);width:calc(var(--u) * 347.76);padding:calc(var(--u) * 10.08);border-radius:calc(var(--u) * 50.4)}
  .stage .phone img{border-radius:calc(var(--u) * 40.3)}
  .stage .notif{left:calc(var(--u) * 1262);top:calc(var(--u) * 836);width:max(330px, calc(var(--u) * 380))}
  .stage .foot{position:absolute;left:calc(var(--u) * 120);top:calc(var(--u) * 1040);font-size:max(12px, calc(var(--u) * 14))}
}

/* phones, tablets and portrait windows: the same pieces, stacked */
@media not all and (min-width:1100px) and (min-aspect-ratio:3/2) and (min-height:620px){
  .hero .nav{position:relative}
  .stage{flex:1;display:flex;flex-direction:column;padding:clamp(28px, 6vw, 56px) var(--gutter) 0}
  .copy h1{font-size:min(94px, calc((100vw - 2 * var(--gutter)) / 9.3));margin:22px 0 20px}
  .copy .lede{font-size:clamp(17px, 2.6vw, 22px)}
  .copy .note{font-size:clamp(15px, 2vw, 17px);margin:12px 0 28px}
  .art{container-type:inline-size;width:100%;max-width:640px;margin:36px auto 0;aspect-ratio:390/470}
  .temp{left:-1cqw;top:20cqw;font-size:31cqw}
  .phone{right:2cqw;top:2cqw;width:52cqw;padding:2cqw;border-radius:11cqw}
  .phone img{border-radius:9cqw}
  .art-callout{left:0;top:66cqw;z-index:1;font-size:clamp(12px, 2.6cqw, 15px);padding:9px 14px 9px 12px}
  .notif{left:0;right:10cqw;bottom:8cqw;max-width:380px;padding:14px 18px 14px 14px;gap:14px}
  .hero .foot{padding:18px var(--gutter) 22px}
}
@media (max-width:599px){ .art-callout{display:none} }

/* ---------- inner pages: privacy, support, 404 ---------- */
.page{flex:1;position:relative;padding:52px var(--gutter) 64px}
.page>.in{max-width:1680px;margin:0 auto}
.kicker{font:700 14px/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.headline{font:400 clamp(44px, 6vw, 84px)/1 var(--display);letter-spacing:-.015em}
.headline .alt{display:block;color:var(--coral)}
.intro{font:600 clamp(18px, 1.6vw, 24px)/1.45 var(--text);color:var(--ink-80);max-width:980px}
.card{background:var(--paper);border-radius:28px;padding:clamp(24px, 2.4vw, 36px)}
.card h2{font:400 clamp(24px, 2vw, 30px)/1.2 var(--display);margin-bottom:14px}
.card p{font:600 18px/1.5 var(--text);color:var(--ink-80)}
.card p+p{margin-top:10px}
.dark{background:var(--ink);color:var(--cream)}
.dark p{color:rgba(244,239,230,.92)}
.dots{list-style:none;display:flex;flex-direction:column;gap:18px}
.dots li{display:flex;gap:14px;font:600 18px/1.45 var(--text);color:rgba(244,239,230,.92)}
.dots li::before{content:'';flex:none;width:10px;height:18px;background:url(img/dot-list.svg) 0 0/10px 18px no-repeat}
.btn{display:inline-block;background:var(--ink);color:var(--cream);font:700 17px/1.2 var(--text);padding:14px 20px;border-radius:16px;text-decoration:none}
.balls{position:absolute;pointer-events:none;height:auto}

/* privacy: Website v3 · 4 · Privacy policy */
.privacy{display:grid;grid-template-columns:minmax(0, 516px) minmax(0, 1040px);justify-content:space-between;gap:48px clamp(40px, 7.5vw, 144px)}
.privacy .summary{position:relative}
.privacy h1{font:400 clamp(60px, 5vw, 96px)/.94 var(--display);letter-spacing:-.015em}
.privacy .eff{font:600 18px/1.3 var(--text);color:var(--ink-65);margin:18px 0 40px}
.privacy .short{padding:36px 36px 40px}
.privacy .short h2{font:400 28px/1.2 var(--display);margin-bottom:18px}
.privacy .same{font:600 17px/1.5 var(--text);color:var(--ink-65);margin-top:28px;max-width:20em}
.privacy .summary .balls{left:416px;top:-86px;width:213px}
.privacy .summary .tag{position:absolute;left:436px;top:149px}
.policy{columns:2 440px;column-gap:40px;padding-top:12px}
.policy section{break-inside:avoid;margin-bottom:40px}
.policy h2{font:400 24px/1.25 var(--display);margin-bottom:12px}
.policy p,.policy li{font:600 16px/1.52 var(--text);color:var(--ink-82)}
.policy p+p,.policy p+ul,.policy ul+p{margin-top:12px}
.policy ul{list-style:none}
.policy li::before{content:'• '}
.policy .meta{color:var(--ink)}
@media (max-width:1199px){
  .privacy{grid-template-columns:minmax(0, 1fr)}
  .privacy .summary{max-width:560px}
}
@media (max-width:720px){
  .privacy .summary .balls{left:auto;right:-8px;top:-96px;width:clamp(96px, 28vw, 150px)}
  .privacy .summary .tag{display:none}
  .privacy .short{padding:26px 24px 30px}
  .dots li{font-size:17px}
}

/* support (no Figma frame: built from the Why we made it page's hero, cards and helpline card) */
.support-hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:clamp(28px, 5vw, 96px) 0 clamp(40px, 5vw, 72px)}
.support-hero .balls{right:0;top:-110px;width:clamp(110px, 14vw, 213px)}
.support{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:24px;align-items:start}
.support .contact h2{color:var(--cream)}
.support .contact .mail{display:inline-block;font:400 clamp(24px, 2.2vw, 32px)/1.15 var(--display);color:var(--cream);margin:2px 0 18px;word-break:break-word}
.support .contact .dots{gap:12px;margin-top:14px}
.faq{display:flex;flex-direction:column;gap:16px}
.faq details{background:var(--paper);border-radius:28px}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:24px 72px 24px clamp(24px, 2.4vw, 36px);font:400 clamp(20px, 1.6vw, 24px)/1.25 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:24px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16h12M16 10v12' stroke='%23F4EFE6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/32px no-repeat}
.faq details[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16h12' stroke='%23F4EFE6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.faq details>div{padding:0 clamp(24px, 2.4vw, 36px) 28px}
.faq p,.faq li{font:600 17px/1.5 var(--text);color:var(--ink-80)}
.faq p+p,.faq p+ul,.faq ul+p{margin-top:10px}
.faq ul{padding-left:1.2em}
.faq li+li{margin-top:4px}
.helpline{margin-top:24px}
.helpline .btn{margin-top:18px}
@media (max-width:999px){ .support{grid-template-columns:minmax(0, 1fr)} }

/* 404 */
.lost{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:clamp(48px, 8vw, 128px) 0}
.lost .balls{right:4%;top:-110px;width:clamp(110px, 14vw, 213px)}
.lost .row{display:flex;flex-wrap:wrap;gap:12px 28px;font:700 18px/1.3 var(--text)}

/* phones: nav and footer */
@media (max-width:760px){
  .nav{padding:14px var(--gutter)}
  .nav .in{min-height:48px;gap:12px}
  .brand{font-size:24px;gap:6px}
  .brand img{height:40px}
  .links{gap:18px}
  .links a{font-size:16px;padding:6px 0 10px}
  .links .cta{display:none}
  .stores{gap:12px}
  .store{padding:10px 22px 12px 18px}
  .store b{font-size:21px}
  .sand{height:auto;padding-top:64px}
  .sand>img{height:168px;top:0;bottom:auto}
  .sand .in{position:relative;left:auto;right:auto;top:auto;padding:0 var(--gutter) 22px;flex-direction:column;gap:6px}
  .card p{font-size:17px}
}
@media (max-width:380px){ .brand{font-size:21px} .brand img{height:36px} .links{gap:14px} .links a{font-size:15px} }