/* Rad Warehouse. One stylesheet for the whole site.
   Colours, type and spacing all live here. Change once, changes everywhere. */

:root{
  --ink:#17121F;
  --cream:#FFF6EC;
  --white:#FFFFFF;
  --pink:#FF3D8B;
  --azure:#0E56C8;
  --teal:#00C2A8;
  --lilac:#C9A7FF;
  --yellow:#FFD84D;   /* the action colour. Buttons only. Nothing else. */
  --error:#A4161A;
  --muted:#463C55;
  --grey:#D9D4DE;     /* photo placeholders */
  --line:3px solid var(--ink);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2{font-family:Shrikhand,Georgia,serif;font-weight:400;line-height:1.05;margin:0;text-wrap:pretty}
h3{margin:0;font-size:1.05rem;font-weight:700}
p{margin:0;text-wrap:pretty}
img{max-width:100%;display:block}

a{color:var(--ink)}
a:hover{color:var(--azure)}

.mono{font-family:'Space Mono',ui-monospace,monospace;font-size:.78rem;line-height:1.5}

/* Visible only when tabbed to. Keyboard users skip the header. */
.skip{position:absolute;left:-9999px;top:0;z-index:20}
.skip:focus{left:8px;top:8px;background:var(--cream);color:var(--ink);
  border:var(--line);border-radius:12px;padding:10px 16px;font-weight:700;text-decoration:none}

/* ---------- layout ---------- */

.wrap{max-width:1180px;margin:0 auto}
.wrap-narrow{max-width:900px;margin:0 auto}

section{padding:28px 18px;border-bottom:var(--line)}
footer{padding:26px 18px 30px}

.stack{display:flex;flex-direction:column;gap:14px}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.stack-lg{display:flex;flex-direction:column;gap:20px}

.grid{display:grid;grid-template-columns:1fr;gap:12px}

.bg-cream{background:var(--cream)}
.bg-white{background:var(--white)}
.bg-pink{background:var(--pink)}
.bg-azure{background:var(--azure)}
.bg-teal{background:var(--teal)}
.bg-lilac{background:var(--lilac)}
.on-dark{color:var(--cream)}

/* ---------- decorative art. Purely background, never holds content. ----------
   Every piece of art lives inside a .art block marked aria-hidden. Swap the
   contents of those blocks for real artwork without touching the layout. */

.art-host{position:relative;overflow:hidden}
.art-host > *:not(.art){position:relative}
.art{position:absolute;inset:0;pointer-events:none}
.art i{position:absolute;display:block;border:var(--line)}
.blob{border-radius:50%}
.pebble{border-radius:50% 50% 50% 10px}
.dots{position:absolute;inset:0;background-image:radial-gradient(var(--ink) 1.5px,transparent 1.6px);background-size:14px 14px;opacity:.2}
.tape{position:absolute;left:0;right:0;top:0;height:14px;border:0;
  background:repeating-linear-gradient(90deg,var(--teal) 0 14px,var(--pink) 14px 28px,var(--lilac) 28px 42px,var(--azure) 42px 56px)}
.ticker{position:absolute;left:0;right:0;top:0;height:16px;border:0;
  background:repeating-linear-gradient(90deg,var(--cream) 0 14px,var(--ink) 14px 28px)}

/* ---------- panels and cards ---------- */

/* Panels always carry their own ink colour, so they never inherit .on-dark.
   Text sits on a panel, never straight onto art. */
.panel,.panel-flat,.card,.card-cream{color:var(--ink)}
.panel{background:var(--cream);border:var(--line);border-radius:22px;padding:20px;box-shadow:6px 6px 0 var(--ink)}
.panel-flat{background:var(--white);border:var(--line);border-radius:22px;padding:20px}
.card{background:var(--white);border:var(--line);border-radius:16px;padding:14px 16px}
.card-cream{background:var(--cream);border:var(--line);border-radius:18px;padding:16px}

/* Background utilities come after the panels so they win on a shared element. */
.card.bg-cream,.card-cream.bg-cream{background:var(--cream)}
.card.bg-white,.card-cream.bg-white{background:var(--white)}
.card.bg-lilac,.card-cream.bg-lilac{background:var(--lilac)}
.card.bg-teal,.card-cream.bg-teal{background:var(--teal)}
.card.bg-pink,.card-cream.bg-pink{background:var(--pink)}

/* ---------- photo placeholders ----------
   Real photos of real people go here in v2. Drop an <img> inside .photo and
   delete the label. The data-alt attribute holds the alt text to use. */

.photo{background:var(--grey);border:var(--line);border-radius:20px;
  min-height:220px;padding:18px;display:flex;align-items:center;justify-content:center;text-align:center}
.photo p{font-family:'Space Mono',ui-monospace,monospace;font-size:.8rem;line-height:1.5;color:var(--muted)}
.photo img{width:100%;height:100%;object-fit:cover;border-radius:17px}
/* A real photo sets its own height rather than being cropped to the box. */
.photo:has(img){min-height:0;padding:0;background:none;border-radius:20px;overflow:hidden}
/* On a phone the photo is a supporting detail, not a full-width block. */
.photo:has(img){max-width:200px}
.photo:has(img) img{height:auto;border-radius:0}

/* ---------- buttons and links ---------- */

.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 24px;
  background:var(--yellow);color:var(--ink);
  border:var(--line);border-radius:999px;
  font:700 1.06rem/1 'Work Sans',sans-serif;
  text-decoration:none;box-shadow:4px 4px 0 var(--ink);cursor:pointer;text-align:center;
}
.btn:hover{color:var(--ink);transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn-sm{min-height:44px;padding:0 16px;font-size:.92rem;box-shadow:none;display:inline-flex}
.btn[aria-disabled="true"]{opacity:.75;pointer-events:none}

.link{min-height:44px;display:inline-flex;align-items:center;
  font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

:focus-visible{outline:4px solid var(--azure);outline-offset:2px}
.bg-azure :focus-visible,footer :focus-visible{outline-color:var(--cream)}

/* ---------- header ---------- */

header{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;background:var(--cream);border-bottom:var(--line)}
.logo{font-family:Shrikhand,Georgia,serif;font-size:1.2rem;line-height:1;text-decoration:none}
.logo:hover{color:var(--ink)}
header nav{display:none}

/* ---------- numbered steps ---------- */

.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.steps li{background:var(--white);border:var(--line);border-radius:18px;padding:16px;display:flex;gap:12px}
.steps.on-cream li{background:var(--cream)}
.num{flex:none;width:34px;height:34px;border-radius:50%;border:var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:Shrikhand,Georgia,serif;font-size:1.05rem}
.num-1{background:var(--teal)}
.num-2{background:var(--pink)}
.num-3{background:var(--lilac)}
.num-4{background:var(--azure);color:var(--cream)}

/* ---------- plain lists ---------- */

.bullets{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:7px}
.plain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}

.tagged h3{display:flex;align-items:center;gap:10px;font-size:1.15rem;margin-bottom:12px}
.tag{flex:none;width:30px;height:30px;border-radius:9px;border:var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1rem}
.tag-yes{background:var(--teal)}
.tag-maybe{background:var(--azure);color:var(--cream)}
/* Maybe gets its own look, so it never reads as a softer yes or no. */
.card-cream.tier-maybe{border-style:dashed;background:var(--white)}
.tier-note{font-weight:600;margin:-4px 0 12px}
.tag-no{background:var(--lilac)}

.pill{display:inline-block;background:var(--teal);border:2px solid var(--ink);border-radius:999px;
  padding:7px 12px;font-family:'Space Mono',monospace;font-size:.76rem;line-height:1.3;
  text-transform:uppercase;letter-spacing:.04em}

/* ---------- questions. Tap to open. ----------
   Answers are plain HTML inside <details>, so they're in the page on load for
   Google and work with no JavaScript. Nothing animates. */

.qa-list{display:flex;flex-direction:column;gap:10px}
.qa{background:var(--white);border:var(--line);border-radius:16px}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:14px;min-height:56px;padding:12px 16px;border-radius:13px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:1.02rem;line-height:1.35}
.qa summary::after{content:"+";content:"+" / "";flex:none;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.2rem;line-height:1}
.qa[open] summary::after{content:"\2212";content:"\2212" / "";background:var(--lilac)}
.qa > p{padding:0 16px 16px}

/* ---------- form. The calmest part of the site. ---------- */

.field{display:flex;flex-direction:column;gap:8px}
.field > label,fieldset legend{font-size:1.02rem;font-weight:700;padding:0}
.hint{font-size:.9rem;line-height:1.45;color:var(--muted)}
.optional{font-weight:400;color:var(--muted)}
fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px}

input[type="text"],input[type="tel"],input[type="email"],textarea{
  width:100%;min-height:52px;
  font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:2px solid var(--ink);border-radius:14px;padding:12px 14px;
}
textarea{min-height:0;line-height:1.45;resize:vertical}
input:focus,textarea:focus{border-color:var(--azure)}

.choice{display:flex;align-items:center;gap:12px;min-height:56px;
  background:var(--white);border:2px solid var(--ink);border-radius:14px;
  padding:12px 14px;font-size:1rem;line-height:1.35;cursor:pointer}
.choice input{flex:none;width:24px;height:24px;accent-color:var(--azure)}
.choice:has(input:checked){background:#E6EEFB}

/* error state. Always an icon plus words, never colour on its own. */
.msg{display:flex;gap:10px;align-items:flex-start}
.msg p{font-size:.98rem;line-height:1.4;font-weight:600;color:var(--error)}
.bang{flex:none;width:24px;height:24px;border-radius:50%;background:var(--error);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.92rem}
.summary{display:flex;gap:12px;align-items:flex-start;background:var(--white);
  border:3px solid var(--error);border-radius:16px;padding:14px}
.summary .bang{width:28px;height:28px;font-size:1.05rem}
.summary p{margin:0;font-size:1.02rem;line-height:1.4;font-weight:600;color:var(--error)}
.summary:focus-visible{outline-color:var(--error)}
[hidden]{display:none !important}
.invalid input[type="text"],.invalid input[type="tel"],.invalid input[type="email"],.invalid textarea,
.invalid .choice{border:3px solid var(--error)}

/* ---------- footer ---------- */

footer{background:var(--ink);color:var(--cream)}
footer a{color:var(--cream)}
footer a:hover{color:var(--teal)}
footer .legal{display:flex;flex-direction:column;gap:6px;color:rgba(255,246,236,.88)}

/* ---------- type scale, phone ---------- */

h1{font-size:2.05rem}
h2{font-size:1.72rem}
.hero h1{font-size:2.1rem}

/* ---------- desktop ---------- */

@media (min-width:900px){
  body{font-size:18px}
  section{padding:60px 56px}
  footer{padding:60px 56px 48px}

  header{padding:18px 56px;gap:28px}
  header nav{display:flex;align-items:center;gap:28px}
  header nav a{font-weight:600;text-decoration:none;padding-bottom:2px}
  header nav a.n1{border-bottom:3px solid var(--teal)}
  header nav a.n2{border-bottom:3px solid var(--pink)}
  header nav a.n3{border-bottom:3px solid var(--azure)}
  .btn-sm{min-height:48px;padding:0 24px;font-size:1rem;box-shadow:4px 4px 0 var(--ink)}
  header .btn-sm:hover{box-shadow:3px 3px 0 var(--ink)}

  h1{font-size:4rem}
  h2{font-size:2.8rem}
  .hero h1{font-size:3.9rem}
  .logo{font-size:1.6rem}

  .panel,.panel-flat{padding:40px;border-radius:28px;box-shadow:10px 10px 0 var(--ink)}
  .panel-flat{box-shadow:none}
  .card,.card-cream{padding:22px;border-radius:20px}

  .btn{min-height:60px;padding:0 34px;font-size:1.2rem;box-shadow:5px 5px 0 var(--ink)}
  .btn-inline{display:inline-flex}

  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .steps{flex-direction:row}
  .steps li{flex:1;flex-direction:column;gap:12px}
  .plain.grid-3,.plain.grid-2{display:grid}
  .num{width:44px;height:44px;font-size:1.3rem}
  .bullets{padding-left:22px;gap:8px}
  .pill{font-size:.82rem;padding:9px 16px}

  .hero-panel{align-items:flex-start;padding:56px 64px}
  .hero-panel h1{font-size:5.2rem;max-width:15ch}
  .hero-panel > p:not(.mono){max-width:40em;font-size:1.12rem}
  .hero-panel .btn{min-width:320px}
  .photo{min-height:420px}
  .photo-small{min-height:300px}
  .photo:has(img){min-height:0;max-width:none}

  .cta-row{display:flex;flex-direction:row;align-items:center;gap:32px;flex-wrap:wrap}
  .split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px;align-items:center}
  .form-card{max-width:820px;margin:0 auto}
  .qa summary{padding:16px 22px}
  .qa > p{padding:0 22px 20px}
  .choices-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .choices-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  footer .cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px;padding-top:20px}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}