/* ashybines.com — shared styles. Palette pulled from Ashy's own feed:
   cream interiors, blush (She Rises set), coral activewear. */
:root {
  --cream: #fbf5ee;
  --paper: #ffffff;
  --ink: #231b17;
  --ink-soft: #3a2c26;     /* ink hover, dark photo backing */
  --muted: #6e625b;
  --on-ink-soft: #cfc3ba;  /* secondary text on ink (9.8:1) */
  --line: #eadfd5;
  --field-line: #958880;   /* form field borders (3.4:1 on white) */
  --blush: #f6dcd7;
  --coral: #ee5d48;
  --coral-ink: #c4412d;   /* coral dark enough for text and buttons (5:1 on white) */
  --coral-deep: #a93522;   /* coral hover and pressed, eyebrows on blush */
  --butter: #f5e3a1;
  --radius: 16px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  /* Line icons for list ticks and the FAQ toggle, used as masks so they take a background colour */
  --i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--coral-ink); outline-offset: 3px; }
::selection { background: var(--butter); color: var(--ink); }
::placeholder { color: var(--muted); opacity: 1; }
input, select, textarea { caret-color: var(--coral-ink); accent-color: var(--coral-ink); }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--cream); font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Type */
h1, h2, h3 { font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: clamp(3.1rem, 1.6rem + 6vw, 6rem); line-height: .95; }
/* A hair of space before the serif accent word, so "I'm Ashy" never runs together at tight tracking */
h1 > em, h2 > em, h3 > em { margin-left: .05em; }
h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); line-height: 1.04; }
h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
h1 em, h2 em, h3 em { font-size: 1.08em; color: var(--coral-ink); }
.bg-ink h1 em, .bg-ink h2 em, .bg-ink h3 em { color: var(--blush); }
p { margin: 0 0 16px; }
p, li, figcaption { text-wrap: pretty; }
.lede { font-size: clamp(17px, 1rem + .35vw, 19px); color: var(--ink); max-width: 34em; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.45;
  text-transform: uppercase; color: var(--coral-ink); margin-bottom: 12px; text-wrap: balance;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--ink);
  font: 800 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; text-align: center;
  background: var(--ink); color: var(--cream); transition: transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:not(.btn-coral):not(.btn-ghost):not(.todo):hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-coral { background: var(--coral-ink); border-color: var(--coral-ink); color: var(--paper); }
.btn-coral:hover, .btn-coral:active { background: var(--coral-deep); border-color: var(--coral-deep); }
.bg-blush .eyebrow { color: var(--coral-deep); }
.bg-ink .eyebrow { color: var(--butter); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn svg { flex: 0 0 auto; }
.bg-ink .btn-ghost { color: var(--cream); border-color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: rgba(35, 27, 23, .06); }
.bg-ink .btn-ghost:hover { background: rgba(251, 245, 238, .12); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Launch bar (site-wide, flips at doors open via the layout's launch switch) */
.launch-bar { background: var(--butter); }
.launch-bar a {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; min-height: 44px;
  padding: 6px var(--gutter); text-align: center; text-decoration: none; font-size: 14px; line-height: 1.45; font-weight: 600;
}
.launch-bar a:focus-visible { outline-offset: -4px; }
.launch-bar b { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* Header: wordmark and actions on row 1, section links on row 2 (wraps on phones, no menu needed) */
.site-header { background: var(--cream); border-bottom: 1px solid var(--line); }
.head-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 0; }
.logo { display: inline-flex; align-items: baseline; min-height: 44px; padding: 8px 0; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--ink); }
.logo span { font-weight: 800; font-size: 23px; letter-spacing: -0.03em; }
.logo em { margin-left: 3px; font-size: 28px; color: var(--coral-ink); }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.head-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.head-nav { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 0 -9px; padding: 2px 0; }
.head-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; font-size: 14px; font-weight: 700; text-decoration: none; }
.head-nav a:hover, .head-link:hover { color: var(--coral-ink); }
.head-nav a[aria-current="page"] { color: var(--coral-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Sections */
section { padding: clamp(48px, 7vw, 96px) 0; }
.section-tight { padding: 56px 0; }
.bg-paper { background: var(--paper); }
.bg-blush { background: var(--blush); }
.bg-ink { background: var(--ink); color: var(--cream); }
.bg-ink .fine { color: var(--on-ink-soft); }
.bg-ink .fine a { color: var(--cream); }
.bg-ink .tick-line .icon { color: var(--butter); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Hero */
.hero { padding: 56px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero .lede { margin-bottom: 28px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: 14px; color: var(--muted); font-weight: 600; }
.trust span::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -.15em;
  background: var(--coral-ink); -webkit-mask: var(--i-tick) center / contain no-repeat; mask: var(--i-tick) center / contain no-repeat;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
/* On phones the hero photo leads, cropped shorter so the buttons stay on the first screen */
@media (max-width: 860px) { .hero-grid > .photo { order: -1; aspect-ratio: 4 / 3; } }

/* Photo slots — swap for real photos in /img. Never AI-generated people. */
.photo {
  position: relative; border-radius: var(--radius); overflow: hidden; background: var(--blush);
  aspect-ratio: 4 / 5; display: grid; place-items: center;
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo .slot {
  padding: 24px; text-align: center; font-size: 14px; color: var(--muted); font-weight: 600;
  border: 2px dashed rgba(35, 27, 23, .18); border-radius: 12px; margin: 20px;
}
/* An empty slot stays short; it goes back to the slot's own shape once a real <img> replaces the .slot */
.photo:has(> .slot) { aspect-ratio: 16 / 9; }
.photo.square { aspect-ratio: 1; }
.photo.wide { aspect-ratio: 16 / 10; }
.sticker {
  position: absolute; left: 16px; bottom: 16px; background: var(--paper); border-radius: 999px;
  padding: 10px 16px; font-size: 14px; font-weight: 700;
}

/* Cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
/* No card left alone on the last row: it widens to fill the row, with any photo beside the text */
@media (min-width: 641px) and (max-width: 900px) {
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-3 > .card:last-child:nth-child(odd) { flex-direction: row; }
  .grid-3 > .card:last-child:nth-child(odd) > .photo { flex: 0 0 min(40%, 380px); aspect-ratio: auto; }
}
@media (min-width: 901px) {
  .grid-3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .grid-3 > :last-child:nth-child(3n+2) { grid-column: span 2; }
  .grid-3 > .card:last-child:not(:nth-child(3n)) { flex-direction: row; }
  .grid-3 > .card:last-child:not(:nth-child(3n)) > .photo { flex: 0 0 min(40%, 380px); aspect-ratio: auto; }
}
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.card .photo { border-radius: 0; aspect-ratio: 4 / 3; }
.card-body { padding: 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body p { color: var(--ink); font-size: 16px; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.price { font-weight: 800; font-size: 22px; }
.price small { font-size: 13px; font-weight: 600; color: var(--muted); }
.tag {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px; background: var(--butter);
}
.card a.btn { min-height: 44px; padding: 0 18px; font-size: 14px; }

/* Fine print */
.fine { font-size: 13px; color: var(--muted); }

/* About */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 800px) { .about { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--coral-ink); }
.faq summary::after {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px;
  background: var(--coral-ink); -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat;
}
.faq details[open] summary::after { -webkit-mask-image: var(--i-minus); mask-image: var(--i-minus); }
.faq details p { margin: 12px 0 0; color: var(--ink); max-width: 38rem; }

/* Disclosure + footer */
.disclosure {
  background: var(--butter); border-radius: 14px; padding: 14px 18px; font-size: 14px; font-weight: 600;
}
.site-footer { background: var(--paper); color: var(--muted); padding: clamp(44px, 6vw, 72px) 0 28px; font-size: 14px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--coral-ink); }
.site-footer .logo em { font-size: 31px; }
.site-footer .logo span { font-size: 26px; }
.foot-brand p { margin: 10px 0 0; max-width: 24em; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px 40px; margin-bottom: 36px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
.foot-grid h2 { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--muted); }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li a { display: flex; align-items: center; width: fit-content; min-height: 44px; padding: 10px 0; font-size: 15px; font-weight: 600; line-height: 24px; }
.legal-line { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 6px; font-size: 13px; }
.legal-line p { margin: 0; }
/* Padding takes the tap area to 44px+ tall; the negative margin keeps the line spacing as it was */
.legal-line a { display: inline-block; padding: 13px 0; margin: -13px 0; text-decoration: underline; text-underline-offset: 3px; }

/* Sales page */
.checks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.checks li { padding-left: 34px; position: relative; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat, var(--coral-ink);
}
.weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.week { background: var(--paper); border-radius: var(--radius); padding: 22px; }
.week b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); margin-bottom: 6px; }
.week h3 { font-size: 20px; margin-bottom: 8px; }
.week p { font-size: 16px; color: var(--ink); margin: 0; }
@media (max-width: 900px) { .weeks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .weeks { grid-template-columns: 1fr; } }
.pricebox {
  max-width: 560px; margin: 0 auto; background: var(--paper); border-radius: var(--radius); padding: 36px;
  text-align: center; border: 2px solid var(--ink);
}
.pricebox .big { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 8px 0; }
.pricebox .big small { font-size: 18px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.pricebox .checks { text-align: left; margin: 24px 0; }
.pricebox .btn { width: 100%; }
.quote { background: var(--paper); border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); }
.quote p { font-size: 17px; }
.quote cite { font-style: normal; font-weight: 700; font-size: 14px; color: var(--muted); }
.legal.prose { max-width: 640px; }
.legal h2 { font-size: 24px; margin-top: 36px; letter-spacing: -0.02em; }
.legal > h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink); }
.legal ul { font-size: 18px; display: grid; gap: 8px; padding-left: 22px; margin: 0 0 16px; }
.legal a, .page-hero .lede a { text-decoration-thickness: 1.5px; }
.legal a:hover, .page-hero:not(.bg-ink) .lede a:hover { color: var(--coral-ink); }
.legal a:active, .page-hero:not(.bg-ink) .lede a:active { color: var(--coral-deep); }

/* Listen buttons, platform rows */
.platforms { display: flex; flex-wrap: wrap; gap: 10px; }
.platforms a { min-height: 46px; padding: 0 20px; font-size: 15px; }

/* Lists of episodes / posts */
.rows { display: grid; border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.row time { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.row b { font-weight: 700; min-width: 0; }
.row .go { color: var(--coral-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
a.row:hover b { color: var(--coral-ink); }
@media (max-width: 600px) { .row { grid-template-columns: 1fr auto; } .row time { grid-column: 1 / -1; } }

/* Brand grid */
.brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 800px) { .brands { grid-template-columns: 1fr 1fr; } }
.brand {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-height: 104px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
}
.brand b { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.brand span { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Media kit numbers */
.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .kit { grid-template-columns: 1fr 1fr; } }
.kit div { background: var(--paper); border-radius: 14px; padding: 18px; border: 1px solid var(--line); }
.kit b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kit span { font-size: 13px; color: var(--muted); font-weight: 600; }
.kit > * { min-width: 0; }
.kit > a.brand b { font-size: 20px; }

/* Forms */
.form { display: grid; gap: 14px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; border-radius: 14px; border: 1px solid var(--field-line); padding: 12px 16px;
  font: 500 16px var(--sans); background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--coral-ink); outline-offset: 1px; }
.form .fine, .kc-note { max-width: 65ch; }
/* The layout script adds an empty status line to every form on load; it takes no space until it has text */
.form-status:empty { position: absolute; }
.form-done { background: var(--paper); border-radius: var(--radius); padding: 28px; text-align: center; border: 2px solid var(--ink); }

/* Coming soon badge on cards */
.soon { background: var(--ink); color: var(--cream); }

/* Draft markers — remove before launch */
.todo { background: #fff3b0; outline: 2px dashed #e0b400; outline-offset: 2px; }
.btn.todo { background: var(--coral-ink); color: #fff; outline-offset: 3px; }

/* Launch 1 pages */
/* /start/, /get-started/, the home promo and the shop lineup. Blocks with data-before / data-after are
   switched at doors open by a small page script; [data-after] starts hidden, so no-JS shows the "before" state. */
.buy { display: grid; gap: 10px; justify-items: start; margin-top: 8px; }
.buy .fine { margin: 0; max-width: 34em; }
.buy .when { color: var(--ink); }
.center .buy, .pricebox .buy { justify-items: center; }
.date-line { font-weight: 700; margin-bottom: 20px; }
.prose { max-width: 38rem; }
.prose p { font-size: 18px; }

/* "What's inside" items */
.item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.item h3 { font-size: 20px; margin-bottom: 8px; }
.item p, .item li { color: var(--ink); font-size: 16px; }
.item p, .item ul { max-width: 38rem; }
.item p:last-child, .item ul:last-child { margin-bottom: 0; }
.item ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 4px; }
.item .kind { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); margin-bottom: 8px; }
.item.safe { background: var(--butter); border-color: var(--butter); }
.item.safe p, .item.safe .kind { color: var(--ink); }
.inside-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; }
.inside-grid .wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .inside-grid { grid-template-columns: 1fr; } }
.kit-items { margin-top: 32px; }
.num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--coral-ink); color: var(--paper); font-weight: 800; margin-bottom: 14px; }
.testimonial { max-width: 760px; margin: 28px auto 0; text-align: center; }
.testimonial .todo { display: inline-block; padding: 2px 6px; margin-bottom: 10px; }

/* Week by week, who it's for */
.before-start { background: var(--paper); border-radius: var(--radius); padding: 18px 22px; margin: 28px 0 16px; }
.missed { margin: 24px auto 0; font-weight: 600; max-width: 40em; }
.fits { margin-top: 32px; }
.fit { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.fit h3 { margin-bottom: 18px; }
.fit .checks { margin: 0; }
.nots { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.nots li { padding-left: 34px; position: relative; }
.nots li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf5ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 12px no-repeat, var(--ink);
}

/* Final call to action on ink */
.final .lede { margin-bottom: 24px; }
.final .buy .when { color: var(--cream); }
.final .ps { max-width: 34em; margin: 32px auto 0; }
.final .sold-by { margin: 32px auto 0; max-width: 46em; }
.final .sold-by a { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* Home promo */
.promo { align-items: center; gap: 48px; }
.promo .trust { margin-top: 0; }
.next-up { margin: 20px 0 0; }

/* Shop lineup */
.lineup .card-foot { flex-wrap: wrap; }
.card.feature { border: 2px solid var(--ink); }
.tag.free { background: var(--blush); }
.tag.open { background: var(--coral-ink); color: var(--paper); }

/* ===== Home (Claude Design, Oct 2026) ===== */
.icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Hero: photo left, text and the kit card right. On phones the text and kit come first. */
.home-hero { padding: clamp(16px, 3vw, 40px) 0 clamp(40px, 6vw, 80px); }
.hh-grid { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 28px clamp(24px, 4vw, 56px); }
.hh-photo { flex: 1 1 340px; max-width: 540px; min-width: 0; margin: 0 auto; position: relative; padding: 0 16px 16px 0; }
.hh-photo::before { content: ""; position: absolute; top: 36px; left: 36px; right: 0; bottom: 0; border-radius: var(--radius); background: var(--butter); transform: rotate(2.5deg); }
.hh-photo img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 5%; border-radius: var(--radius); background: var(--blush); }
.pin {
  position: absolute; top: 16px; left: 12px; margin: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px 9px 11px; border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 800; line-height: 1.2;
  transform: rotate(-3deg);
}
.pin .icon { width: 16px; height: 16px; color: var(--coral-ink); }
.hh-text { flex: 1.25 1 420px; min-width: 0; }
.hh-text h1 { margin: 14px 0 0; }
.hh-text .lede { margin: 18px 0 0; max-width: 32em; font-size: clamp(1.06rem, 1rem + .35vw, 1.25rem); color: var(--ink); }
.follow-line { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.follow-line b { flex: 0 0 auto; font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; }
.follow-line b em { font-size: 1.12em; color: var(--coral-ink); }
.follow-line span { flex: 1 1 240px; min-width: 0; max-width: 26em; font-size: 14px; line-height: 1.45; color: var(--muted); }
.listen-link { margin: 12px 0 0; }
.listen-link a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.listen-link .icon { width: 20px; height: 20px; color: var(--coral-ink); }

/* Kit card (the main sign-up) */
.kit-card { margin-top: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 28px); }
.kc-head { display: flex; align-items: center; gap: 18px; }
.kc-thumb { flex: 0 0 72px; position: relative; margin: 4px 6px 4px 2px; }
.page-thumb { width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; border-radius: 5px; background: var(--paper); box-shadow: 0 10px 20px -8px rgba(35, 27, 23, .45); }
.kc-thumb .page-thumb { transform: rotate(-4deg); }
.free-disc { position: absolute; top: -12px; right: -16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: var(--coral-ink); color: var(--paper); font-size: 13px; font-weight: 800; line-height: 1; transform: rotate(12deg); }
.kc-title { margin: 0; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); line-height: 1.15; letter-spacing: -0.025em; }
.kc-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.kit-list { list-style: none; margin: 18px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.kit-list li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; }
.kit-list b { flex: 0 0 44px; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; color: var(--coral-ink); font-variant-numeric: tabular-nums; }
.kc-note { margin: 16px 0 0; font-size: 16px; line-height: 1.5; }
.kit-card .form { margin-top: 14px; gap: 14px; }
.kit-card .form .two { grid-template-columns: 1fr 1.4fr; gap: 12px; }
@media (max-width: 600px) { .kit-card .form .two { grid-template-columns: 1fr; } }
.kit-card .field input { background: var(--cream); border: 1.5px solid var(--muted); }
.kit-card .fine { margin: 0; line-height: 1.55; }
.kit-card .fine a { font-weight: 700; color: var(--coral-ink); }
.optional { font-weight: 500; color: var(--muted); }

/* Follower strip */
.socials-strip { background: var(--paper); padding: clamp(20px, 3vw, 28px) 0; }
.ss-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.ss-head { flex: 1 1 200px; min-width: 0; }
.ss-head h2 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.ss-head p { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
/* Six networks: 2 × 3 on phones, 3 × 2 on tablets, one row of 6 on wide screens */
.social-list { flex: 3 1 600px; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .social-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .social-list.six { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1100px) { .social-list { grid-template-columns: repeat(6, 1fr); } }
.social-list li { display: flex; }
.social-list a { flex: 1 1 auto; display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); text-decoration: none; }
.social-list a:hover { border-color: var(--coral-ink); }
.social-list b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.social-list .net { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.social-list .net .icon { width: 16px; height: 16px; color: var(--coral-ink); }
.social-list .handle { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }

/* Free kit → A$27 pack path */
.section-head { max-width: 760px; }
.section-head h2 { margin: 10px 0 0; }
.section-head p:not(.eyebrow) { margin: 16px 0 0; max-width: 36em; font-size: 17px; color: var(--ink); }
.section-head .eyebrow { margin: 0; }
.path { list-style: none; margin: 36px 0 0; padding: 0; }
.step-free { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: clamp(16px, 2.4vw, 24px); border-radius: var(--radius); background: var(--blush); }
.sf-main { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 16px; }
.sf-main .page-thumb { flex: 0 0 64px; width: 64px; transform: rotate(-3deg); }
.sf-main h3 { margin: 6px 0 0; font-size: 20px; }
.sf-main p:last-child { margin: 4px 0 0; font-size: 16px; }
.step-free .btn { flex: 1 0 200px; max-width: 280px; }
.step-label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.step-num { display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13px; letter-spacing: 0; }
.step-num.coral { background: var(--coral-ink); color: var(--paper); }
.step-down { display: flex; align-items: center; gap: 10px; padding: 12px 0 12px 20px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--muted); }
.step-down .icon { width: 22px; height: 22px; color: var(--coral); }
.step-paid { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 36px); }
.sp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 24px; }
.doors { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; background: var(--butter); font-size: 13px; font-weight: 700; line-height: 1.35; }
.doors .icon { width: 16px; height: 16px; }
.sp-body { display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(24px, 4vw, 52px); }
.pages-fan { flex: 1 1 260px; min-width: 0; margin: 0; padding: clamp(16px, 2.4vw, 26px); border-radius: 14px; background: var(--blush); }
.pf-pages { display: flex; align-items: flex-start; gap: 12px; }
.pf-pages > .page-thumb { flex: 2 1 0; min-width: 0; border-radius: 6px; transform: rotate(-1.5deg); }
.pf-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.pf-side .page-thumb:first-child { transform: rotate(2deg); }
.pf-side .page-thumb:last-child { transform: rotate(-1.5deg); }
.pages-fan figcaption { margin-top: 14px; font-size: 13px; font-weight: 600; line-height: 1.45; }
.sp-copy { flex: 1.2 1 320px; min-width: 0; }
.sp-copy h3 { margin: 10px 0 0; font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.75rem); line-height: 1.06; letter-spacing: -0.035em; }
.sp-copy > p:not(.eyebrow) { margin: 16px 0 0; font-size: 17px; }
.sp-copy .eyebrow { margin: 0; }
.tick-line { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 16px; line-height: 1.45; }
.tick-line .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--coral-ink); }
.price-line { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.price-line p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.price-line strong { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-line span { font-size: 16px; font-weight: 600; }
.price-line .btn { margin-top: 14px; width: 100%; max-width: 340px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--coral-ink); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--coral-deep); text-decoration-thickness: 2px; }
.text-link .icon { width: 16px; height: 16px; }

/* Quick link cards */
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; }
.head-row > div { flex: 1 1 380px; min-width: 0; }
.head-row h2 { margin: 10px 0 0; }
.head-row .eyebrow { margin: 0; }
.head-row > p { flex: 0 1 420px; min-width: 0; margin: 0; font-size: 17px; color: var(--ink); }
.link-cards { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.link-cards li { display: flex; }
.link-card { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-height: 100px; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); text-decoration: none; }
.link-card:hover { border-color: var(--coral-ink); }
.link-card:active, .social-list a:active { border-color: var(--coral-ink); background: var(--blush); }
.lc-icon { flex: 0 0 76px; width: 76px; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: var(--blush); }
.lc-icon .icon { width: 30px; height: 30px; }
.lc-icon.butter { background: var(--butter); }
.lc-icon.ink { background: var(--ink); color: var(--butter); }
.lc-icon.white { background: var(--paper); border: 1px solid var(--line); color: var(--coral-ink); }
.lc-icon b { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.lc-icon small { margin-top: 3px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.lc-text { flex: 1 1 auto; min-width: 0; }
.lc-text b { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.lc-text span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.link-card > .icon { width: 20px; height: 20px; color: var(--muted); }

/* Podcast band */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(24px, 4.5vw, 64px); }
.split > * { flex: 1 1 340px; min-width: 0; }
.band-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--ink-soft); }
.bg-ink .lede { color: var(--line); }
.btn-pair { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn-pair .btn { flex: 1 1 auto; }

/* Brand cards with icons */
.brand-cards { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.brand-cards li { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.bc-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blush); }
.bc-icon.butter { background: var(--butter); }
.bc-icon .icon { width: 22px; height: 22px; }
.brand-cards h3 { margin: 16px 0 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.brand-cards p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
/* Brands I've worked with: 2 across, then one row of 5 */
.brand-cards.partners { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .brand-cards.partners { grid-template-columns: repeat(5, 1fr); } }
/* Ways to work together: running text, so 1 column on phones and 2 × 2 from tablet up */
.brand-cards.ways { grid-template-columns: 1fr; }
@media (min-width: 640px) { .brand-cards.ways { grid-template-columns: repeat(2, 1fr); } }
.brand-cards.ways p { font-size: 16px; line-height: 1.5; color: var(--ink); }
.head-row > .btn-row { flex: 0 1 auto; }

/* Inner page headers: same voice as the home hero, a size down */
.page-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 4vw, 48px); }
.page-hero h1, .hero h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.75rem); }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero .lede { margin: 18px 0 0; max-width: 34em; }
.page-hero .split > .photo { max-width: 540px; margin-inline: auto; }
@media (max-width: 760px) { .page-hero .pages-fan { max-width: 520px; } }
/* A long h2 drops a step on small phones so it stays on 2 lines */
@media (max-width: 420px) { .h2-long { font-size: 1.75rem; } }
@media (max-width: 480px) { .legal p, .legal li { font-size: 17px; } }

/* Reduced motion: keep everything on the page, drop the travel */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .btn:hover, .btn:active { transform: none; }
}

/* ===== Audit round 1: rules the page markup now relies on (23 Oct 2026) ===== */
.head-row .lede { margin: 16px 0 0; }
.page-hero .disclosure { max-width: 640px; margin: 24px 0 0; }
.card-body > .bc-icon { margin-bottom: 10px; }
.card-foot { flex-wrap: wrap; }
.kit-card.flush { margin-top: 0; }
.kit-card > .btn-block { margin-top: 18px; }
.nf-hero { padding-bottom: clamp(48px, 7vw, 96px); }
.legal > h2:first-child { margin-top: 0; }
.tick-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.lc-text .since { color: var(--coral-ink); font-weight: 700; }
.link-cards.ranges .lc-text span:not(.since) { font-size: 16px; line-height: 1.5; color: var(--ink); }
.codes-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
/* Discount code chip: tap to copy */
.code-chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1.5px dashed var(--coral-ink); border-radius: 12px; background: var(--paper); color: var(--coral-ink);
  font: 800 15px/1 var(--sans); letter-spacing: .06em; cursor: pointer;
}
.code-chip:hover { background: var(--cream); }
.code-chip:active { transform: translateY(1px); }
/* Split headers give the h1 half the width, so it steps down to stay within 2 lines */
.page-hero .split h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); }

/* ===== Look round 2: fewer labels and lines (23 Oct 2026) ===== */
/* Sections are separated by tone (cream / paper / blush / ink), not hairlines. The paper footer only needs a line when the page above it also ends on paper. */
main:has(> section.bg-paper:last-child) + .site-footer { border-top: 1px solid var(--line); }
/* Headings that lost their label above them sit flush at the top of their block */
.section-head > h2:first-child, .head-row h2:first-child, .sp-copy > h3:first-child { margin-top: 0; }
.page-hero .updated { margin: 0; font-size: 14px; color: var(--muted); }
/* Home: the brands as one line of names, led by Ashy's own ranges */
.brand-line { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.brand-line li { display: inline-flex; align-items: center; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.brand-line li:not(:last-child)::after { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--coral-ink); margin: 0 clamp(14px, 2vw, 26px); }
.link-cards + .disclosure { max-width: 640px; margin: 24px 0 0; }

/* ===== Home signature motion (the only one): the Get Started Pack deals itself out, once =====
   The plan and habit tracker pages start tucked square behind the cover, then slide out to their resting tilts
   the first time the pack scrolls into view. The home page script adds .fan-ready only when motion is allowed,
   IntersectionObserver exists and the pack starts off screen, so no JS, reduced motion and print all show the
   pages at rest. Transform and opacity only. With no "to" keyframe, each page lands on its resting rotation above.
   The calc() offsets match .pf-pages and .pf-side (12px gaps, 2:1 flex, 8px top padding): update them together. */
@media screen and (prefers-reduced-motion: no-preference) {
  .fan-ready .pf-pages > .page-thumb { z-index: 1; animation: fan-cover .55s cubic-bezier(.22, .8, .3, 1) backwards; }
  .fan-ready .pf-side .page-thumb { animation: fan-top .65s cubic-bezier(.22, .8, .3, 1) .08s backwards; }
  .fan-ready .pf-side .page-thumb:last-child { animation-name: fan-bottom; animation-delay: .16s; }
  .fan-ready:not(.fan-in) .page-thumb { animation-play-state: paused; }
}
@keyframes fan-cover { from { transform: rotate(0deg); } }
@keyframes fan-top { from { opacity: 0; transform: rotate(0deg) translate(calc(-150% - 12px), calc(50% - 8px)) scale(.94); } 30% { opacity: 1; } }
@keyframes fan-bottom { from { opacity: 0; transform: rotate(0deg) translate(calc(-150% - 12px), calc(-50% - 20px)) scale(.94); } 30% { opacity: 1; } }

/* Footer closing line: Ashy's goodbye above the link columns. Same display size as the pack heading (.sp-copy h3), so no new type size */
.foot-close { max-width: 18em; margin: 0 0 clamp(36px, 5vw, 56px); font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.75rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.foot-close em { margin-left: .05em; font-size: 1.08em; color: var(--coral-ink); }
/* On phones the names wrap, so they are spaced instead of dotted (no dots stranded at line ends) */
@media (max-width: 600px) { .brand-line { gap: 4px 22px; } .brand-line li::after { display: none; } }