/* ============================================================
   Anist — shared stylesheet
   ============================================================ */

/* ---------- Theme tokens ---------- */
:root{
  --paper:        #FCFCFA;
  --paper-lift:   #F7F6F2;
  --paper-sink:   #F1F0EB;
  --hairline:     #ECECE6;
  --hairline-2:   #D8D7D0;

  --ink:          #0E0E0C;
  --graphite:     #1A1A18;
  --text:         #232321;
  --body:         #4A4A46;
  --muted:        #8C8C86;
  --soft:         #B5B5AF;

  --accent:       #1D311F;   /* forest — brand green */
  --accent-tint:  #E6ECE5;
  --accent-line:  #BCC8BA;
  --accent-lift:  #8FA38C;

  --ink-bg:       #0E0E0C;
  --ink-bg-2:     #161614;
  --ink-line:     #1F1F1D;
  --ink-text:     #ECECE6;
  --ink-body:     #B5B5AF;
  --ink-muted:    #7A7A74;

  --serif: "Newsreader", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
  --sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: 40px;
}

html[data-theme="pure-white"]{
  --paper:#FFFFFF; --paper-lift:#FAFAFA; --paper-sink:#F4F4F4;
  --hairline:#EFEFEF; --hairline-2:#DCDCDC;
  --ink:#0A0A0A; --graphite:#181818; --text:#222; --body:#4A4A4A; --muted:#8A8A8A; --soft:#BABABA;
}
html[data-theme="off-white"]{
  --paper:#FCFCFA; --paper-lift:#F7F6F2; --paper-sink:#F1F0EB;
  --hairline:#ECECE6; --hairline-2:#D8D7D0;
  --ink:#0E0E0C; --graphite:#1A1A18; --text:#232321; --body:#4A4A46; --muted:#8C8C86; --soft:#B5B5AF;
}
html[data-theme="warm-cream"]{
  --paper:#F6F1E6; --paper-lift:#F0EADD; --paper-sink:#E9E2D2;
  --hairline:#E1D9C6; --hairline-2:#C9C0AA;
  --ink:#1A1612; --graphite:#241F19; --text:#2E2922; --body:#52483C; --muted:#8E8472; --soft:#B5AC9A;
}
html[data-theme="cool-stone"]{
  --paper:#F2F2F0; --paper-lift:#ECECEA; --paper-sink:#E4E4E1;
  --hairline:#E0E0DC; --hairline-2:#C8C8C2;
  --ink:#15171A; --graphite:#1F2125; --text:#262830; --body:#494C53; --muted:#82858B; --soft:#AEB1B6;
}

html[data-accent="forest"] { --accent:#1D311F; --accent-tint:#E6ECE5; --accent-line:#BCC8BA; --accent-lift:#8FA38C; }
html[data-accent="sage"]   { --accent:#5C6A58; --accent-tint:#EBEFE8; --accent-line:#CDD5C8; --accent-lift:#A8B5A2; }
html[data-accent="slate"]  { --accent:#4A5867; --accent-tint:#E8ECF1; --accent-line:#C8D0DA; --accent-lift:#9CA9B8; }
html[data-accent="clay"]   { --accent:#8C5E3F; --accent-tint:#F2E8DE; --accent-line:#DCC4AC; --accent-lift:#C99A7A; }
html[data-accent="mono"]   { --accent:#3A3A38; --accent-tint:#EEEEEC; --accent-line:#D2D2CD; --accent-lift:#A8A8A2; }

html[data-dark="ink"]      { --ink-bg:#0E0E0C; --ink-bg-2:#161614; --ink-line:#1F1F1D; --ink-text:#ECECE6; --ink-body:#B5B5AF; --ink-muted:#7A7A74; }
html[data-dark="graphite"] { --ink-bg:#1B1D20; --ink-bg-2:#23262A; --ink-line:#2C3034; --ink-text:#ECECE6; --ink-body:#B5B5AF; --ink-muted:#7A7A74; }
html[data-dark="off"]      { --ink-bg:#F7F6F2; --ink-bg-2:#FCFCFA; --ink-line:#ECECE6; --ink-text:#0E0E0C; --ink-body:#4A4A46; --ink-muted:#8C8C86; }

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body{
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
::selection{ background: var(--accent-tint); color: var(--ink); }

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container.wide{ max-width: 1360px; }
.container.narrow{ max-width: 900px; }

/* ---------- Typography ---------- */
.eyebrow{
  font-family: var(--sans);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before{
  content:""; width: 22px; height: 1px;
  background: var(--hairline-2);
}
.eyebrow.no-rule::before{ display:none; }

h1, h2, h3, h4{
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
h1{ font-size: clamp(46px, 7.2vw, 104px); line-height: 1.02; letter-spacing: -0.028em; font-weight: 350; }
h2{ font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.022em; }
h3{ font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; }
h4{ font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
em, .italic, .it{ font-style: italic; color: var(--accent); font-weight: 400; }

p{ margin: 0; color: var(--body); }
.lead{ font-size: 19px; line-height: 1.55; color: var(--body); max-width: 56ch; text-wrap: pretty; }

.rule{ height:1px; background: var(--hairline); border:0; margin:0; }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease, background .4s ease;
}
.nav.scrolled{ border-bottom-color: var(--hairline); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height: 84px; }
.brand{
  display:flex; align-items:center; gap: 10px;
  font-family: var(--serif);
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink);
  position: relative;
}
.brand-mark::after{
  content:""; position:absolute; inset: 6px;
  border-radius: 50%;
  background: var(--paper);
}
.nav-links{ display:flex; align-items:center; gap: 36px; font-size: 14px; color: var(--text); }
.nav-links a{ color: var(--text); position: relative; }
.nav-links a:hover{ color: var(--ink); }
.nav-links a.active{ color: var(--ink); }
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: var(--ink); transform: scaleX(0); transform-origin:left;
  transition: transform .4s ease;
}
.nav-links a:hover:not(.nav-cta)::after,
.nav-links a.active:not(.nav-cta)::after{ transform: scaleX(1); }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13.5px; font-weight: 500;
  color: #ffffff !important;
  padding: 9px 16px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background .3s ease;
}
.nav-cta svg{ color: #ffffff !important; stroke: #ffffff !important; }
.nav-cta:hover{ background: var(--graphite); color: #ffffff !important; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 500;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
  letter-spacing: 0.005em;
}
.btn-primary{
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover{
  background: var(--graphite);
  transform: translateY(-1px);
}
.btn-ghost{
  background: transparent; color: var(--ink);
  border-color: var(--hairline-2);
}
.btn-ghost:hover{ border-color: var(--ink); background: var(--paper-lift); }
.btn-arrow{ width: 16px; height: 16px; transition: transform .3s ease; }
.btn:hover .btn-arrow{ transform: translateX(3px); }

/* ---------- Sections ---------- */
section{ padding: 120px 0; position: relative; }
section.tight{ padding: 80px 0; }
section.sm{ padding: 56px 0 64px; }
section.dark{
  background: var(--ink-bg);
  color: var(--ink-body);
}
section.dark h1, section.dark h2, section.dark h3, section.dark h4{ color: var(--ink-text); }
section.dark .eyebrow{ color: var(--ink-muted); }
section.dark .eyebrow::before{ background: var(--ink-line); }
section.dark p{ color: var(--ink-body); }
section.dark .rule{ background: var(--ink-line); }
section.dark em, section.dark .italic, section.dark .it{ color: var(--accent-lift); }

/* ---------- Photos ---------- */
.photo{
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-sink);
  position: relative;
}
.photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(0.96);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.photo.cinema img{
  filter: saturate(0.7) contrast(0.96) brightness(0.97);
}
.photo:hover img{ transform: scale(1.02); }
.photo::after{
  content:"";
  position:absolute; inset: 0;
  /* warm wash to unify the photographs */
  background:
    linear-gradient(180deg, rgba(20,20,18,0) 60%, rgba(20,20,18,0.08));
  pointer-events: none;
}
.photo-caption{
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-style: italic;
  font-family: var(--serif);
}

/* ---------- Section header ---------- */
.section-head{
  display:grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; margin-bottom: 80px; align-items: end;
}
.section-head .lead{ font-size: 20px; max-width: 50ch; }

/* ---------- Editorial split ---------- */
.split{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 96px;
  align-items: center;
}
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
.split p + p{ margin-top: 18px; }

/* ---------- Record card ---------- */
.record-card{
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 28px 28px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 30px 60px -40px rgba(20,20,18,0.18),
    0 8px 18px -10px rgba(20,20,18,0.06);
  position: relative;
}
.record-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.pet{ display:flex; align-items:center; gap: 14px; }
.pet-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper-sink);
  border: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
}
.pet-avatar img{ width:100%; height:100%; object-fit: cover; filter: saturate(0.9); }
.pet-name{ font-family: var(--serif); font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.pet-meta{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.pill{
  font-size: 11px; color: var(--accent);
  padding: 5px 10px; border-radius: 999px;
  background: var(--accent-tint);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}
.pill.neutral{ color: var(--muted); background: var(--paper-sink); }
.record-list{ list-style: none; margin: 0; padding: 0; }
.record-list li{
  display:grid; grid-template-columns: 84px 1fr auto; gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.record-list li:last-child{ border-bottom: 0; }
.rl-date{ font-size: 12px; color: var(--muted); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.rl-title{ font-size: 14.5px; color: var(--ink); }
.rl-sub{ font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rl-tag{
  font-size: 11px; color: var(--accent);
  padding: 4px 9px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-tint);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}
.rl-tag.neutral{
  color: var(--muted); background: var(--paper-sink); border-color: var(--hairline-2);
}

/* ---------- Trust strip ---------- */
.trust-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0; }
.trust-cell{ padding: 8px 28px; border-left: 1px solid var(--hairline); }
.trust-cell:first-child{ border-left: 0; padding-left: 0; }
.trust-num{
  font-family: var(--serif);
  font-size: 42px; line-height: 1;
  color: var(--ink); font-weight: 400; letter-spacing: -0.02em;
}
.trust-num .it{ font-style: italic; color: var(--accent); }
.trust-label{
  margin-top: 14px;
  font-size: 12.5px; color: var(--muted);
  letter-spacing: 0.04em; max-width: 28ch; line-height: 1.5;
}

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--hairline);
  padding: 56px 0 64px;
  background: var(--paper-lift);
}
.foot{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot h5{
  font-family: var(--sans);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 18px; font-weight: 500;
}
.foot ul{ list-style: none; margin: 0; padding: 0; display:grid; gap: 10px; font-size: 14px; color: var(--body); }
.foot ul a:hover{ color: var(--ink); }
.foot-tag{ margin-top: 20px; font-size: 13.5px; color: var(--muted); max-width: 36ch; line-height: 1.6; }
.foot-bot{
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between;
  font-size: 12.5px; color: var(--muted);
}

/* ---------- Motion ---------- */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal.d1{ transition-delay: .08s; }
.reveal.d2{ transition-delay: .16s; }
.reveal.d3{ transition-delay: .24s; }
.reveal.d4{ transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  html{ scroll-behavior: auto; }
}

/* ---------- Tweaks panel ---------- */
.tweaks{
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--hairline-2);
  border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(20,20,18,0.25), 0 10px 20px -10px rgba(20,20,18,0.1);
  padding: 18px;
  font-family: var(--sans);
  display: none;
}
.tweaks.open{ display: block; }
.tweaks header{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.tweaks h6{
  margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted); font-weight: 500;
}
.tweaks .close{
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--hairline-2);
  background: var(--paper); color: var(--muted);
  cursor: pointer; display:inline-flex; align-items:center; justify-content:center;
  font-size: 14px; line-height: 1;
}
.tweaks .close:hover{ color: var(--ink); border-color: var(--ink); }
.tweaks-section{ margin-bottom: 14px; }
.tweaks-section:last-child{ margin-bottom: 0; }
.tweaks-label{
  font-size: 10.5px; color: var(--muted); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.tweaks-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tweaks-row.three{ grid-template-columns: 1fr 1fr 1fr; }
.swatch{
  cursor: pointer;
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  padding: 8px;
  display:flex; flex-direction: column; gap: 6px;
  font-size: 11px; color: var(--muted);
  background: var(--paper);
  font-family: var(--sans);
  transition: border-color .2s ease, color .2s ease;
  text-align: left;
}
.swatch:hover{ border-color: var(--ink); color: var(--ink); }
.swatch.on{ border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.swatch .chips{ display:flex; gap: 3px; }
.swatch .chip{ width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.06); }

/* ---------- Announcement bar ---------- */
.announce{
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.announce-inner{
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  height: 36px;
  text-align: center;
}
.announce-inner .pulse{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-lift);
  display: inline-block;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-lift) 18%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.92); }
}
.announce a{
  color: var(--ink-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--ink-text) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .3s ease;
}
.announce a:hover{ text-decoration-color: var(--ink-text); }

/* ---------- Brand logo image ---------- */
.brand-logo{
  display: inline-flex; align-items: center;
  height: 38px;
  gap: 2px;
}
.brand-logo img{
  height: 100%;
  width: auto;
  display: block;
}
.nav .brand-logo{ height: 36px; }
footer .brand-logo{ height: 42px; }
/* In dark sections, invert the logo to read on dark */
section.dark .brand-logo img,
footer.dark .brand-logo img,
.announce .brand-logo img{
  filter: brightness(0) saturate(0) invert(1);
  opacity: 0.92;
}

/* ---------- Marketplace category grid ---------- */
.cats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
}
.cat{
  background: var(--paper);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column;
  gap: 18px;
  position: relative;
  transition: background .3s ease;
  min-height: 280px;
}
.cat:hover{ background: var(--paper-lift); }
.cat.feature{
  background: var(--ink-bg);
  color: var(--ink-body);
  grid-column: span 2;
  min-height: 320px;
}
.cat.feature:hover{ background: var(--ink-bg-2); }
.cat-num{
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.cat.feature .cat-num{ color: var(--ink-muted); }
.cat-title{
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.018em;
  margin: 0;
}
.cat.feature .cat-title{ color: var(--ink-text); font-size: clamp(28px, 3.2vw, 42px); }
.cat-desc{
  font-size: 14px;
  color: var(--body);
  max-width: 36ch;
  line-height: 1.55;
}
.cat.feature .cat-desc{ color: var(--ink-body); max-width: 42ch; font-size: 15px; }
.cat-meta{
  margin-top: auto;
  padding-top: 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.cat.feature .cat-meta{ color: var(--ink-muted); }
.cat-arrow{
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--hairline-2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  transition: background .3s ease, border-color .3s ease;
  color: var(--ink);
}
.cat.feature .cat-arrow{
  border-color: var(--ink-line);
  color: var(--ink-text);
}
.cat:hover .cat-arrow{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cat.feature:hover .cat-arrow{ background: var(--accent-lift); color: var(--ink); border-color: var(--accent-lift); }

/* Category photo treatment */
.cat-photo{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}
.cat-photo img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.55) contrast(0.95);
}
.cat-photo::after{
  content:""; position:absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--paper) 30%, transparent),
    color-mix(in oklab, var(--paper) 92%, transparent) 80%);
}
.cat.feature .cat-photo::after{
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--ink-bg) 75%, transparent) 0%,
    color-mix(in oklab, var(--ink-bg) 55%, transparent) 40%,
    color-mix(in oklab, var(--ink-bg) 92%, transparent) 80%);
}
.cat > *:not(.cat-photo){ position: relative; z-index: 1; }

/* ---------- Brand partner strip ---------- */
.partners{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.partner-logo{
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--muted);
  letter-spacing: -0.01em;
  opacity: 0.7;
  transition: opacity .3s ease, color .3s ease;
}
.partner-logo:hover{ opacity: 1; color: var(--ink); }
.partner-logo.bold{ font-style: normal; font-weight: 500; font-family: var(--sans); letter-spacing: 0.04em; }
.partner-logo.tracking{ font-family: var(--sans); letter-spacing: 0.32em; text-transform: uppercase; font-size: 13px; font-style: normal; }

/* ---------- Hero photo ---------- */
.hero-photo{
  position: absolute;
  right: max(0px, calc((100vw - var(--container)) / 2));
  top: 8%;
  width: clamp(320px, 38vw, 540px);
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  z-index: 0;
}
.hero-photo img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) contrast(0.96);
}
.hero-photo::after{
  content:""; position:absolute; inset: 0;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--paper) 0%, transparent),
    color-mix(in oklab, var(--paper) 30%, transparent));
  pointer-events: none;
}
.hero{ position: relative; }
.hero > .container{ position: relative; z-index: 1; }

/* ---------- App teaser ---------- */
.app-teaser{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px;
  background: var(--ink-bg);
  color: var(--ink-body);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.app-teaser h2{ color: var(--ink-text); max-width: 14ch; }
.app-teaser p{ color: var(--ink-body); max-width: 44ch; }
.app-teaser .stores{
  margin-top: 28px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.store-pill{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(255,255,255,0.02);
  color: var(--ink-text);
  font-size: 13px;
  letter-spacing: 0.03em;
}
.store-pill .soon{
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lift);
  padding-left: 10px;
  border-left: 1px solid var(--ink-line);
}
.store-pill svg{ width: 18px; height: 18px; color: var(--ink-text); }

/* ---------- Booking flow modal ---------- */
.booking-overlay{
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--ink) 50%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .35s ease;
}
.booking-overlay.open{ display: flex; opacity: 1; }
.booking-modal{
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 48px);
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid var(--hairline-2);
  box-shadow: 0 60px 120px -40px rgba(20,20,18,0.45);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(10px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.booking-overlay.open .booking-modal{ transform: translateY(0); }
.booking-head{
  padding: 22px 28px;
  border-bottom: 1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between;
}
.booking-head .step-meta{
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--muted);
}
.booking-head h3{ margin: 4px 0 0; font-size: 22px; }
.booking-head .close{
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hairline-2);
  background: var(--paper); color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}
.booking-head .close:hover{ color: var(--ink); border-color: var(--ink); }
.booking-progress{
  display: flex; gap: 6px;
  padding: 0 28px 18px;
  border-bottom: 1px solid var(--hairline);
}
.booking-progress span{
  flex: 1; height: 2px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.booking-progress span.on::after{
  content:""; position: absolute; inset: 0;
  background: var(--accent);
  animation: progressFill .5s ease-out forwards;
}
@keyframes progressFill{
  from{ transform: scaleX(0); transform-origin: left; }
  to  { transform: scaleX(1); transform-origin: left; }
}
.booking-body{
  padding: 28px;
  overflow-y: auto;
  flex: 1;
}
.booking-body h4{
  font-family: var(--serif);
  font-size: 26px; line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.booking-body .hint{
  margin-top: 8px;
  font-size: 14px; color: var(--muted);
}
.booking-foot{
  padding: 20px 28px;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: var(--paper-lift);
}
.booking-foot .price{
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.booking-foot .price small{
  font-family: var(--sans);
  font-size: 12px; color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.booking-foot .actions{ display:flex; align-items:center; gap: 10px; margin-left: auto; }
.booking-foot .actions .btn{ white-space: nowrap; }

/* Option cards in booking */
.opt-list{
  margin-top: 22px;
  display: grid; gap: 10px;
}
.opt{
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
  align-items: center;
  text-align: left;
  font-family: var(--sans);
  width: 100%;
}
.opt:hover{ border-color: var(--hairline-2); background: var(--paper-lift); }
.opt.on{ border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--paper); }
.opt .radio{
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--hairline-2);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.opt.on .radio{ border-color: var(--ink); }
.opt.on .radio::after{
  content:""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--ink);
}
.opt .opt-body{ display: grid; gap: 4px; }
.opt .opt-title{ font-size: 15px; color: var(--ink); }
.opt .opt-sub{ font-size: 13px; color: var(--muted); }
.opt .opt-meta{
  font-size: 12px; color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.opt .opt-meta strong{
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  font-weight: 400;
}

.field{
  margin-top: 16px;
  display: grid; gap: 6px;
}
.field label{
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
}
.field input, .field textarea, .field select{
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  outline: 0;
  transition: border-color .25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--ink);
}
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Time slot grid */
.slot-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.slot{
  padding: 12px 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  font-size: 13px;
  color: var(--ink);
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color .25s ease;
  text-align: center;
}
.slot:hover{ border-color: var(--hairline-2); }
.slot.on{ border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.slot.disabled{ color: var(--soft); cursor: not-allowed; text-decoration: line-through; }

/* Day picker */
.day-row{
  margin-top: 16px;
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.day{
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  min-width: 64px;
  transition: border-color .25s ease;
}
.day:hover{ border-color: var(--hairline-2); }
.day.on{ border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.day .d-day{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.day .d-date{ font-family: var(--serif); font-size: 20px; color: var(--ink); margin-top: 2px; line-height: 1; }

/* Summary card on confirm step */
.summary{
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper-lift);
}
.summary-row{
  display: grid; grid-template-columns: 110px 1fr;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.summary-row:last-child{ border-bottom: 0; }
.summary-row .k{
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-top: 3px;
}
.summary-row .v{ color: var(--ink); font-size: 14.5px; }
.summary-row .v small{ color: var(--muted); font-size: 12.5px; display: block; margin-top: 2px; }

/* Done step */
.done-state{
  text-align: center;
  padding: 36px 0 16px;
}
.done-tick{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.done-tick svg{ width: 28px; height: 28px; }
.done-state h4{ font-size: 30px; }
.done-state .hint{ margin: 12px auto 0; max-width: 38ch; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  :root{ --gutter: 24px; }
  section{ padding: 80px 0; }
  .section-head{ grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .split, .foot{ grid-template-columns: 1fr; gap: 48px; }
  .trust-grid{ grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .trust-cell{ border-left: 0; padding: 0; }
  .nav-links a:not(.nav-cta){ display: none; }
  .tweaks{ width: calc(100vw - 32px); right: 16px; bottom: 16px; }

  .cats{ grid-template-columns: 1fr; }
  .cat.feature, .cat{ grid-column: span 1; min-height: 240px; }
  .cat.feature{ min-height: 260px; }
  /* Show photo background on every card on mobile so they don't look empty */
  .cat .cat-photo{ display: block; }
  .cat:not(.feature) .cat-photo::after{
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--paper) 60%, transparent) 0%,
      color-mix(in oklab, var(--paper) 90%, transparent) 80%);
  }

  /* Move hero photo from side-position to a banner above the hero text on mobile */
  .hero-photo{
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 11;
    margin-bottom: 32px;
    display: block !important;
    border-radius: 14px;
  }
  .hero > .container > *{ max-width: 100% !important; padding-right: 0 !important; }

  .app-teaser{ grid-template-columns: 1fr; padding: 48px 24px; gap: 40px; border-radius: 14px; }
  .booking-modal{ max-height: calc(100vh - 24px); }
  .booking-body{ padding: 22px; }
  .booking-foot{ flex-wrap: wrap; padding: 16px 22px; }
  .slot-grid{ grid-template-columns: repeat(3, 1fr); }
  .field-row{ grid-template-columns: 1fr; }
  .summary-row{ grid-template-columns: 90px 1fr; }
  .partners{ justify-content: flex-start; }
  .announce-inner{ font-size: 11.5px; gap: 10px; padding: 0 12px; text-align: center; }

  /* Generic photo blocks: scale + crop sensibly */
  .photo{ aspect-ratio: 4 / 5; }
  .photo[style*="aspect-ratio: 21 / 9"]{ aspect-ratio: 16 / 10 !important; }

  /* Services grid: 2 cols on mobile */
  .services{ grid-template-columns: 1fr 1fr !important; }
  .service{ min-height: 220px; padding: 24px 20px; }
  .service h3{ font-size: 19px; }

  /* Honest-about-data: stack */
  .data-panel{ grid-template-columns: 1fr !important; gap: 16px !important; }
  .data-card{ padding: 28px !important; }

  /* CTA grid stacks */
  .cta-grid{ grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Pricing grids */
  .pricing-grid{ grid-template-columns: 1fr !important; }

  /* Hero typography scales down */
  h1{ font-size: clamp(36px, 9vw, 56px) !important; }
}

@media (max-width: 560px){
  .trust-grid{ grid-template-columns: 1fr; gap: 24px; }
  .services{ grid-template-columns: 1fr !important; }
  .slot-grid{ grid-template-columns: repeat(2, 1fr); }
  .summary-row{ grid-template-columns: 1fr; gap: 4px; }
  .summary-row .k{ padding-top: 0; }
  h1{ font-size: clamp(32px, 11vw, 48px) !important; }
  h2{ font-size: clamp(28px, 8vw, 40px) !important; }
  .announce-inner{ height: auto; padding: 8px 12px; line-height: 1.4; }
  .nav-inner{ height: 64px; }
  .brand-logo img{ width: 42px !important; height: 38px !important; }
  .nav-cta{ font-size: 12.5px; padding: 8px 12px; }
}

/* === lovable-mobile-fixes === */
@media (max-width: 640px) {
  .container { padding: 0 18px !important; }
  .nav-inner { padding: 10px 0 !important; }
  .nav-links { gap: 10px !important; font-size: 13px !important; }
  .nav-links a:not(.nav-cta) { display: none !important; }
  .split, .split.reverse { grid-template-columns: 1fr !important; gap: 28px !important; }
  .split h1 { font-size: clamp(34px, 9vw, 44px) !important; max-width: 100% !important; }
  .section-head { grid-template-columns: 1fr !important; gap: 16px !important; }
  .services, .cta-grid, .steps, .panel, .feature-grid, .pricing-grid, .hv-steps,
  .app-teaser, .foot { grid-template-columns: 1fr !important; gap: 20px !important; }
  .foot { padding: 32px 0 !important; }
  .foot-bot { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .record-card { width: 100% !important; }
  .photo { aspect-ratio: 4/3 !important; }
  .booking-modal { width: calc(100vw - 24px) !important; max-width: 100% !important; }
  section { padding: 56px 0 !important; }
  h1, h2 { word-wrap: break-word !important; }
  /* prevent hero text overlapping right-side photo */
  .split > div:first-child h1 { max-width: 100% !important; }
}

/* === lovable-hero-fix === */
@media (min-width: 641px) {
  .split { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
  .split > div { min-width: 0; }
  .split h1 { max-width: 100%; }
}