/* Healing Tarot Readings, the one stylesheet. docs/DESIGN_SPEC.md is the contract; sections mirror it.
   Phone first (375), then 640, 768, 1024. Every colour, size, space, radius, shadow, z-index and duration comes from §2.
   Fonts: Cormorant Garamond 400/400i/500, Raleway 400/500, Cinzel 400, loaded per page in <head> (see docs note in the style guide). */

/* ==== §2 Tokens (verbatim) ==== */
/* Design tokens. Phone first (375), then 768, then 1024. 8-pt grid. */
:root{
  /* ---- colour roles ---- */
  --night:#06040e;                      /* page background. Flat. No gradient, texture or canvas. */
  --deep:#0e0820;                       /* form fields; the one alternate band if a page ever needs one */
  --card:#160f35;                       /* raised surface: Sanctuary panels, dialog, toast, chat bubbles */
  --card-2:#1b1340;                     /* raised surface on hover */
  --gold:#d4af37;                       /* Rosemary and the business: hairlines, Cinzel labels, primary fill. 9.7:1 on night */
  --gold-2:#e6c65c;                     /* hover on gold; the focus ring */
  --gold-line:rgba(212,175,55,.32);     /* the hairline: portrait frame, section rules, first price row, pills */
  --gold-line-soft:rgba(212,175,55,.16);/* hairline on a card surface */
  --cream:#f0e6d3;                      /* text 1: headings, prices, lead copy. 16.5:1 night, 14.9:1 card */
  --cream-2:#cdc3b0;                    /* text 2: body copy. 11.5:1 night, 10.4:1 card */
  --cream-3:#a79e8e;                    /* text 3: captions, dates, disclosures, legal. 7.6:1 night, 6.9:1 card. Nothing lighter is ever text */
  --line:rgba(240,230,211,.1);          /* soft divider on dark: nav border, table rows, panel borders, fields */
  --rose:#c9789a;                       /* one job: the thing waiting on the member (a check-in due, an error toast rule). 6.4:1 night */
  --teal:#5cc8c8;                       /* one job: the Oracle. Every AI label and every AI-generated text block. 10.2:1 night, 9.1:1 card */
  --teal-line:rgba(92,200,200,.45);     /* border of the AI pill and the Oracle bubble */
  --on-gold:var(--night);               /* text on a gold button. 9.7:1 */

  /* ---- type ---- */
  --f-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-body:Raleway,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-label:Cinzel,Georgia,serif;
  --t1:44px; --lh1:48px;                /* step 1 display: page h1, hero sentence */
  --t2:32px; --lh2:40px;                /* step 2 title: section h2 */
  --t3:24px; --lh3:32px;                /* step 3 heading: h3, Sanctuary panel h2, big dates */
  --t4:20px; --lh4:28px;                /* step 4 lead: lead paragraph, prices, her quoted lines (Cormorant) */
  --t5:16px; --lh5:26px;                /* step 5 body: Raleway */
  --t6:13px; --lh6:20px;                /* step 6 small: captions, dates, disclosures, legal */
  --t-label:12px; --lh-label:16px;      /* Cinzel labels sit on step 6 at 12px, tracking .12em. The floor */
  --t-ai:14px; --lh-ai:20px;            /* the AI label: Raleway 500, teal, sentence case */
  --t-btn:15px; --t-btn-sm:14px;        /* button text. Never below 14px */
  --w-display:400; --w-heading:500;     /* Cormorant weights. 300 is retired: too thin on night at phone sizes */
  --measure:62ch;                       /* body copy stays between 55 and 75 characters */

  /* ---- space, 8-pt ---- */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px; --s9:128px;
  --section:var(--s7);                  /* the one token for section padding: 64 phone, 96 tablet, 128 desktop */
  --card-pad:var(--s4);                 /* the one token for card and panel padding: 24 phone, 32 from tablet */
  --gutter:16px;                        /* 16 phone, 32 from tablet */
  --wrap:1184px;                        /* content column with gutters; 1120 inside */
  --tap:44px;                           /* minimum control height and icon-button width */
  --tap-gap:8px;                        /* minimum gap between adjacent targets */

  /* ---- radii, borders, shadows ---- */
  --r-s:2px;                            /* buttons, fields, the AI pill, the tarot card's outer edge */
  --r-m:6px;                            /* cards, panels, dialog, toast */
  --r-full:999px;                       /* avatars, pills */
  --hairline:1px solid var(--gold-line);
  --soft:1px solid var(--line);
  --shadow-modal:0 24px 64px rgba(0,0,0,.6);   /* the only shadow. Dialog and sheet only. Cards have none */

  /* ---- z-index ---- */
  --z-base:0;
  --z-raised:1;                         /* a plate's frame, a play ring */
  --z-nav:20;                           /* sticky nav, Sanctuary top bar and tab bar */
  --z-sheet:30;                         /* the phone menu and the More sheet */
  --z-dialog:40;                        /* dialog and its backdrop */
  --z-toast:50;
  --z-skip:60;                          /* the skip link when focused */

  /* ---- motion ---- */
  --ease:cubic-bezier(.16,1,.3,1);      /* reveals, sheen, sheet */
  --ease-flip:cubic-bezier(.2,.7,.15,1);
  --dur-ui:180ms;                       /* colour and border transitions */
  --dur-reveal:900ms;                   /* the one reveal on load */
  --dur-stagger:120ms;                  /* between hero children */
  --dur-flip:600ms;                     /* a tarot card turning */
  --dur-sheen:1600ms;                   /* the gold sheen on hover, once */
  --dur-sheet:240ms;                    /* menu, More sheet, dialog in and out */

  /* ---- breakpoints (custom properties cannot be used inside @media; these are the values, documented once) ---- */
  /* --bp-sm: 640px   two-up lists, FAQ two columns */
  /* --bp-md: 768px   tablet: gutter 32, section 96, card-pad 32, clip grid four-up, footer four columns */
  /* --bp-lg: 1024px  desktop: nav links appear, two-column editorial sections, Sanctuary rail, section 128 */
  /* 1280 is the measured desktop size; nothing changes above 1024 except the column fills to --wrap */
}
@media (min-width:768px){
  :root{ --section:var(--s8); --gutter:32px; --card-pad:var(--s5);
         --t1:56px; --lh1:60px; --t2:40px; --lh2:48px; --t3:26px; --lh3:34px; }
}
@media (min-width:1024px){
  :root{ --section:var(--s9);
         --t1:64px; --lh1:66px; --t2:44px; --lh2:52px; --t3:28px; --lh3:36px;
         --t4:22px; --lh4:32px; --t5:17px; --lh5:28px; }
}

/* ==== §2.1 Base rules ==== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--night)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--night);color:var(--cream);font:400 var(--t5)/var(--lh5) var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--w-display);margin:0;color:var(--cream);letter-spacing:-.005em}
h1{font-size:var(--t1);line-height:var(--lh1)}
h2{font-size:var(--t2);line-height:var(--lh2)}
h3{font-size:var(--t3);line-height:var(--lh3);font-weight:var(--w-heading)}
p,ul,ol{margin:0} ul,ol{padding:0;list-style:none}
.lead{font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream)}
.voice{font:italic 400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream)}
.voice-sm{font:italic 400 18px/26px var(--f-display);color:var(--cream)}
.text-2{color:var(--cream-2)}
.small{font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3)}
.label{font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.label-ai{font:500 var(--t-ai)/var(--lh-ai) var(--f-body);color:var(--teal);text-transform:none;letter-spacing:0}
.measure{max-width:var(--measure)}
.wrap{padding-inline:var(--gutter);max-width:var(--wrap);margin-inline:auto;width:100%}
.wrap > *,[class*="grid"] > *{min-width:0}
.block{padding-block:var(--section)} .block + .block{padding-top:0}
.rule{height:1px;background:var(--gold-line);border:0;margin:0;width:48px}
.rule-soft{height:1px;background:var(--line);border:0;margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
::selection{background:var(--gold);color:var(--on-gold)}
.is-locked{overflow:hidden}                                   /* html, while a sheet or dialog is open */

/* ==== §2.2 Layout utilities ==== */
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4)}
.intro{padding-block:var(--s6) var(--s5)}
.two-col{display:grid;gap:var(--s5)}
@media (min-width:1024px){ .two-col{grid-template-columns:4fr 8fr;gap:var(--s7)} .two-col > .section-head{position:sticky;top:96px;align-self:start} }
.grid-2{display:grid;gap:var(--s3)} .grid-4{display:grid;gap:var(--s3)}
@media (min-width:640px){ .grid-2{grid-template-columns:1fr 1fr} .grid-4{grid-template-columns:1fr 1fr} }
@media (min-width:768px){ .grid-4{grid-template-columns:repeat(4,1fr)} }
.snap{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-bottom:var(--s2)}
.snap > *{flex:0 0 78%;scroll-snap-align:start}
@media (min-width:768px){ .snap{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible} .snap > *{flex:auto} }
.btn-icon{width:var(--tap);height:var(--tap);display:inline-grid;place-items:center;background:none;border:1px solid transparent;border-radius:var(--r-s);color:var(--cream);padding:0;flex:none}
.btn-icon:hover{border-color:var(--line)}
.btn-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:var(--z-skip);padding:12px 16px;background:var(--card);color:var(--gold);border:var(--hairline);border-radius:var(--r-s)}
.skip:focus{top:var(--s2)}
.rise{opacity:0;transform:translateY(8px)}
.rise.in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
/* grids added to the list (§2.2 "adds it to this block first"): tiles, tiers, steps, hero, about */
.grid-4.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){ .grid-4.tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
.tiers{display:grid;gap:var(--s3)}
@media (min-width:768px){ .tiers{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} }

/* ==== §3 Type scale (sizes live in the tokens; these are the uses) ==== */
.display{font:var(--w-display) var(--t1)/var(--lh1) var(--f-display);letter-spacing:-.005em;color:var(--cream)}
.title{font:var(--w-display) var(--t2)/var(--lh2) var(--f-display);letter-spacing:-.005em;color:var(--cream)}
.heading{font:var(--w-heading) var(--t3)/var(--lh3) var(--f-display);color:var(--cream)}
.intro h1,.hero h1{max-width:12ch}
.price{font-family:var(--f-display);font-variant-numeric:lining-nums tabular-nums;color:var(--cream)}
.dur{font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3)}
.byline{font:italic 400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream-2)}
.tabular{font-variant-numeric:tabular-nums}

/* ==== §4.1 Nav (public) ==== */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:color-mix(in srgb,var(--night) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:var(--soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:64px}
.wordmark{display:inline-flex;align-items:center;min-height:var(--tap);font:var(--w-heading) 18px/1.2 var(--f-display);letter-spacing:.01em;color:var(--cream);text-decoration:none;white-space:nowrap}
.nav-links{display:none;gap:var(--s3);align-items:center;min-width:0}
.nav-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px;font-size:15px;color:var(--cream-2);text-decoration:none;white-space:nowrap;transition:color var(--dur-ui)}
.nav-in > .wordmark,.nav-in > .nav-actions{flex:none}
.nav-in > .nav-links{flex:1 1 auto;justify-content:center}
.nav-cta{white-space:nowrap}
.nav-links a:hover,.nav-signin:hover{color:var(--cream)}
.nav-links a[aria-current="page"]{color:var(--cream);box-shadow:inset 0 -1px 0 var(--gold)}
.nav-actions{display:flex;gap:var(--s2);align-items:center}
.nav-actions .nav-cta{display:none}
.nav-signin{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s2);font-size:var(--t-btn-sm);color:var(--cream-2);text-decoration:none;white-space:nowrap}
.nav-signin[aria-current="page"]{color:var(--cream)}
.menu-btn{min-height:var(--tap);min-width:var(--tap);padding:0 12px;background:none;border:var(--soft);border-radius:var(--r-s);color:var(--cream);font:500 var(--t-btn-sm) var(--f-body);transition:border-color var(--dur-ui)}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{border-color:var(--gold-line)}
.menu{position:absolute;left:0;right:0;top:100%;z-index:var(--z-sheet);display:flex;flex-direction:column;gap:var(--s3);max-height:calc(100dvh - 64px);overflow-y:auto;padding:var(--s2) var(--gutter) var(--s5);background:var(--night);border-bottom:var(--hairline)}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:center;min-height:56px;border-bottom:var(--soft);font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream);text-decoration:none}
.menu nav a[aria-current="page"]{color:var(--gold)}
.menu .btn-quiet{align-self:flex-start}
.menu.is-open{animation:sheet-down var(--dur-sheet) var(--ease)}
@media (min-width:768px){ .wordmark{font-size:20px} }
@media (min-width:1024px){
  .nav-in{min-height:72px}
  .nav-links{display:flex}
  .nav-actions .nav-cta{display:inline-flex}
  .menu-btn,.nav-signin,.menu{display:none}
}

/* ==== §4.2 Footer ==== */
.footer{border-top:var(--hairline);padding-block:var(--s6) var(--s5)}
.foot-grid{display:grid;gap:var(--s5)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.foot-links a,.foot-mail{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--cream-2);text-decoration:none;transition:color var(--dur-ui)}
.foot-links a:hover,.foot-mail:hover{color:var(--cream)}
.foot-mail{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold-line)}
.foot-form{display:flex;flex-direction:column;gap:var(--s2);max-width:420px}
.foot-form .row{flex-wrap:nowrap}
.foot-form input{flex:1;min-width:0}
.foot-legal{display:grid;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s4);border-top:var(--soft)}
.foot-legal a{color:var(--cream-2);text-underline-offset:4px;text-decoration-color:var(--gold-line)}
@media (min-width:768px){
  .foot-grid{grid-template-columns:1.2fr 1fr 1fr 1.4fr}
  .foot-links{flex-direction:column}
}

/* ==== §4.3 Buttons ==== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s4);border:1px solid transparent;border-radius:var(--r-s);font:500 var(--t-btn)/1.2 var(--f-body);letter-spacing:.01em;text-align:center;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-ui),border-color var(--dur-ui),color var(--dur-ui),text-decoration-color var(--dur-ui)}
.btn-primary{position:relative;overflow:hidden;isolation:isolate;background:var(--gold);color:var(--on-gold)}
.btn-primary:hover{background:var(--gold-2)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--cream) 55%,transparent) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}
.btn-primary.is-sheen::after,html:not(.js) .btn-primary:hover::after{animation:sheen var(--dur-sheen) var(--ease) 1}
.btn-secondary{background:transparent;border-color:var(--gold-line);color:var(--cream)}
.btn-secondary:hover{border-color:var(--gold)}
.btn-secondary[aria-pressed="true"]{border-color:var(--gold);background:var(--card)}
.btn-quiet{min-height:var(--tap);padding:0 var(--s1);background:none;border:0;color:var(--cream-2);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--gold-line)}
.btn-quiet:hover{color:var(--cream);text-decoration-color:var(--gold)}
.btn-quiet[aria-pressed="true"]{color:var(--cream);text-decoration-color:var(--gold)}
.btn-sm{min-height:var(--tap);padding:0 var(--s3);font-size:var(--t-btn-sm)}
.btn-quiet.btn-sm{padding:0 var(--s1)}
.btn-block{display:flex;width:100%;white-space:normal}
@media (max-width:767.98px){ .btn-block-sm{display:flex;width:100%;min-height:48px} }
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;pointer-events:none}
.btn-loading{cursor:progress}

/* ==== §4.4 Card and panel ==== */
.card,.panel{background:var(--card);border:var(--soft);border-radius:var(--r-m);padding:var(--card-pad)}
.panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);align-content:start}
.panel > *,.composer > *{min-width:0}
.card-gold{border-top:var(--hairline)}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.panel h2,.dialog h2{font-size:var(--t3);line-height:var(--lh3);font-weight:var(--w-heading)}
a.card{display:grid;gap:var(--s2);text-decoration:none;transition:background-color var(--dur-ui),border-color var(--dur-ui)}
a.card:hover{background:var(--card-2);border-color:var(--gold-line)}
.panel-missing{border-left:2px solid var(--rose)}               /* §5.3: a setting missing in the environment */

/* ==== §4.5 Pill ==== */
.pill{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:var(--hairline);border-radius:var(--r-full);font:400 var(--t-label)/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.pill-ai{border-color:var(--teal-line);color:var(--teal);font:500 var(--t6)/1 var(--f-body);letter-spacing:0;text-transform:none}
.pill-plain{border:var(--soft);color:var(--cream-2);font:400 var(--t6)/1 var(--f-body);letter-spacing:0;text-transform:none}

/* ==== §4.6 Form field ==== */
.field{display:flex;flex-direction:column;gap:var(--s2);border:0;margin:0;padding:0;min-width:0}
.field > label,.field legend,.field .row > label{font-size:var(--t6);line-height:var(--lh6);color:var(--cream-2);padding:0}
.field input:not([type="checkbox"]):not([type="radio"]),.field textarea,.field select{width:100%;min-height:48px;padding:0 var(--s3);background:var(--deep);border:var(--soft);border-radius:var(--r-s);color:var(--cream);font:400 16px/1.5 var(--f-body);transition:border-color var(--dur-ui)}
.field textarea{min-height:120px;padding-block:12px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--cream-3);opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold-line)}
.field .row input{flex:1 1 180px;width:auto;min-width:0}
.field-error{border-left:2px solid var(--rose);padding-left:var(--s3)}
.field-error [aria-invalid="true"]{border-color:var(--rose)}
.field-error [role="alert"]{color:var(--cream)}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:var(--s6);cursor:pointer}
.select::after{content:"";position:absolute;right:var(--s3);top:50%;width:8px;height:8px;margin-top:-6px;border-right:1px solid var(--cream-2);border-bottom:1px solid var(--cream-2);transform:rotate(45deg);pointer-events:none}
.field-switch label,.radio{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);color:var(--cream);font-size:var(--t5);cursor:pointer}
.field-switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:24px;margin:0;border:1px solid var(--cream-3);border-radius:var(--r-full);background:var(--deep);cursor:pointer;transition:background-color var(--dur-ui),border-color var(--dur-ui)}
.field-switch input::before{content:"";position:absolute;left:1px;top:1px;width:20px;height:20px;border-radius:var(--r-full);background:var(--cream-2);transition:transform var(--dur-ui) var(--ease),background-color var(--dur-ui)}
.field-switch input:checked{background:var(--gold);border-color:var(--gold)}
.field-switch input:checked::before{transform:translateX(20px);background:var(--night)}
.radio input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:20px;height:20px;margin:0;border:1px solid var(--cream-3);border-radius:var(--r-full);background:var(--deep)}
.radio input::before{content:"";width:10px;height:10px;border-radius:var(--r-full);background:var(--gold);transform:scale(0);transition:transform var(--dur-ui) var(--ease)}
.radio input:checked{border-color:var(--gold)}
.radio input:checked::before{transform:scale(1)}
.radios{display:flex;flex-wrap:wrap;gap:0 var(--s4)}

/* ==== §4.7 Dialog and sheet ==== */
.dialog-backdrop{position:fixed;inset:0;z-index:var(--z-dialog);background:color-mix(in srgb,var(--night) 70%,transparent);animation:fade-in var(--dur-sheet) var(--ease)}
.dialog{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:var(--gutter);pointer-events:none}
.dialog-in{pointer-events:auto;width:100%;max-width:560px;max-height:calc(100dvh - 2 * var(--gutter));overflow-y:auto;box-shadow:var(--shadow-modal);animation:dialog-in var(--dur-sheet) var(--ease)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.dialog-head .btn-icon{margin-right:calc(-1 * var(--s2))}
.dialog-body{display:grid;gap:var(--s3);margin-top:var(--s3);color:var(--cream-2)}
.dialog video{width:100%;max-height:70dvh;background:var(--night)}
@media (max-width:767.98px){
  .dialog-sheet{place-items:end stretch;padding:0}
  .dialog-sheet .dialog-in{max-width:none;max-height:85dvh;border-radius:var(--r-m) var(--r-m) 0 0;padding-bottom:calc(var(--card-pad) + env(safe-area-inset-bottom));animation-name:sheet-up}
  .dialog-sheet .dialog-in::before{content:"";display:block;width:36px;height:4px;margin:calc(-1 * var(--s2)) auto var(--s3);border-radius:var(--r-full);background:var(--cream-3)}
}
.sheet-links{display:flex;flex-direction:column}
.sheet-links a,.sheet-links button{display:flex;align-items:center;width:100%;min-height:56px;padding:0;background:none;border:0;border-bottom:var(--soft);color:var(--cream);font:400 var(--t5) var(--f-body);text-decoration:none;text-align:left}

/* ==== §4.8 Toast ==== */
.toast{position:fixed;left:50%;bottom:calc(var(--s3) + env(safe-area-inset-bottom));z-index:var(--z-toast);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2 * var(--gutter));padding:12px var(--s3);background:var(--card);border:var(--hairline);border-radius:var(--r-m);font:400 var(--t-btn-sm)/20px var(--f-body);color:var(--cream);cursor:pointer;animation:fade-in var(--dur-sheet) var(--ease)}
.toast-error{border-left:2px solid var(--rose)}
.san .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
@media (min-width:1024px){ .toast,.san .toast{left:auto;right:var(--s5);bottom:var(--s5);transform:none} }

/* ==== §4.9 Tabs ==== */
.tabs{display:flex;gap:var(--s4);overflow-x:auto;border-bottom:var(--soft);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role="tab"]{flex:none;min-height:var(--tap);padding:0 2px;background:none;border:0;color:var(--cream-3);font:500 15px var(--f-body);white-space:nowrap;transition:color var(--dur-ui)}
.tabs [role="tab"]:hover{color:var(--cream-2)}
.tabs [role="tab"][aria-selected="true"]{color:var(--cream);box-shadow:inset 0 -1px 0 var(--gold)}
.tabs [role="tab"]:focus-visible{outline-offset:-2px}
[role="tabpanel"]{padding-top:var(--s4)}

/* ==== §4.10 Table ==== */
.prices{width:100%;border-collapse:collapse}
.prices th,.prices td{padding:var(--s3) 0;border-bottom:var(--soft);text-align:left;vertical-align:baseline;font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream)}
.prices thead th{font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3);border-bottom:var(--hairline)}
.prices td,.prices thead th:not(:first-child){text-align:right;padding-left:var(--s3);white-space:nowrap}
.prices td{font-variant-numeric:lining-nums tabular-nums}
.prices tbody tr:first-child > *{border-top:var(--hairline)}
.prices thead + tbody tr:first-child > *{border-top:0}
.book-row{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:baseline;padding-block:var(--s3);border-top:var(--soft)}
.book-row:not(.book-row + .book-row){border-top:var(--hairline)}
.book-row:last-of-type{border-bottom:var(--soft)}
.book-row > div{display:grid;gap:2px}
.book-row .name{font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream)}
.book-row .price{font-size:var(--t4);line-height:var(--lh4);text-align:right}
.book-row .btn{grid-column:1 / -1}
@media (min-width:768px){ .book-row{grid-template-columns:1fr auto auto;align-items:center;gap:var(--s5)} .book-row .btn{grid-column:auto} }
.table-scroll{overflow-x:auto;border:var(--soft);border-radius:var(--r-m)}
.table-scroll table{width:100%;border-collapse:collapse;font-size:var(--t-btn-sm)}
.table-scroll th{font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3);text-align:left;white-space:nowrap}
.table-scroll th,.table-scroll td{padding:12px var(--s3);border-bottom:var(--soft);vertical-align:middle}
.table-scroll tr:last-child td{border-bottom:0}
.disclosure{max-width:52ch;padding-left:var(--s3);border-left:2px solid var(--gold);font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3)}
.disclosure + .disclosure{margin-top:var(--s3)}

/* ==== §4.11 Player ==== */
.clip{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;overflow:hidden;background:var(--card);border:var(--soft);border-radius:var(--r-s);color:var(--cream)}
.clip img{width:100%;height:100%;object-fit:cover}
.clip .play{position:absolute;left:50%;top:50%;z-index:var(--z-raised);width:56px;height:56px;margin:-28px 0 0 -28px;border:1px solid var(--cream);border-radius:var(--r-full);background:color-mix(in srgb,var(--night) 55%,transparent);transition:border-color var(--dur-ui)}
.clip .play::after{content:"";position:absolute;left:22px;top:18px;border-left:14px solid var(--cream);border-top:10px solid transparent;border-bottom:10px solid transparent}
.clip:hover .play{border-color:var(--gold)}
.clip-cap{margin-top:var(--s2);font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3)}
.clip-cap .voice-sm{display:block;margin-bottom:var(--s1)}
.player{display:flex;align-items:center;gap:var(--s3)}
.player .play{position:relative;border-color:var(--gold-line);border-radius:var(--r-full)}
.player .play::before{content:"";margin-left:3px;border-left:12px solid var(--cream);border-top:8px solid transparent;border-bottom:8px solid transparent}
.player .play[aria-pressed="true"]::before{width:10px;height:14px;margin:0;border:0;border-left:3px solid var(--cream);border-right:3px solid var(--cream)}
.bar{position:relative;flex:1;height:1px;background:var(--line)}
.bar > span{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0}
.player time{font-variant-numeric:tabular-nums}

/* ==== §4.12 Avatar ==== */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;overflow:hidden;border:var(--hairline);border-radius:var(--r-full);background:var(--card);font:400 18px/1 var(--f-display);color:var(--cream);text-decoration:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-m{width:48px;height:48px;font-size:22px}
.avatar-mono{color:var(--gold);font-style:italic}
.avatar-l{width:56px;height:56px;font-size:24px}
a.avatar{width:var(--tap);height:var(--tap)}

/* ==== §4.13 Empty state ==== */
.empty{padding-block:var(--s4);color:var(--cream-2)}
.empty .btn-quiet{margin-left:var(--s1)}

/* ==== §4.14 Sanctuary rail, top bar and bottom tab bar ==== */
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.rail{display:none}
.topbar{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:0 var(--gutter);background:color-mix(in srgb,var(--night) 94%,transparent);border-bottom:var(--soft)}
.admin-tag{margin-left:var(--s2);color:var(--gold)}
.san-main{padding:var(--s4) var(--gutter) calc(96px + env(safe-area-inset-bottom))}
.san-head{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.san-head h1{font-size:var(--t2);line-height:var(--lh2)}
.san-grid{display:grid;gap:var(--s3)}
.san-legal{margin-top:var(--s6);max-width:var(--measure)}
.count{margin-left:auto;font-size:var(--t6);color:var(--cream-3);font-variant-numeric:tabular-nums}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:flex;padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--night) 97%,transparent);border-top:var(--soft)}
.tabbar a,.tabbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-height:56px;padding:0;background:none;border:0;color:var(--cream-3);font:500 var(--t-label)/1 var(--f-body);text-decoration:none}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.tabbar [aria-current="page"]{color:var(--gold)}
.tabbar [aria-current="page"]::before{content:"";position:absolute;top:-1px;left:var(--s3);right:var(--s3);height:1px;background:var(--gold)}
@media (min-width:768px){ .san-grid{grid-template-columns:1fr 1fr;gap:var(--s4)} .span-2{grid-column:1 / -1} }
@media (min-width:1024px){
  .shell{grid-template-columns:248px minmax(0,1fr)}
  .rail{position:sticky;top:0;display:flex;flex-direction:column;gap:var(--s5);height:100vh;padding:var(--s4);border-right:var(--soft);overflow-y:auto}
  .rail .who{display:flex;align-items:center;gap:var(--s3)}
  .rail .who-name{font:400 20px/1.2 var(--f-display);color:var(--cream)}
  .rail nav{display:grid;gap:2px}
  .rail nav a{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:0 12px;border-radius:var(--r-s);color:var(--cream-2);font-size:15px;text-decoration:none;transition:background-color var(--dur-ui),color var(--dur-ui)}
  .rail nav a:hover{color:var(--cream);background:var(--card)}
  .rail nav a[aria-current="page"]{color:var(--cream);background:var(--card);box-shadow:inset 2px 0 0 var(--gold)}
  .rail .out{margin-top:auto;align-self:flex-start}
  .topbar,.tabbar{display:none}
  .san-main{max-width:1040px;padding:var(--s6) var(--s7) var(--s8)}
  .san-head{grid-template-columns:1fr auto;align-items:end;gap:var(--s6);margin-bottom:var(--s6)}
  .san-head h1{font-size:var(--t1);line-height:var(--lh1)}
  .san-grid{gap:var(--s5)}
}

/* ==== §4.15 Grafted components ==== */
/* AI label: .label-ai in §2.1. Teal is for model output and nothing else. */
/* Ask the Oracle module (G1) */
.oracle{gap:var(--s4)}
.log{display:grid;gap:var(--s3)}
.bubble{display:grid;gap:var(--s2);max-width:var(--measure);padding:var(--s3);border-radius:var(--r-m);color:var(--cream)}
.bubble-ai{justify-self:start;background:var(--card-2);border-left:2px solid var(--teal-line)}
.bubble-ai .pill-ai{justify-self:start}
.bubble-me{justify-self:end;background:var(--deep);border:var(--soft)}
.composer{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.composer .actions{margin-top:0}
.spread{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);max-width:480px}
.spread li{display:grid;justify-items:start;gap:var(--s2)}
.spread .tarot{width:calc(100% - 12px);max-width:140px}
/* Tarot card: 300:517, 2px edge, hairline frame 6px outside. Face shown without JS and under reduced motion. */
.tarot{position:relative;display:block;width:140px;aspect-ratio:300/517;margin:6px;padding:0;background:none;border:0;border-radius:var(--r-s);color:var(--cream);perspective:1200px}
.tarot::after{content:"";position:absolute;inset:-6px;border:var(--hairline);border-radius:var(--r-s);pointer-events:none;transition:border-color var(--dur-ui)}
.tarot:hover::after{border-color:var(--gold)}
.tarot-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform var(--dur-flip) var(--ease-flip)}
.js .tarot[aria-pressed="false"] .tarot-in{transform:none}
.tarot-back,.tarot-face{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--r-s);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.tarot-back{background:var(--card) url(/assets/cards/back.svg) center/100% 100% no-repeat}
.tarot-back::before{content:none}
.tarot-face{object-fit:cover;transform:rotateY(180deg);background:var(--deep)}
@media (prefers-reduced-motion:reduce){ .js .tarot[aria-pressed="false"] .tarot-in{transform:rotateY(180deg)} }
.san .tarot{width:112px}
/* Today's card (G4) */
.today-in{display:grid;gap:var(--s5);align-items:start}
.today-text{display:grid;gap:var(--s3);align-content:start}
.today-text .btn{justify-self:start}
@media (min-width:640px){ .today-in{grid-template-columns:auto minmax(0,1fr)} }
/* Check-in (G3) */
.checkin{display:grid;gap:var(--s2)}
.checkin-q{display:flex;align-items:center;gap:var(--s2);color:var(--cream)}
.checkin.is-due .checkin-q::before{content:"";flex:none;width:8px;height:8px;border-radius:var(--r-full);background:var(--rose)}
.checkin-btns{display:flex;flex-wrap:wrap;gap:var(--tap-gap)}
/* Rosemary's note (G2) */
.note{display:flex;align-items:flex-start;gap:var(--s3);max-width:52ch}
.note > div{display:grid;gap:var(--s1)}
.note .avatar{width:48px;height:48px}
/* Disclosure block (G6): .disclosure in §4.10, beside the prices it belongs to. */

/* ==== §4.16 Tier card ==== */
.tier{display:flex;flex-direction:column;gap:var(--s3)}
.tier .pill{align-self:flex-start}
.tier h3 .price{font-size:var(--t3);line-height:var(--lh3)}
.includes{display:grid}
.includes::before{content:"";display:block;width:48px;height:1px;margin-bottom:var(--s2);background:var(--gold-line)}
.includes li{padding-block:var(--s2);color:var(--cream-2)}
.tier form{margin-top:auto}

/* ==== §4.17 Plate, section head, steps, FAQ ==== */
.plate{position:relative;margin:12px}
.plate img{width:100%;height:100%;object-fit:cover}
.plate::after{content:"";position:absolute;inset:-12px;z-index:var(--z-raised);border:var(--hairline);pointer-events:none}
.plate figcaption{margin-top:var(--s4);font:italic 400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream-2)}
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5)}
@media (min-width:1024px){ .two-col > .section-head{margin-bottom:0} }
.steps{display:grid;gap:var(--s5);counter-reset:step}
.steps > li{display:grid;gap:var(--s2);align-content:start;counter-increment:step;color:var(--cream-2)}
.steps > li::before{content:counter(step);font:var(--w-heading) var(--t3)/var(--lh3) var(--f-display);font-variant-numeric:lining-nums;color:var(--gold)}
@media (min-width:768px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr))} }
.faq{border-bottom:var(--soft)}
.faq details{border-top:var(--soft)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding-block:var(--s2);font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:20px;font:300 24px/1 var(--f-body);color:var(--gold);text-align:center}
.faq details[open] summary::after{content:"\2212"}
.faq details > :not(summary){max-width:var(--measure);padding-bottom:var(--s4);color:var(--cream-2)}

/* ==== §5 Page templates ==== */
/* 5.1 public page: header.nav[data-nav] + main#main + footer.footer[data-footer] */
/* homepage hero (§6.1) */
.hero{padding-block:var(--s4) 0}
.hero-grid{display:grid;gap:var(--s5)}
.hero .plate img{aspect-ratio:5/4;object-position:50% 28%}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.hero-text .actions{margin-top:var(--s2)}
.hero-meta{display:grid;gap:var(--s1)}
@media (min-width:768px){ .hero{padding-top:var(--s6)} .hero .plate img{aspect-ratio:4/5;object-position:50% 18%} }
@media (min-width:1024px){
  .hero{padding-top:var(--s7)}
  .hero-grid{grid-template-columns:7fr 5fr;gap:var(--s8);align-items:center}
  .hero .plate{order:2;margin:12px 12px 12px 0}
}
/* about section and page (§6.7, §5.4) */
.about-grid{display:grid;gap:var(--s5)}
.about-grid .plate img{aspect-ratio:3/2}
@media (min-width:1024px){ .about-grid{grid-template-columns:5fr 6fr;gap:var(--s8);align-items:start} }
/* breadcrumbs (card pages) */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);font-size:var(--t6);color:var(--cream-3)}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--cream-2);text-underline-offset:4px;text-decoration-color:var(--gold-line)}
.crumbs li + li::before{content:"/";margin-right:var(--s2);color:var(--cream-3)}
/* card index tiles (/learn/cards/) */
.tile{display:grid;gap:var(--s2);text-decoration:none;color:var(--cream)}
.tile img{width:100%;height:auto;aspect-ratio:300/517;object-fit:cover;border-radius:var(--r-s);border:var(--soft)}
.tile span{font:400 var(--t4)/var(--lh4) var(--f-display)}
.tile:hover img{border-color:var(--gold-line)}
/* blog rows */
.posts > li{display:grid;gap:var(--s2);padding-block:var(--s4);border-top:var(--soft)}
.posts > li:last-child{border-bottom:var(--soft)}
.posts h2{font-size:var(--t3);line-height:var(--lh3);font-weight:var(--w-heading)}
.posts h2 a{display:flex;align-items:center;min-height:var(--tap);text-decoration:none}
.posts h2 a:hover{text-decoration:underline;text-decoration-color:var(--gold-line);text-underline-offset:6px}
/* long-form body: legal pages, blog posts, card pages */
.prose{max-width:var(--measure);color:var(--cream-2)}
.prose > * + *{margin-top:var(--s3)}
.prose h2{margin-top:var(--s6);color:var(--cream)}
.prose h3{margin-top:var(--s5)}
.prose ul{list-style:disc;padding-left:1.25em}
.prose ol{list-style:decimal;padding-left:1.25em}
.prose li + li{margin-top:var(--s2)}
.prose a{color:var(--cream);text-underline-offset:4px;text-decoration-color:var(--gold-line)}
.prose a:hover{text-decoration-color:var(--gold)}
/* 404 and other three-link endings */
.block-tall{padding-block:var(--s8) var(--s9)}
.links{display:flex;flex-wrap:wrap;gap:var(--tap-gap) var(--s4);margin-top:var(--s4)}

/* ==== §8 Motion ==== */
.rise-1.in{transition-delay:0ms}
.rise-2.in{transition-delay:var(--dur-stagger)}
.rise-3.in{transition-delay:calc(2 * var(--dur-stagger))}
.rise-4.in{transition-delay:calc(3 * var(--dur-stagger))}
.rise-5.in{transition-delay:calc(4 * var(--dur-stagger))}
.rise-6.in{transition-delay:calc(5 * var(--dur-stagger))}
@keyframes sheen{to{transform:translateX(130%)}}
@keyframes sheet-down{from{opacity:0;transform:translateY(-8px)}}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}}
@keyframes fade-in{from{opacity:0}}
/* prefers-reduced-motion: the §2.1 rule removes every animation and transition; §4.15 shows every card face up. */

/* ==== §10 Accessibility baseline ==== */
/* Focus: the one :focus-visible rule in §2.1. Skip link: §2.2. Targets: every control above is 44px tall (48 for primary,
   secondary and fields). Closed menus and panels are [hidden] and [inert]; this keeps [hidden] winning over any class display. */
[hidden]{display:none}

/* Acknowledgment check box (Reiki, docs/BOOKING.md): a real box, never pre-ticked, the whole label is the 44px target.
   Used on the readings page and in the Sanctuary. */
.ack{display:grid;gap:var(--s2)}
.ack label{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;min-height:var(--tap);color:var(--cream);font-size:var(--t5);line-height:1.5;cursor:pointer}
.ack input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:10px 0 0;border:1px solid var(--cream-3);border-radius:var(--r-s);background:var(--deep);display:grid;place-content:center;cursor:pointer}
.ack input::before{content:"";width:12px;height:7px;border:2px solid var(--night);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.ack input:checked{background:var(--gold);border-color:var(--gold)}
.ack input:checked::before{opacity:1}
.ack.field-error input{border-color:var(--rose)}