/* DressMatch look (marketing.md → Look): calm, clean, product first. One stylesheet for `www`
   and `my.`; both hosts allow styles and fonts from 'self' only, so nothing here may come
   from a CDN, and pages carry no inline styles. Phone first: wider screens only widen. */

@font-face {
  font-family: "Plus Jakarta Sans";
  /* Variable weight, Latin subset; OFL (fonts/plus-jakarta-sans-OFL.txt) */
  src: url("/static/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #fff;
  --mist: #d3e9ec;
  --mist-soft: #f0f7f8;
  --ink: #25282f;
  --ink-soft: #3a4048;
  --mute: #626a74;
  --line: #e1e6e9;
  --sage: #7f9c8f;
  --ok: #3c7a5f;
  --radius: 10px;
  --radius-card: 18px;
  --gutter: 18px;
  --measure: 640px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- type ---------- */

h1, h2, h3 { font-weight: 800; letter-spacing: -.025em; margin: 0 0 14px; }
h1 { font-size: 33px; line-height: 1.12; letter-spacing: -.03em; }
h2 { font-size: 24px; line-height: 1.2; }
h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 4px; }
p { margin: 0 0 14px; }
a { color: var(--ink); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-card); }

@media (min-width: 720px) {
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
}

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

.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--gutter);
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto;
}

.wordmark { font-weight: 800; font-size: 19px; letter-spacing: -.02em; text-decoration: none; }
.wordmark span { box-shadow: inset 0 -5px 0 var(--mist); }

main {
  display: block;
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto;
  padding: 24px var(--gutter) 32px;
}

/* The powder-aqua band at the top of a page, with a faint white grid. */
.band {
  background-color: var(--mist);
  background-image:
    linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 22px 22px;
}

.band-inner {
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto;
  padding: 28px var(--gutter) 30px;
}
.band-inner > :last-child { margin-bottom: 0; }
.band-inner p { color: var(--ink-soft); }

/* A call to action followed by more on the page (an ending's guide, then the waitlist). */
.button + form, .button + p { margin-top: 18px; }

footer {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto;
  padding: 22px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--mute);
}
footer a { color: var(--mute); }

/* ---------- buttons: charcoal pills ---------- */

button, .button {
  display: block; width: 100%;
  padding: 16px 20px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: 600 15px/1.2 var(--font); text-align: center; text-decoration: none;
  cursor: pointer;
}
button:hover, .button:hover { background: #000; }
button:focus-visible, .button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }

.button.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.button.line:hover { background: var(--mist-soft); }

/* ---------- forms ---------- */

form { margin: 0; }

label { display: block; margin: 0 0 16px; font-weight: 600; font-size: 14px; }

/* Text fields by name, not "every input but…": a radio caught by this rule grew to full
   width plus padding and widened the whole page on phones. An input without a type is text. */
:is(input:not([type]), input[type="text"], input[type="email"], input[type="date"]), select {
  display: block; width: 100%;
  margin-top: 6px; padding: 12px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.3 var(--font); /* 16px stops iOS zooming into the field */
}
:is(input:not([type]), input[type="text"], input[type="email"], input[type="date"]):focus, select:focus { border-color: var(--ink); }

/* A label wrapping a checkbox: a consent line, not a field. */
label:has(> input[type="checkbox"]) {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400;
}
input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--ink);
}

/* The details form and the endings live in an iframe from `my.` on a `www` page; a cross-origin
   frame can't size itself to its content, so it is tall enough for the longest form. */
iframe {
  display: block; width: 100%; min-height: 1100px;
  border: 0;
}
/* The framed page brings its own gutter. */
main.framing { padding-left: 0; padding-right: 0; }
main.framing > img { margin: 0 var(--gutter) 16px; max-width: calc(100% - 2 * var(--gutter)); }

/* ---------- pieces ---------- */

.card {
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(37, 40, 47, .05);
}

.muted { color: var(--mute); font-size: 14px; }

#spots-left { color: var(--mute); font-size: 14px; text-align: center; margin-top: 10px; }

/* The cookie banner: a floating card; Accept and Reject look the same (the ICO asks for an
   equally easy refusal). */
#cookie-banner {
  position: fixed; z-index: 10;
  left: 12px; right: 12px; bottom: 12px;
  max-width: 420px; margin: 0 auto;
  padding: 16px;
  background: var(--bg); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .16);
  font-size: 14px;
}
#cookie-banner p { margin-bottom: 4px; }
.cookie-choice {
  margin-top: 8px; padding: 12px; border-radius: var(--radius);
  background: var(--mist); color: var(--ink);
}
.cookie-choice:hover { background: #c2dfe3; }

/* ---------- Plans ---------- */

/* Every Plan in a list. A card is selected by its radio (the whole card is its label's
   target), and the button below shows the selected Plan's link: no script. */
.plan-list { margin: 0 0 32px; }
.plan-card { position: relative; margin: 0 0 12px; border-width: 1.5px; }
.plan-card:has(input:checked) { border-color: var(--ink); box-shadow: 0 6px 20px rgba(37, 40, 47, .10); }
.plan-card input[type="radio"] {
  position: absolute; top: 20px; right: 18px; margin: 0;
  width: 20px; height: 20px; accent-color: var(--ink);
}
.plan-card label { display: block; margin: 0 0 10px; padding-right: 32px; cursor: pointer; font-size: 16px; }
/* The whole card selects: the label stretched over it, above the tick rows, which are
   positioned for their ticks and would otherwise take the click. */
.plan-card label::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.plan-card { cursor: pointer; }
.plan-card:has(input:focus-visible) { outline: 3px solid var(--sage); outline-offset: 2px; }
.plan-name { display: block; font-weight: 700; font-size: 17px; }
.plan-card .price { display: block; margin: 6px 0 0; }
.plan-card ul.ticks, .plan-card p:last-child { margin-bottom: 0; }
.plan-card ul.ticks + p { margin-top: 12px; }

.plan-actions { position: sticky; bottom: 0; padding: 10px 0 12px; background: var(--bg); }
.plan-actions .button { display: none; }
.plan-list:has(#plan-stylist:checked) #book-stylist,
.plan-list:has(#plan-vip:checked) #book-vip { display: block; }

.price { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; margin: 6px 0 12px; }
.price small { font-weight: 400; font-size: 14px; color: var(--mute); letter-spacing: 0; }

ul.ticks { list-style: none; padding: 0; margin: 0 0 14px; }
ul.ticks li { position: relative; padding: 7px 0 7px 26px; border-bottom: 1px solid var(--line); }
ul.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 7px;
  border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(-45deg);
}

/* On a laptop the Plans sit side by side with the button centred under them. Two columns
   don't fit the reading width, so the section widens to 840px, centred on the page (never
   past the screen's gutters), with centred headings so it reads as one centred block. */
@media (min-width: 900px) {
  .plans-section h2 { text-align: center; }
  .plans-section {
    --wide: min(840px, calc(100vw - 2 * var(--gutter)));
    width: var(--wide); margin-left: calc((100% - var(--wide)) / 2);
  }
  .plan-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
  .plan-card { margin: 0; }
  .plan-actions { grid-column: 1 / -1; justify-self: center; width: min(360px, 100%); position: static; padding: 4px 0 0; }
}

/* Single services: a vertical list, one row each, the whole row a link. */
.service-list { list-style: none; margin: 0; padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-card); }
.service-list li + li { border-top: 1px solid var(--line); }
.service {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; text-decoration: none;
}
.service:hover { background: var(--mist-soft); }
.service b { display: block; }
.service .muted { display: block; }
.service-price { flex: none; text-align: right; font-weight: 800; font-size: 18px; }
.service-price span { display: block; font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* Tiles: bordered boxes, like a store's size buttons (How it works). */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
  text-decoration: none; font-size: 14px;
}
.tile:hover { border-color: var(--ink); }
.tile span { color: var(--mute); }
.tile .tile-action { margin-top: auto; padding-top: 6px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Home ---------- */

.site-header nav { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.site-header nav a { text-decoration: none; }
.pill {
  display: inline-block; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; line-height: 1;
}
.site-header nav a.pill { color: #fff; }

.eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3f5d63;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #8cc4cc; box-shadow: 0 0 0 3px rgba(140, 196, 204, .3);
}
.band-inner p.lede, .lede { font-size: 17px; color: var(--ink-soft); }

.hero { display: grid; gap: 24px; }
.hero .button { margin-top: 4px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; align-items: center; max-width: 1040px; padding-top: 48px; padding-bottom: 48px; }
  .site-header.wide { max-width: 1040px; }
  .hero .button { display: inline-block; width: auto; padding-left: 36px; padding-right: 36px; }
}

/* The example outfit: an Outfit page card in miniature, with the outfit's colours in place
   of a store photo (www shows images from our own site only). */
.example { padding: 0; overflow: hidden; box-shadow: 0 14px 34px rgba(37, 40, 47, .12); }
.example-top {
  display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-size: 12px; color: var(--mute);
}
.example-top span:last-child { margin-left: auto; }
.example-label {
  padding: 3px 8px; border-radius: 999px; background: var(--mist);
  color: var(--ink); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
.swatches { display: grid; grid-template-columns: 3fr 1fr 2fr; height: 120px; }
.swatches i { display: block; }
.swatch-green { background: #1f4d3d; }
.swatch-gold { background: #c9a35b; }
.swatch-black { background: #23232a; }
.items { list-style: none; margin: 0; padding: 6px 14px; }
.items li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.items li:last-child { border-bottom: 0; }
.items small { display: block; color: var(--mute); font-size: 12px; }
.items b { color: var(--ok); font-weight: 600; font-size: 12px; white-space: nowrap; }
.why { margin: 0 14px 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--mist-soft); font-size: 13px; }

main > section { margin: 0 0 36px; }

/* Dream outcomes: one card per moment, the moment as a small label over the line. */
.outcomes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.outcomes li { font-weight: 700; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
.outcomes .eyebrow { margin-bottom: 8px; }
ol.steps { list-style: none; margin: 0; padding: 0; }
.tile b { display: block; }

/* ---------- the site's three tabs ---------- */

.site-header { flex-wrap: wrap; gap: 10px 16px; }
.tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--mist-soft); }
.tabs a { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
          text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--ink); background: #fff; }
.tabs a[aria-current="page"] { background: var(--ink); color: #fff; }
@media (max-width: 560px) {
  .tabs { order: 3; width: 100%; justify-content: space-between; }
  .tabs a { flex: 1; text-align: center; padding: 7px 6px; font-size: 13px; }
}