/* ============================================================
   taaha.ai — site styles
   Tokens first (light, then dark), then primitives, then sections.
   ============================================================ */
:root{
  /* Fantasy Studio palette (fantasystudio.in): cream & ivory with ink, gold ramp 8E6E1E → E2C275 */
  --bg:#fbf8f1;
  --surface:#fffefb;
  --surface-2:#f4eee2;
  --field:#fffefb;
  --line:#e7dec9;
  --line-2:#c9a347;
  --fg:#1c1a16;
  --muted:#4a463e;
  --accent:#7a5e19;                                        /* gold for text and outlines on cream */
  --accent-fill:linear-gradient(135deg,#c9a347,#8e6e1e);  /* gold gradient for filled buttons and marks */
  --accent-ink:#1a150c;                                    /* ink on gold, never white */
  --accent-soft:rgba(184,144,43,.14);
  --hot:#c9584a;
  --hot-ink:#ffffff;
  --hot-soft:rgba(224,122,106,.16);
  --ok:#2e8b5b;
  --ok-soft:rgba(76,175,125,.16);
  --amber:#b8741a;  --amber-soft:rgba(255,176,84,.22);
  --fill:#d99e00;   --fill-soft:rgba(232,180,0,.2);   --fill-ink:#7a5a00;   /* "Filling fast": a booking, still taking more (yellow, owner 16 Sep; red = booked) */
  --salmon:#b8655c; --salmon-soft:rgba(207,127,118,.2);
  --rose:#d6407f;   --rose-soft:#fde7f1;
  --teal:#1f8f8c;   --teal-soft:#e0f6f5;
  --violet:#7a5e19; --violet-soft:rgba(184,144,43,.16);
  --grey:#8a8478;   --grey-soft:#ece8df;
  --radius:16px;
  --shadow:0 18px 50px rgba(40,34,18,.10);
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Capacitor 8 injects --safe-area-inset-* on Android; iOS only has env(). Use both. */
  --sat:max(env(safe-area-inset-top),var(--safe-area-inset-top,0px));
  --sab:max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px));
  color-scheme:light dark;
}
/* Dark tokens (the Fantasy Studio admin panel): warm dark brown, gold-tinted lines, cream text.
   Applied by the system preference unless the app forced light, and again when the app forced dark. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14110a;
    --surface:#241e12;
    --surface-2:#1a150c;
    --field:#171309;
    --line:rgba(226,194,117,.22);
    --line-2:rgba(226,194,117,.45);
    --fg:#f3ecdc;
    --muted:#b3a98f;
    --accent:#e2c275;
    --accent-fill:linear-gradient(135deg,#c9a347,#8e6e1e);
    --accent-ink:#1a150c;
    --accent-soft:rgba(184,144,43,.16);
    --hot:#e07a6a;
    --hot-ink:#1a150c;
    --hot-soft:rgba(224,122,106,.16);
    --ok:#4caf7d;
    --ok-soft:rgba(76,175,125,.16);
    --amber:#ffb054;  --amber-soft:rgba(255,176,84,.16);
    --fill:#f5e24a;   --fill-soft:rgba(245,226,74,.16);  --fill-ink:#f5e24a;
    --salmon:#cf7f76; --salmon-soft:rgba(207,127,118,.18);
    --rose:#ff6bab;   --rose-soft:rgba(255,107,171,.16);
    --teal:#6fc8c0;   --teal-soft:rgba(111,200,192,.16);
    --violet:#e2c275; --violet-soft:rgba(184,144,43,.16);
    --grey:#9a9a9a;   --grey-soft:rgba(154,154,154,.16);
    --shadow:0 18px 40px -18px rgba(0,0,0,.85);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#14110a;
    --surface:#241e12;
    --surface-2:#1a150c;
    --field:#171309;
    --line:rgba(226,194,117,.22);
    --line-2:rgba(226,194,117,.45);
    --fg:#f3ecdc;
    --muted:#b3a98f;
    --accent:#e2c275;
    --accent-fill:linear-gradient(135deg,#c9a347,#8e6e1e);
    --accent-ink:#1a150c;
    --accent-soft:rgba(184,144,43,.16);
    --hot:#e07a6a;
    --hot-ink:#1a150c;
    --hot-soft:rgba(224,122,106,.16);
    --ok:#4caf7d;
    --ok-soft:rgba(76,175,125,.16);
    --amber:#ffb054;  --amber-soft:rgba(255,176,84,.16);
    --fill:#f5e24a;   --fill-soft:rgba(245,226,74,.16);  --fill-ink:#f5e24a;
    --salmon:#cf7f76; --salmon-soft:rgba(207,127,118,.18);
    --rose:#ff6bab;   --rose-soft:rgba(255,107,171,.16);
    --teal:#6fc8c0;   --teal-soft:rgba(111,200,192,.16);
    --violet:#e2c275; --violet-soft:rgba(184,144,43,.16);
    --grey:#9a9a9a;   --grey-soft:rgba(154,154,154,.16);
    --shadow:0 18px 40px -18px rgba(0,0,0,.85);
    color-scheme:dark;
}
:root[data-theme="light"]{ color-scheme:light; }

/* ---------- base ---------- */
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* wins over any display: rule on the same element */
html{ scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }   /* no blue flash on every tap on Android (owner, 5 Oct 2026); our own :active colours show the press */
html,body{ margin:0; background:var(--bg); color:var(--fg); }
body{ font:16px/1.6 var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3{ font-family:var(--font-display); letter-spacing:0; line-height:1.15; margin:0; }
h1{ font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700; letter-spacing:-.01em; line-height:1.1; }
h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:700; }
h3{ font-size:1.15rem; font-weight:700; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ max-width:100%; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }
section{ padding:48px 0; }
@media (max-width:720px){ section{ padding:36px 0; } }
.eyebrow{ font-weight:600; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.eyebrow-hot{ color:var(--hot); }
.sub{ color:var(--muted); font-size:1.08rem; max-width:60ch; margin-top:14px; }
.fine{ color:var(--muted); font-size:.9rem; margin-top:14px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 24px;
  border-radius:13px; font-weight:600; font-size:1rem; text-decoration:none; border:1px solid transparent;
  cursor:pointer; font-family:var(--font-body); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent-fill); color:var(--accent-ink); box-shadow:0 8px 20px -10px var(--accent); }
.btn-primary:hover{ box-shadow:0 12px 26px -10px var(--accent); }
.btn-primary:disabled{ opacity:.6; cursor:default; }
.btn-ghost{ background:var(--surface); border-color:var(--line); color:var(--fg); }
.btn-ghost:hover{ border-color:var(--muted); }
.btn-sm{ height:40px; padding:0 16px; font-size:.92rem; border-radius:11px; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line); padding-top:var(--sat); }
.nav-in{ display:flex; align-items:center; gap:28px; height:64px; }
.brand{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:0; text-decoration:none; }
.brand span{ color:var(--accent); }
.brand{ display:inline-flex; align-items:center; }
.brand-mark{ display:inline-flex; width:32px; height:32px; margin-right:10px; border-radius:50%; border:2px solid var(--accent); color:var(--accent);
  align-items:center; justify-content:center; font-size:1rem; vertical-align:middle; }
.brand .brand-mark{ font-family:var(--font-display); font-size:1rem; font-weight:700; }
/* logo splash on the first page of an app session: same place and look as the native splash, so the hand-over is seamless */
.boot-splash{ display:none; }
html.boot .boot-splash{ display:grid; position:fixed; inset:0; z-index:10000; place-items:center; background:var(--bg); transition:opacity .2s ease; }
html.boot-out .boot-splash{ opacity:0; pointer-events:none; }
/* sized and coloured like the native splash (its ring is 22% of the screen height, brand gold #b8902b), and nudged to the true
   screen centre when the web view is inset by the phone's safe areas */
.boot-splash .brand-mark{ --r:var(--boot-ring, min(48vw, 192px)); width:var(--r); height:var(--r); margin:0; border:calc(var(--r) * .068) solid #b8902b; color:#b8902b; align-items:center; justify-content:center; box-sizing:border-box;
  transform:translateY(calc((env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)) / 2)); }
.boot-splash .mark{ width:69%; height:69%; }
.mark{ display:block; width:62%; height:62%; background:currentColor; -webkit-mask:url(/img/mark.png) center/contain no-repeat; mask:url(/img/mark.png) center/contain no-repeat; }
.links{ display:flex; gap:22px; margin-left:auto; }
.links a{ text-decoration:none; color:var(--muted); font-weight:500; font-size:.95rem; }
.links a:hover{ color:var(--fg); }
.links-cta{ display:none; }
.menu{ display:none; width:44px; height:44px; border:0; background:none; padding:10px; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; margin-right:-10px; }
.menu i{ display:block; height:2px; background:var(--fg); border-radius:2px; transition:transform .2s, opacity .2s; }
@media (max-width:820px){
  .nav-in{ gap:12px; }
  .nav-cta{ margin-left:auto; }
  .menu{ display:flex; }
  .links{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line); padding:8px 20px 16px; box-shadow:var(--shadow); }
  .links a{ padding:12px 0; border-bottom:1px solid var(--line); font-size:1.05rem; color:var(--fg); }
  .links a:last-child{ border-bottom:0; }
  .links-cta{ display:block; color:var(--accent) !important; font-weight:600; }
  .nav.open .links{ display:flex; }
  .nav.open .menu i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.open .menu i:nth-child(2){ opacity:0; }
  .nav.open .menu i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:420px){ .nav-cta{ display:none; } .menu{ margin-left:auto; } }

/* ---------- landing (short) ---------- */
.hero{ padding:44px 0 28px; }
.hero-in{ max-width:640px; }
.hero h1{ font-size:clamp(2rem,6vw,3.1rem); line-height:1.08; }
.hero .lead{ color:var(--muted); font-size:1.08rem; margin-top:16px; max-width:52ch; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.hero-auth{ margin-top:22px; max-width:440px; }
.hero-card{ padding:20px; border-radius:18px; gap:14px; }
.hero-card .auth-h{ font-size:1.25rem; }
.hero .auth-status{ text-align:left; margin-top:8px; }
.auth-fine{ margin:0; text-align:center; }
.scroll-hint{ color:var(--accent); font-weight:600; text-decoration:none; }
.features h2,.how h2,.faq h2{ font-size:clamp(1.4rem,4vw,1.9rem); }
.feat-list{ list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:720px){ .feat-list{ grid-template-columns:minmax(0,1fr); gap:10px; } }
.feat-list li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.feat-list b{ font-family:var(--font-display); font-size:1.02rem; display:block; }
.feat-list p{ color:var(--muted); font-size:.92rem; line-height:1.45; margin-top:3px; }
.ico{ width:40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ico svg{ width:22px; height:22px; }
.ico-hot{ background:var(--hot-soft); color:var(--hot); }
.steps{ list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:820px){ .steps{ grid-template-columns:minmax(0,1fr); gap:10px; } }
.steps li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.steps b{ font-family:var(--font-display); font-size:1.02rem; display:block; }
.steps p{ color:var(--muted); font-size:.92rem; margin-top:3px; }
.step-no{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--accent-fill); color:var(--accent-ink); font-family:var(--font-display); font-weight:700; flex:none; }

/* ---------- faq ---------- */
.faq-wrap{ max-width:760px; }
.faq details{ border-top:1px solid var(--line); padding:6px 0; }
.faq details:first-of-type{ margin-top:16px; }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 0; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--accent); font-weight:400; line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--muted); padding:0 0 16px; max-width:64ch; }

/* ---------- fields (sign-in and app forms) ---------- */
.field{ display:grid; gap:6px; font-weight:600; font-size:.92rem; }
.field em{ font-style:normal; font-weight:400; color:var(--muted); }
.field textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--field); color:var(--fg);
  font:inherit; font-size:1rem; outline:none; resize:vertical; min-height:72px; }
.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field input,.field select{ width:100%; height:50px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:var(--field);
  color:var(--fg); font:inherit; font-size:1rem; outline:none; -webkit-appearance:none; appearance:none; }
.field select{ background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px; }
.field input:focus,.field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.phone-wrap{ display:flex; align-items:stretch; }
.phone-wrap .prefix{ display:flex; align-items:center; padding:0 14px; border:1px solid var(--line); border-right:0; border-radius:12px 0 0 12px;
  background:var(--surface-2); color:var(--muted); font-weight:600; }
.phone-wrap input{ border-radius:0 12px 12px 0; min-width:0; }

/* ---------- store buttons (10 Oct 2026: Taaha is on the App Store and Google Play). Never inside the app: Apple refuses a Google Play link there. ---------- */
.get-app{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.store-btn{ display:inline-flex; flex-direction:column; justify-content:center; height:50px; min-width:150px; padding:0 18px; border-radius:12px;
  background:#000; color:#fff; border:1px solid #a6a6a6; text-decoration:none; line-height:1.15; }
.store-btn small{ font-size:.7rem; letter-spacing:.02em; }
.store-btn b{ font-size:1.1rem; font-weight:600; }
.store-btn:hover{ border-color:#fff; }
html.is-android .store-ios{ order:2; }
html.native-app .get-app{ display:none; }
html.native-app .web-only{ display:none; }   /* words that are true only on the website (inside the app sign-in is phone only, no Google) */
.faq details .get-app{ margin:0 0 16px; }
.start .get-app{ justify-content:center; }

/* ---------- get started band ---------- */
.start{ background:var(--surface-2); }
.start-in{ text-align:center; display:grid; justify-items:center; }
.start .sub{ margin-left:auto; margin-right:auto; }
.start .cta-row{ justify-content:center; }

/* ---------- sign-in focus mode: tapping the card turns it into a full-screen panel ---------- */
.focus-bar{ display:none; }
html.signin-focus, html.signin-focus body{ overflow:hidden; }
html.signin-focus .hero-auth{ position:fixed; inset:0; z-index:80; margin:0; max-width:none; background:var(--bg); overflow:auto;
  display:flex; flex-direction:column; align-items:center; padding:calc(6px + var(--sat)) 16px calc(24px + var(--sab)); animation:focusIn .22s ease; }
html.signin-focus .focus-bar{ display:flex; align-items:center; justify-content:space-between; width:100%; max-width:420px; height:58px; flex:none; }
.focus-back{ height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--fg); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; }
.focus-back:active{ background:var(--surface-2); }
html.signin-focus .hero-auth > .auth-card{ width:100%; max-width:420px; margin-top:auto; }
html.signin-focus .hero-auth > .auth-status{ width:100%; max-width:420px; margin-bottom:auto; }
@keyframes focusIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding:28px 0 calc(28px + var(--sab)); color:var(--muted); font-size:.9rem; }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn,.menu i{ transition:none; }
  html.signin-focus .hero-auth{ animation:none; }
}

/* ---------- someone's public calendar (booked / busy / free days only) ---------- */
.pc{ display:grid; gap:8px; }
.pc-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pc-bar b{ font-family:var(--font-display); font-size:1.05rem; color:var(--accent); }
.pc-nav{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--fg); font-size:1.2rem; cursor:pointer; }
.pc-dow{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; font-size:.68rem; font-weight:600; color:var(--muted); }
.pc-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
/* the same boxed cell as the home calendar: number top-left in a fixed circle (today = filled gold), the morning/evening bar inside at the right */
.pc-cell{ box-sizing:border-box; min-height:46px; border:1.5px solid transparent; border-radius:10px; background:var(--surface-2); display:flex; align-items:flex-start; justify-content:flex-start; font-size:.85rem; color:var(--muted); padding:5px 13px 5px 5px; font-family:inherit; cursor:pointer; min-width:0; }
.pc-cell.sel{ border-color:var(--accent); }
.pc-cell{ position:relative; }
.pc-sess{ position:absolute; top:7px; bottom:7px; right:5px; width:4px; display:grid; grid-template-rows:1fr 1fr; gap:3px; }
.pc-sess i{ display:block; width:auto; height:auto; border-radius:2px; background:var(--line); opacity:.7; }
.pc-sess i.b{ background:var(--hot); opacity:1; } .pc-sess i.f{ background:var(--fill); opacity:1; } .pc-sess i.busy{ background:var(--salmon); opacity:1; } .pc-sess i.free{ background:var(--ok); opacity:1; }
.pc-day{ font-size:.85rem; color:var(--fg); text-align:center; margin:6px 0 0; font-weight:500; }
.pc-hint{ margin-left:auto; }
.pc-bar-ic{ display:inline-grid; grid-template-rows:6px 6px; gap:2px; width:5px; margin-right:6px; }
.pc-bar-ic b{ display:block; border-radius:1.5px; box-sizing:border-box; }
.pc-bar-ic b.o{ background:none; border:1px solid var(--muted); } .pc-bar-ic b.b{ background:var(--hot); }
.pc-cell.blank{ background:transparent; }
.pc-cell b{ width:22px; height:22px; margin:-1px 0 0 -1px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:600; line-height:1; flex:none; }
.pc-cell.past{ opacity:.45; }
.pc-cell.today b{ background:var(--accent-fill); color:var(--accent-ink); font-weight:700; }
.pc-cell.booked{ color:var(--fg); background:var(--hot-soft); }
.pc-cell.booked.part{ background:color-mix(in srgb, var(--hot-soft) 50%, var(--surface-2)); }
.pc-cell.filling{ color:var(--fg); background:var(--fill-soft); }
.pc-cell.free{ color:var(--fg); background:var(--ok-soft); }
.pc-cell.busy{ color:var(--fg); background:var(--salmon-soft); }
.pc-legend{ display:flex; flex-wrap:nowrap; white-space:nowrap; align-items:center; gap:6px 10px; font-size:.74rem; color:var(--muted); margin-top:8px; overflow-x:auto; scrollbar-width:none; }
.pc-legend::-webkit-scrollbar{ display:none; }
.pc-legend > span{ flex:none; }
.pc-legend span{ display:inline-flex; align-items:center; gap:6px; }
.pc-i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.pc-i.booked{ background:var(--hot); } .pc-i.filling{ background:var(--fill); } .pc-i.busy{ background:var(--salmon); } .pc-i.free{ background:var(--ok); }
.pc-legend .pc-hint-2{ margin-left:0; }
.pc-note{ grid-column:1 / -1; text-align:center; color:var(--muted); font-size:.9rem; padding:14px 0; }
.pf-cal{ text-align:left; justify-items:stretch; margin-top:14px; }
.pf-cal h2{ font-size:1.15rem; }

.foot p a{ color:var(--muted); text-decoration:none; }
.foot p a:hover{ color:var(--accent); }