/* THE OUT LAP - shared styles for every page.
   The type, motion and section rhythm follow appie.ooo; the colours are the
   app's own: pit-wall black, start-light red, paddock cream. */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2')}

:root{
  --pit:#0E0D0C; --pit-2:#141312; --pit-3:#1A1917; --pit-line:#34312D;
  --cream:#F3EFE7; --paper:#FFFCF6; --paper-line:#E1DBCF; --sand:#CFC8BA;
  --red:#E10600; --red-ink:#FFF4EE;
  --on-pit:#F3EFE7; --on-pit-mut:#A9A49A; --on-pit-dim:#8C877D;
  --on-cream:#141312; --on-cream-mut:#3A3733; --on-cream-dim:#5E5A53;
  --sans:'Bricolage Grotesque',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--pit)}
[hidden]{display:none !important}
body{margin:0;background:var(--pit);color:var(--on-pit);font-family:var(--sans);-webkit-font-smoothing:antialiased}
main{display:block;overflow-x:clip}
a{color:inherit}
img,video{display:block;max-width:100%}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.red{color:var(--red)}
.mono{font-family:var(--mono);text-transform:uppercase}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:50;padding:12px 18px;background:var(--cream);color:var(--pit);border-radius:999px}

/* ---- the five start lights: they come on one by one, then go out ---- */
.lights{display:inline-flex;gap:.16em;vertical-align:baseline}
.lights i{display:block;width:.2em;height:.2em;border-radius:50%;background:#2B2826;box-shadow:inset 0 0 0 .02em #3A3632;animation:light 5s steps(1) infinite}
.lights i:nth-child(2){animation-name:light2}.lights i:nth-child(3){animation-name:light3}.lights i:nth-child(4){animation-name:light4}.lights i:nth-child(5){animation-name:light5}
@keyframes light {0%{background:#2B2826}10%,70%{background:var(--red);box-shadow:0 0 .18em rgba(225,6,0,.75)}70.01%,100%{background:#2B2826;box-shadow:inset 0 0 0 .02em #3A3632}}
@keyframes light2{0%,20%{background:#2B2826}20.01%,70%{background:var(--red);box-shadow:0 0 .18em rgba(225,6,0,.75)}70.01%,100%{background:#2B2826;box-shadow:inset 0 0 0 .02em #3A3632}}
@keyframes light3{0%,30%{background:#2B2826}30.01%,70%{background:var(--red);box-shadow:0 0 .18em rgba(225,6,0,.75)}70.01%,100%{background:#2B2826;box-shadow:inset 0 0 0 .02em #3A3632}}
@keyframes light4{0%,40%{background:#2B2826}40.01%,70%{background:var(--red);box-shadow:0 0 .18em rgba(225,6,0,.75)}70.01%,100%{background:#2B2826;box-shadow:inset 0 0 0 .02em #3A3632}}
@keyframes light5{0%,50%{background:#2B2826}50.01%,70%{background:var(--red);box-shadow:0 0 .18em rgba(225,6,0,.75)}70.01%,100%{background:#2B2826;box-shadow:inset 0 0 0 .02em #3A3632}}
.lights.small{gap:3px}.lights.small i{width:7px;height:7px}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 56px;background:rgba(14,13,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(243,239,231,.08)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap}
.brand .lights{font-size:36px}
.brand .by{padding-left:14px;border-left:1px solid rgba(243,239,231,.25);font-size:12px;letter-spacing:.24em;color:var(--on-pit-mut)}
.brand:hover .by{color:var(--on-pit)}
.site-head nav{display:flex;align-items:center;gap:34px;font-size:16px;font-weight:500}
.site-head nav a{text-decoration:none}
.site-head nav a:not(.pill):hover{color:var(--red)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--cream);color:var(--pit);text-decoration:none;font-weight:600;transition:background .25s,color .25s}
.pill:hover{background:var(--red);color:var(--red-ink)}

/* ---- footer (red, like appie's orange) ---- */
.site-foot{background:var(--red);color:var(--pit);padding:72px 56px 40px;display:flex;flex-direction:column;gap:56px;overflow:hidden}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;font-size:18px;font-weight:500}
.foot-top p{margin:0;max-width:380px;font-size:22px;line-height:1.35;font-weight:600}
.foot-cols{display:flex;gap:72px}
.foot-cols div{display:flex;flex-direction:column;gap:10px}
.foot-cols span{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.foot-cols a{text-decoration:none}.foot-cols a:hover{color:var(--cream)}
.wordmark{font-size:13.4vw;line-height:.8;font-weight:800;letter-spacing:-.065em;white-space:nowrap}
.wordmark span{color:var(--cream)}
.legal{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font-size:15px;font-weight:500}
.legal div{display:flex;flex-direction:column;gap:6px}
.legal .soft{opacity:.8}
.legal .fine{max-width:460px;text-align:right;opacity:.8;font-size:13px;line-height:1.5}

/* ---- shared bits ---- */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";width:40px;height:1.5px;background:currentColor}
.phone{border-radius:48px;overflow:hidden;border:8px solid #2A2826;background:var(--pit);box-shadow:0 40px 80px rgba(0,0,0,.55);aspect-ratio:1206/2622}
.phone img{width:100%;height:100%;object-fit:cover}
.store{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border-radius:999px;border:1.5px solid currentColor;font-size:16px;font-weight:600;white-space:nowrap}
.store svg{flex-shrink:0}

/* ---- contact (used on the home page and the support page) ---- */
.contact{background:var(--cream);color:var(--on-cream);padding:120px 56px 140px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
.contact-copy{grid-column:span 6;display:flex;flex-direction:column;gap:32px}
.contact-copy .eyebrow{color:var(--on-cream-dim)}
.contact-copy h2{margin:0;font-size:112px;line-height:.92;font-weight:750;letter-spacing:-.055em}
.contact-copy p{margin:0;max-width:470px;font-size:21px;line-height:1.45;color:var(--on-cream-mut)}
.contact-copy .mail{align-self:flex-start;font-size:36px;font-weight:650;letter-spacing:-.03em;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;text-decoration-color:var(--red)}
.contact-copy .mail:hover{color:var(--red)}
.contact-card{grid-column:span 6;background:var(--paper);border-radius:36px;padding:48px;border:1.5px solid var(--paper-line)}
.contact-form{display:flex;flex-direction:column;gap:26px}
.contact-form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.contact-form label,.contact-form legend{display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--on-cream-dim)}
.contact-form fieldset{margin:0;padding:0;border:none}
.contact-form legend{padding:0;margin-bottom:14px}
.field{padding:12px 2px;border:none;border-bottom:1.5px solid var(--sand);background:transparent;font-family:inherit;font-size:20px;line-height:1.4;color:var(--on-cream);text-transform:none;letter-spacing:0;border-radius:0;transition:border-color .2s}
.field:focus{outline:none;border-color:var(--red)}
textarea.field{resize:vertical;min-height:150px}
.topics{display:flex;flex-wrap:wrap;gap:10px}
.topic{padding:12px 20px;border-radius:999px;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;border:1.5px solid var(--sand);background:transparent;color:var(--on-cream);transition:background .2s,color .2s,border-color .2s}
.topic:hover{border-color:var(--on-cream)}
.topic[aria-pressed="true"]{border-color:var(--pit);background:var(--pit);color:var(--cream)}
.send{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;padding:20px 32px;border-radius:999px;border:none;background:var(--pit);color:var(--cream);font-family:inherit;font-size:18px;font-weight:650;cursor:pointer;transition:background .25s}
.send:hover{background:var(--red)}
.send[disabled]{opacity:.55;cursor:progress}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin:0;padding:14px 18px;border-radius:16px;background:#FDE7E3;color:#8A1A0E;font-size:16px;line-height:1.45}
.form-error a{font-weight:650}
.form-sent{min-height:520px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;text-align:center}
.form-sent .lights{font-size:110px}
.form-sent .lights i{animation:none;background:#1DB954;box-shadow:0 0 .18em rgba(29,185,84,.6)}
.form-sent h3{margin:0;font-size:48px;font-weight:750;letter-spacing:-.04em}
.form-sent p{margin:0;max-width:380px;font-size:19px;line-height:1.45;color:var(--on-cream-dim)}
.ghost{margin-top:8px;padding:14px 24px;border-radius:999px;border:1.5px solid var(--on-cream);background:transparent;font-family:inherit;font-size:16px;font-weight:600;color:var(--on-cream);cursor:pointer}
.ghost:hover{background:var(--on-cream);color:var(--cream)}

/* ---- text pages: support, privacy, terms ---- */
.page-hero{padding:120px 56px 72px;display:flex;flex-direction:column;gap:36px;border-bottom:1px solid var(--pit-line)}
.page-hero .eyebrow{color:var(--on-pit-mut)}
.page-hero h1{margin:0;font-size:132px;line-height:.9;font-weight:750;letter-spacing:-.055em}
.page-hero .lede{margin:0;max-width:640px;font-size:22px;line-height:1.45;color:var(--on-pit-mut)}
.page-hero .updated{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-pit-dim)}
.prose{padding:80px 56px 140px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
.prose-body{grid-column:4 / span 7;max-width:760px}
.prose h2{margin:56px 0 14px;padding-top:24px;border-top:1px solid var(--pit-line);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.prose h2:first-child{margin-top:0}
.prose h2 span{display:block;margin-bottom:10px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.24em;color:var(--red)}
.prose p,.prose li{font-size:18px;line-height:1.65;color:#C9C6BB}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--on-pit);text-decoration-color:var(--red);text-underline-offset:4px;overflow-wrap:anywhere}
.prose a:hover{color:var(--red)}
.prose strong,.prose b{color:var(--on-pit);font-weight:650}

/* ---- motion that only runs where it's supported ---- */
@supports (animation-timeline: view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  @keyframes rise{from{opacity:0;translate:0 64px}to{opacity:1;translate:0 0}}
}

@media (max-width:1100px){
  .site-head{padding:18px 32px}
  .contact-copy h2{font-size:88px}
  .page-hero h1{font-size:104px}
  .prose-body{grid-column:3 / span 9}
}
@media (max-width:820px){
  .site-head{padding:14px 20px}
  .site-head .m-hide{display:none}
  .brand{font-size:12px;letter-spacing:.26em;gap:10px}
  .brand .lights{font-size:28px}
  .brand .by{display:none}
  .site-head .pill{padding:10px 16px;font-size:14px}
  .site-foot{padding:56px 20px 28px;gap:40px}
  .foot-top{flex-direction:column}
  .foot-cols{gap:48px}
  .wordmark{font-size:13.6vw}
  .legal{flex-direction:column;align-items:flex-start;gap:16px}
  .legal .fine{text-align:left}
  .contact{grid-template-columns:minmax(0,1fr);padding:84px 20px 88px;gap:44px}
  .contact-copy,.contact-card{grid-column:auto}
  .contact-copy h2{font-size:17vw}
  .contact-copy p{font-size:19px}
  .contact-copy .mail{font-size:24px}
  .contact-card{padding:28px 22px;border-radius:28px}
  .contact-form .two{grid-template-columns:minmax(0,1fr)}
  .form-sent{min-height:380px}
  .page-hero{padding:72px 20px 48px;gap:24px}
  .page-hero h1{font-size:15vw;line-height:.92}
  .page-hero .lede{font-size:19px}
  .prose{grid-template-columns:minmax(0,1fr);padding:48px 20px 88px}
  .prose-body{grid-column:auto}
  .prose h2{font-size:24px;margin-top:44px}
  .prose p,.prose li{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lights i,.reveal{animation:none !important}
  .lights i{background:var(--red)}
}