@import url('fonts.css');

/* ==========================================================================
   Design tokens — transcribed from the Claude Design project
   `_ds/g-ode-design-system-…/tokens/{colors,typography,spacing,effects}.css`.
   Never hardcode a hex or a pixel value below: map onto a token, or add one
   here so the app and the site keep drifting together rather than apart.
   ========================================================================== */
:root {
  /* colors.css */
  --stone-50:#faf8f4;  --stone-100:#f4efe6; --stone-150:#ece3d3; --stone-200:#e0d3ba;
  --stone-300:#c9b494; --stone-400:#a88f6f; --stone-500:#8a7256; --stone-600:#6b5842;
  --stone-700:#4a3d2f; --stone-800:#332a20; --stone-900:#211a14;

  --accent-moss:#6b7d5e;      --accent-moss-dark:#4f5f45;
  --accent-amethyst:#7a5a82;  --accent-amethyst-dark:#5c4363;
  --accent-rose:#c68d78;      --accent-rose-dark:#a56c58;
  --accent-pyrite:#ab8a3f;    --accent-pyrite-dark:#8a6d2c;
  --accent-obsidian:#1c1815;

  --surface-app:var(--stone-100); --surface-card:var(--stone-50);
  --surface-elevated:#fff;        --surface-sunken:var(--stone-150);
  --surface-inverse:var(--stone-800);

  --text-primary:var(--stone-800); --text-secondary:var(--stone-600);
  --text-tertiary:var(--stone-400); --text-inverse:var(--stone-50);
  --text-link:var(--accent-moss-dark);

  --border-subtle:var(--stone-200); --border-strong:var(--stone-400);
  --border-inverse:rgba(250,248,244,.24);

  --cta-bg:var(--stone-800); --cta-bg-hover:var(--stone-900); --cta-text:var(--stone-50);
  --focus-ring:var(--accent-moss-dark);

  /* typography.css */
  --font-serif:'Piazzolla',Georgia,serif;
  --font-sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text-h2:1.375rem; --text-h3:1.125rem;
  --text-body:1rem; --text-body-sm:.9375rem; --text-caption:.8125rem; --text-micro:.6875rem;
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --tracking-tight:-.01em; --tracking-wide:.06em; --tracking-wider:.12em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600;

  /* effects.css */
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(33,26,20,.06),0 12px 28px -12px rgba(33,26,20,.16);
  --shadow-hero:0 24px 60px -20px rgba(33,26,20,.32);
  --ease-standard:cubic-bezier(.32,.08,.24,1);
  --dur-fast:140ms; --dur-normal:240ms;

  /* Site-only: the page gutter, which shrinks with the viewport. */
  --gutter:clamp(20px, 5vw, 40px);
  --band:clamp(64px, 9vw, 104px);
  --measure:1240px;
  --measure-doc:1000px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  margin:0;
  background:var(--surface-app);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { display:block; max-width:100%; height:auto; }
a { color:var(--text-link); text-decoration:none; }
a:hover { color:var(--accent-moss); }
h1,h2,h3,p { margin:0; }
:where(a,button,summary):focus-visible {
  outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:var(--radius-sm);
}

.skip-link {
  position:absolute; left:var(--gutter); top:-999px; z-index:20;
  padding:12px 18px; border-radius:var(--radius-pill);
  background:var(--cta-bg); color:var(--cta-text); font-size:var(--text-body-sm);
  font-weight:var(--weight-semibold);
}
.skip-link:focus { top:14px; color:var(--cta-text); }

.wrap { max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--doc { max-width:var(--measure-doc); }

.eyebrow {
  font-size:var(--text-micro); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent-rose-dark);
}
.eyebrow--light { color:var(--accent-rose); }

/* ==========================================================================
   Brand mark
   ========================================================================== */
.brand { display:flex; align-items:center; gap:11px; color:inherit; }
.brand:hover { color:inherit; }
/* The mark carries its own viewfinder corners, so it sits on the page rather
   than inside a badge. The SVG comes from apps/rocks/assets/logo.svg. */
.brand__mark {
  width:34px; height:34px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.brand__mark svg { display:block; }
.brand__name { font-family:var(--font-serif); font-size:27px; letter-spacing:var(--tracking-tight); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; border-radius:var(--radius-pill);
  font-size:var(--text-body); font-weight:var(--weight-semibold); line-height:1;
  transition:background var(--dur-normal) var(--ease-standard),
             border-color var(--dur-normal) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--stone-900); color:#fff; }
.btn--primary:hover { background:var(--stone-800); color:#fff; }
.btn--ghost {
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.55); color:#fff;
}
.btn--ghost:hover { background:rgba(255,255,255,.26); color:#fff; }
.btn svg { flex:none; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn-row--center { justify-content:center; }

/* ==========================================================================
   Rose band — hero and closing CTA share the same ground
   ========================================================================== */
.band-rose { position:relative; background:var(--accent-rose); overflow:hidden; }
.band-rose > * { position:relative; }
.band-rose__light {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 22% 18%, rgba(255,255,255,.20), rgba(255,255,255,0) 55%);
}
/* The mineral-dot texture, masked to a soft blob so it fades rather than ends. */
.band-rose__dots {
  position:absolute; pointer-events:none;
  background-image:radial-gradient(circle, rgba(139,80,60,.30) 4.5px, rgba(0,0,0,0) 5px);
  background-size:46px 46px;
}
.band-rose__dots--hero {
  left:-40px; top:230px; width:420px; height:520px;
  -webkit-mask-image:radial-gradient(circle at 20% 30%, #000, rgba(0,0,0,0) 68%);
          mask-image:radial-gradient(circle at 20% 30%, #000, rgba(0,0,0,0) 68%);
}
.band-rose__dots--cta {
  right:-30px; bottom:-60px; width:360px; height:360px;
  -webkit-mask-image:radial-gradient(circle at 70% 70%, #000, rgba(0,0,0,0) 70%);
          mask-image:radial-gradient(circle at 70% 70%, #000, rgba(0,0,0,0) 70%);
}
.band-rose__orb {
  position:absolute; right:-60px; top:120px; width:340px; height:340px;
  border-radius:50%; background:rgba(255,255,255,.10); pointer-events:none;
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:24px;
}
.site-nav {
  display:flex; align-items:center; gap:28px;
  font-size:var(--text-body-sm); color:var(--text-secondary);
}
.site-nav a { color:inherit; }
.site-nav a:hover { color:var(--text-link); }

/* White chrome is a property of the rose band, not of the header: the document
   pages reuse the same header markup over parchment and must stay legible. */
.band-rose .site-header { color:#fff; }
.band-rose .site-nav { color:rgba(255,255,255,.88); }
.band-rose .site-nav a:hover { color:#fff; }

/* The document pages' header: a rule under the same bar, nothing more. The
   padding stays on the inner `.site-header` so both variants sit identically. */
.site-header--doc { border-bottom:1px solid var(--border-subtle); }

/* Language switch — two states, the current one inert. */
.lang { display:inline-flex; align-items:center; gap:2px; font-size:var(--text-caption); }
.lang a, .lang span { padding:5px 9px; border-radius:var(--radius-pill); line-height:1; }
.lang [aria-current='true'] {
  background:var(--stone-200); color:var(--text-primary); font-weight:var(--weight-semibold);
}
.band-rose .lang [aria-current='true'] { background:rgba(255,255,255,.2); color:#fff; }
.lang__sep { color:currentColor; opacity:.4; padding-inline:0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display:grid; gap:48px; align-items:end;
  grid-template-columns:minmax(320px,1fr) minmax(300px,420px);
  padding-top:40px;
}
.hero__copy {
  display:flex; flex-direction:column; align-items:flex-start; gap:26px; padding-bottom:104px;
}
.hero__title {
  width:100%; font-family:var(--font-sans); font-weight:700;
  font-size:clamp(42px,5.6vw,86px); line-height:.98; letter-spacing:-.03em;
  color:#fff; text-wrap:balance;
}
.hero__lead {
  max-width:31ch; font-size:20px; line-height:1.55; color:rgba(255,255,255,.92);
}
.hero__note { font-size:var(--text-body-sm); color:rgba(255,255,255,.8); }
.hero__device { display:flex; justify-content:center; align-items:flex-end; }

/* The phone. `--frame` sets the corner radius, `--bezel` the black margin. */
.device {
  --frame:46px; --bezel:11px;
  position:relative; width:100%; background:var(--stone-900);
  border-radius:var(--frame); padding:var(--bezel); box-shadow:var(--shadow-hero);
}
.device__screen {
  border-radius:calc(var(--frame) - var(--bezel)); overflow:hidden; background:var(--surface-app);
}
/* Hero phone: cropped by the band's bottom edge, so no lower corners. */
.device--bleed {
  --frame:48px; --bezel:12px;
  max-width:390px; padding-bottom:0; border-radius:var(--frame) var(--frame) 0 0;
  box-shadow:-30px 40px 90px rgba(66,30,20,.38);
}
.device--bleed .device__screen { border-radius:36px 36px 0 0; }
.device--sm { --frame:40px; --bezel:10px; max-width:300px; }
/* The capture screen is a dark viewfinder; the default parchment would flash. */
.device__screen--dark { background:var(--accent-obsidian); }

/* ==========================================================================
   "Comment ça marche" — numbered steps beside a phone
   ========================================================================== */
.steps-section {
  display:grid; gap:72px; align-items:center;
  grid-template-columns:minmax(280px,1fr) minmax(260px,360px);
  padding-block:var(--band);
}
.section-head { display:flex; flex-direction:column; gap:14px; }
.steps-col { display:flex; flex-direction:column; gap:34px; }
.section-title {
  font-family:var(--font-serif); font-size:clamp(32px,3.6vw,50px); line-height:1.08;
  font-weight:var(--weight-medium); letter-spacing:var(--tracking-tight); max-width:24ch;
}
.steps { display:flex; flex-direction:column; }
.step {
  display:flex; gap:22px; padding-block:24px; border-top:1px solid var(--border-subtle);
}
.step:last-child { border-bottom:1px solid var(--border-subtle); }
.step__num {
  font-family:var(--font-serif); font-size:34px; line-height:1;
  color:var(--accent-rose); min-width:52px;
}
.step__body { display:flex; flex-direction:column; gap:6px; }
.step__title { font-family:var(--font-serif); font-size:var(--text-h2); }
.step__text {
  font-size:var(--text-body); line-height:var(--lh-relaxed);
  color:var(--text-secondary); max-width:52ch; text-wrap:pretty;
}
/* A halo behind the phone, so it sits on the page rather than over it. */
.device-halo { position:relative; display:flex; justify-content:center; }
.device-halo::before {
  content:''; position:absolute; top:4%; width:118%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--stone-200), rgba(224,211,186,0) 66%);
}
.device-halo .device { max-width:340px; }

/* ==========================================================================
   "L'app" — dark showcase
   ========================================================================== */
.showcase { background:var(--surface-inverse); color:var(--text-inverse); padding-block:var(--band); }
.showcase .wrap { display:flex; flex-direction:column; gap:64px; }
.showcase .section-title { max-width:none; }
.showcase__head { display:flex; flex-direction:column; gap:14px; max-width:52ch; }
/* Three shots, so the columns can be wide enough for a caption that actually
   reads. The phone is capped: a column is wider than a phone should be. */
.shots { display:grid; gap:56px clamp(32px,4vw,64px); align-items:start; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); }
.shot { display:flex; flex-direction:column; gap:22px; }
.shot__caption { display:flex; flex-direction:column; gap:7px; }
.shot__title { font-family:var(--font-serif); font-size:var(--text-h2); }
.shot__text { font-size:var(--text-body-sm); line-height:var(--lh-relaxed); color:var(--stone-200); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-section {
  display:grid; gap:64px; align-items:start;
  grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr);
  padding-block:var(--band);
}
.faq { display:flex; flex-direction:column; }
.faq__item { border-top:1px solid var(--border-subtle); padding-block:24px; }
.faq__q {
  font-family:var(--font-serif); font-size:var(--text-h2); margin-bottom:8px;
}
.faq__a {
  font-size:var(--text-body); line-height:var(--lh-relaxed);
  color:var(--text-secondary); max-width:62ch; text-wrap:pretty;
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.cta {
  display:flex; flex-direction:column; align-items:center; gap:22px;
  text-align:center; color:#fff; padding-block:var(--band);
}
.cta__title {
  font-family:var(--font-sans); font-weight:700; font-size:clamp(32px,4vw,58px);
  line-height:1.02; letter-spacing:-.03em; max-width:22ch;
}
.cta__lead { font-size:var(--text-body); color:rgba(255,255,255,.92); max-width:46ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background:var(--surface-app); }
.site-footer--doc { border-top:1px solid var(--border-subtle); }
.site-footer__bar {
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  padding-block:44px 20px; font-size:var(--text-body-sm); color:var(--text-tertiary);
}
.site-footer--doc .site-footer__bar { padding-block:32px 48px; }
.site-footer__brand { display:flex; align-items:center; gap:10px; }
.site-footer__brand strong {
  font-family:var(--font-serif); font-size:21px; font-weight:var(--weight-regular);
  color:var(--text-primary);
}
.site-footer__links { display:flex; flex-wrap:wrap; gap:24px; }
.site-footer__legal {
  max-width:80ch; padding-bottom:52px;
  font-size:var(--text-micro); line-height:var(--lh-relaxed); color:var(--text-tertiary);
}

/* ==========================================================================
   Document pages — legal, privacy, terms, contact
   ========================================================================== */
.doc { padding-block:72px 96px; display:flex; flex-direction:column; gap:48px; }
.doc__head { display:flex; flex-direction:column; gap:14px; }
.doc__title {
  font-family:var(--font-serif); font-size:clamp(34px,4vw,54px); line-height:1.06;
  font-weight:var(--weight-medium); letter-spacing:var(--tracking-tight);
}
.doc__lead {
  max-width:60ch; font-size:var(--text-h3); line-height:var(--lh-relaxed);
  color:var(--text-secondary); text-wrap:pretty;
}
.doc__date { font-size:var(--text-body-sm); color:var(--text-tertiary); }
.prose { display:flex; flex-direction:column; gap:40px; max-width:74ch; }
.prose section, .split section { display:flex; flex-direction:column; gap:12px; }
.prose h2, .split h2 {
  font-family:var(--font-serif); font-size:var(--text-h2); font-weight:var(--weight-medium);
  color:var(--text-primary);
}
.prose p, .prose li, .split p {
  font-size:var(--text-body); line-height:var(--lh-relaxed);
  color:var(--text-secondary); text-wrap:pretty;
}
.prose ul { margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:8px; }
.prose strong, .split strong { color:var(--text-primary); font-weight:var(--weight-semibold); }
.prose em { color:var(--text-primary); }

/* An inset block for the identity details of the publisher. */
.callout {
  display:flex; flex-direction:column; gap:6px;
  padding:20px 22px; background:var(--surface-card); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); font-size:var(--text-body-sm); color:var(--text-secondary);
}

/* What we collect — three columns that stack into a labelled block on phones. */
.datatable { display:flex; flex-direction:column; }
.datatable__row {
  display:grid; gap:20px; padding-block:18px; border-top:1px solid var(--border-subtle);
  grid-template-columns:minmax(140px,1fr) minmax(180px,1.4fr) minmax(120px,.9fr);
}
.datatable__what { font-weight:var(--weight-semibold); font-size:var(--text-body-sm); }
.datatable__why { font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); }
.datatable__keep { font-size:var(--text-body-sm); color:var(--text-tertiary); }

/* Pricing and contact cards */
.cards { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card {
  display:flex; flex-direction:column; gap:8px; padding:26px 24px;
  background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
}
.card--inverse { background:var(--surface-inverse); color:var(--text-inverse); }
.card__tag {
  font-size:var(--text-micro); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--text-tertiary);
}
.card--inverse .card__tag { color:var(--stone-300); }
.card__price { font-family:var(--font-serif); font-size:34px; letter-spacing:var(--tracking-tight); }
.card__price span { font-family:var(--font-sans); font-size:var(--text-body-sm); color:var(--text-tertiary); }
.card--inverse .card__price span { color:var(--stone-300); }
.card__text { font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); }
.card--inverse .card__text { color:var(--stone-200); }

.card--link {
  color:var(--text-primary);
  transition:box-shadow var(--dur-normal) var(--ease-standard),
             transform var(--dur-normal) var(--ease-standard);
}
.card--link:hover { color:var(--text-primary); box-shadow:var(--shadow-hero); transform:translateY(-2px); }
.card__title { font-family:var(--font-serif); font-size:var(--text-h2); }
.card__action {
  margin-top:6px; font-size:var(--text-body-sm);
  font-weight:var(--weight-semibold); color:var(--text-link); overflow-wrap:anywhere;
}
.split { display:grid; gap:40px; max-width:74ch; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

/* ==========================================================================
   Responsive — the design draws desktop; below 900px everything stacks
   ========================================================================== */
@media (max-width:900px) {
  .hero, .steps-section, .faq-section { grid-template-columns:1fr; }
  .hero { gap:0; padding-top:24px; }
  .hero__copy { padding-bottom:56px; gap:22px; }
  .hero__device { max-width:340px; margin-inline:auto; width:100%; }
  .steps-section { gap:48px; }
  .faq-section { gap:32px; }
  /* The halo is a desktop flourish; at this width it only muddies the phone. */
  .device-halo::before { display:none; }
  .device-halo .device { max-width:300px; }
  .band-rose__orb, .band-rose__dots--hero { display:none; }
  .showcase .wrap { gap:44px; }
  .shots { gap:44px 32px; }
}

@media (max-width:640px) {
  .site-header { flex-wrap:wrap; gap:14px; }
  .site-nav { gap:18px; font-size:var(--text-caption); }
  .site-nav--main { display:none; }
  .hero__lead { font-size:var(--text-h3); }
  .btn { padding:14px 22px; font-size:var(--text-body-sm); }
  .btn-row { gap:10px; }
  .step { gap:14px; }
  .step__num { font-size:28px; min-width:40px; }
  .doc { padding-block:48px 64px; gap:36px; }
  .prose { gap:32px; }
  .site-footer__bar { flex-direction:column; align-items:flex-start; gap:18px; }
  .site-footer__links { gap:14px 20px; }
  /* Three columns of a table do not fit; each cell gets its own label instead. */
  .datatable__row { grid-template-columns:1fr; gap:4px; padding-block:16px; }
  .datatable__why::before, .datatable__keep::before {
    content:attr(data-label) ' · '; color:var(--text-tertiary);
  }
}

@media print {
  .site-header, .site-header--doc, .site-footer__links, .btn-row, .skip-link { display:none; }
  body { background:#fff; }
  .prose { max-width:none; }
}