/* Theme directions for Sheet 01: same pages and layout, a calmer, more refined finish.
   Each sets <html data-theme="…">. Shared refinements first, then each theme's colours and type. */

/* ---------------------------------------------------------------- shared: hairlines, soft depth, quiet type */
:root[data-theme]{
  --bw:1px; --bw2:1px; --press:0;
  --sh0:none; --sh1:none; --sh2:0 1px 2px rgba(0,0,0,.05);
  --sh3:0 1px 2px rgba(0,0,0,.04),0 6px 18px -10px var(--shc);
  --sh4:0 1px 2px rgba(0,0,0,.04),0 14px 34px -16px var(--shc);
  --sh5:var(--sh4); --sh6:0 2px 4px rgba(0,0,0,.04),0 24px 50px -22px var(--shc); --sh7:var(--sh6); --sh8:var(--sh6); --sh9:var(--sh6);
  --shm:none; --edgel:rgba(255,255,255,.22);
  /* one royal type family for every look: Cormorant Garamond for headings and italics, Cinzel's engraved capitals for labels, Jost for reading */
  --display:'Jost',system-ui,sans-serif; --head:'Cormorant Garamond',Georgia,serif; --serif:'Cormorant Garamond',Georgia,serif; --mono:'Cinzel',Georgia,serif;
  --w8:600; --w7:500; --tk:.1;
}
[data-theme] body{font-weight:400;-webkit-font-smoothing:antialiased}
[data-theme] .mono{letter-spacing:.15em;font-weight:700;font-size:11px}
[data-theme] em{letter-spacing:0;font-weight:500}
/* every eyebrow rule ends in a small diamond */
[data-theme] .eyebrow::before{width:34px;height:7px;background:var(--acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='7'%3E%3Crect y='3' width='25' height='1'/%3E%3Cpath d='M30.5 0 34 3.5 30.5 7 27 3.5z'/%3E%3C/svg%3E") no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='7'%3E%3Crect y='3' width='25' height='1'/%3E%3Cpath d='M30.5 0 34 3.5 30.5 7 27 3.5z'/%3E%3C/svg%3E") no-repeat}
[data-theme] .hl::before{height:1px;bottom:.02em;left:0;right:0;background:var(--acc);border-radius:0}
[data-theme] .btn{font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--btn);color:var(--btnt);border-color:var(--btn)}
[data-theme] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
[data-theme] .btn svg:not(.wa) *{stroke:currentColor}
[data-theme] .btn svg:not(.wa) [fill="#17130F"]{fill:currentColor}
[data-theme] .btn:active,[data-theme] .btn.press{opacity:.85}
[data-theme] .hdr{background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
[data-theme] .hdr .wm{font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:.2em}
[data-theme] .hdr .wm small{font-family:var(--mono);font-weight:500;letter-spacing:.5em;color:var(--acc)}
[data-theme] .hnav a{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
/* the page you're on: crisp light letters on the dark pill (the gold of the dark looks stays) */
[data-theme]:not([data-mode="dark"]) .hnav a.here{color:var(--card)}
[data-theme] .hdr .tab{background:transparent;border-color:var(--edge);color:var(--ink)}
[data-theme] .tape{transform:none;border:0;margin:24px 0}
[data-theme] .tape.y{transform:none}
[data-theme] .tape .row{font-weight:400;letter-spacing:.02em;text-transform:none}
[data-theme] .hdr .prog{height:1.5px;background:var(--acc)}
/* buttons sitting on the dark panels take the accent, so they never vanish into the panel */
[data-theme] :is(.svcard.c3,.money,.curtain,.menuov,.flip,.aend,.bookband) .btn:not(.ghost):not(.wa2){background:var(--acc);border-color:var(--acc);color:var(--btnt)}
[data-theme] .dock .go .ar{background:color-mix(in srgb,var(--btnt) 14%,transparent)}
[data-theme] .dock .go .ar svg{stroke:var(--btnt)}
[data-theme] .dock .wa .dot{border-width:1.5px}
[data-theme] .dest .ds-ink,[data-theme] .city .art .ds-ink{stroke-width:1.4}
[data-theme] .dest .ds-acc .a1{fill:var(--lm1)}
[data-theme] .dest .ds-acc .a2{fill:var(--lm2)}
[data-theme] .wall{stroke-width:3;stroke:color-mix(in srgb,var(--ink) 80%,transparent)}
[data-theme] :is(.money,.svcard.c3,.flip,.curtain,.menuov,.aend) em{color:var(--mari)}
[data-theme] .sh .ln{stroke:color-mix(in srgb,var(--ink) 60%,transparent);stroke-width:1.1}
[data-theme] .sh .ln.wl{stroke-width:1.8}
[data-theme] svg [stroke="#17130F"]{stroke:var(--edge);stroke-width:1}
[data-theme] svg [fill="#FFFBF3"]{fill:var(--card)}
[data-theme] svg [fill="#17130F"]{fill:var(--ink)}

/* ---------------------------------------------------------------- 1 · Ivory & Emerald: a heritage hotel's stationery */
:root[data-theme="ivory"]{
  --paper:#F4EFE6; --card:#FBF8F2; --ink:#1C2621; --ink2:#5B625D; --deep:#1E3A2F; --deep2:#2A4A3C;
  --mari:#D9C5A0; --mari2:#EDE2CC; --rust:#8E6B3A; --peach:#D9C7A7; --brown:#7A5C32; --green:#2F6B4B;
  --acc:#A8864F; --btn:#1E3A2F; --btnt:#F4EFE6; --lm1:#E8DCC3; --lm2:#CFDDD2;
  --edge:rgba(142,107,58,.5); --edge2:rgba(142,107,58,.3); --frame:rgba(255,250,240,.72); --shc:rgba(30,58,47,.28);
  --rk:.32;
}
[data-theme] .h2{font-size:48px;line-height:1}
[data-theme] .home-hero h1{line-height:1}
[data-theme="ivory"] .tape .row b{color:var(--mari)}

/* ---------------------------------------------------------------- 2 · Sandstone & Indigo: Varanasi at dusk, soft and modern */
:root[data-theme="sandstone"]{
  --paper:#EFE8DE; --card:#F9F5EF; --ink:#1A2140; --ink2:#5A5F74; --deep:#1D2648; --deep2:#2A2F57;
  --mari:#E6CDB5; --mari2:#F2E3D4; --rust:#B0502F; --peach:#E2B8A0; --brown:#8A4A2E; --green:#2E6A55;
  --acc:#B0502F; --btn:#B0502F; --btnt:#FFF8F1; --lm1:#EBD6C2; --lm2:#C9CFE4;
  --edge:rgba(26,33,64,.26); --edge2:rgba(26,33,64,.16); --frame:rgba(255,248,241,.72); --shc:rgba(29,38,72,.30);
  --rk:1.25;
}
[data-theme="sandstone"] .btn.ghost{background:var(--card);border-color:transparent;box-shadow:var(--sh2)}
[data-theme="sandstone"] .sh,[data-theme="sandstone"] .shtabs button{border-color:transparent}

/* ---------------------------------------------------------------- 3 · the dark looks: deep colour, never black, brass hairlines; the photos glow
   each look sets its colours here; everything they share is under [data-mode="dark"] */
:root[data-mode="dark"]{
  --ink:#F2EADB; --ink2:#B9B0A0; --rust:#D8B97C; --brown:#C9A86A; --green:#7CC79E;
  --acc:#C9A86A; --btn:#C9A86A; --ondeep:#F2EADB; --onmari:#F2EADB; --maritx:#D8B97C; --glow:transparent;
  --edge:rgba(201,168,106,.4); --edge2:rgba(201,168,106,.26); --frame:rgba(216,185,124,.6); --edgel:rgba(201,168,106,.3); --shc:rgba(0,0,0,.55); --line:rgba(242,234,219,.06);
  --rk:.5;
}
/* Emerald Night: a heritage library after dark, bottle green and brass */
:root[data-theme="emerald"]{
  --paper:#0F201A; --card:#172C24; --deep:#0A1712; --deep2:#12241D; --mari:#1F3B30; --mari2:#284A3D; --peach:#22392F;
  --white:#1A3028; --btnt:#0C1A14; --onink:#0C1A14; --free:#1C3329; --ink2:#AFBBAE;
}
/* Indigo Dusk: Varanasi after sunset, ink blue and lamplight */
:root[data-theme="indigo"]{
  --paper:#131830; --card:#1C2240; --deep:#0D1124; --deep2:#161B36; --mari:#272E52; --mari2:#313962; --peach:#262B48;
  --white:#1F2546; --btnt:#11152B; --onink:#11152B; --free:#222947; --ink2:#AEB0C6;
}
/* Oxblood: a maharaja's dining room, deep wine and gold */
:root[data-theme="oxblood"]{
  --paper:#220F13; --card:#2E161B; --deep:#180A0D; --deep2:#241014; --mari:#3E1C23; --mari2:#4B242C; --peach:#3A1D22;
  --white:#33191E; --btnt:#1C0B0E; --onink:#1C0B0E; --free:#381A20; --ink2:#C6AFA8;
}
[data-mode="dark"] .curtain{--cr:var(--acc)}
/* no pale wash on the dark page: only a faint warm light from the top corner */
[data-mode="dark"] body::before{background:radial-gradient(50vmax 40vmax at 88% 0%,rgba(201,168,106,.09),transparent 70%),radial-gradient(40vmax 36vmax at 0% 100%,rgba(120,84,40,.08),transparent 70%)}
[data-mode="dark"] body{background-image:none}
[data-mode="dark"] :is(.bk .glint,.ab-glint,.ebrow .cv .gl){opacity:.35}
[data-mode="dark"] .btn.wa2,[data-mode="dark"] .dock .wa{background:var(--card)!important}
[data-mode="dark"] .dest .ds-ink,[data-mode="dark"] .city .art .ds-ink{stroke:var(--ink)}
[data-mode="dark"] .hdr .mk{filter:brightness(1.35)}
[data-mode="dark"] .badge2[style*="--mari"]{fill:var(--acc)!important}
[data-mode="dark"] :is(.money,.svcard.c3,.flip,.curtain,.menuov,.aend) em,[data-mode="dark"] em{color:var(--rust)}
[data-mode="dark"] .h2,[data-mode="dark"] h1{color:#F6EFE2}

/* ---------------------------------------------------------------- real devices, in every look: titanium phones with glass,
   an island and status bar, iOS type, a WhatsApp chat that looks like WhatsApp, notifications like iOS banners */
[data-theme] :is(.cphone,.phone,.notifs){
  --ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue','Segoe UI',Roboto,Arial,sans-serif;
  --display:var(--ui); --head:var(--ui); --serif:var(--ui); --mono:var(--ui);
  --ink:#000; --ink2:#6D6D72; --card:#fff; --white:#fff; --mari:#34C759; --onmari:#fff; --maritx:#34C759; --mari2:#E9E9EE;
  --edge:rgba(60,60,67,.16); --edge2:rgba(60,60,67,.12); --rk:1; --w8:600; --w7:600; --tk:1; --bw:.5px; --bw2:.5px;
  letter-spacing:0; font-family:var(--ui); color:#000;
}
[data-theme] :is(.cphone,.phone) .mono{letter-spacing:0}
/* the frame: a thin titanium band, black glass bezel, soft studio shadow */
[data-theme] .cphone{width:262px;height:548px;padding:3px;border:0;border-radius:50px;display:block;overflow:visible;
  background:linear-gradient(145deg,#9b9893 0%,#4a4845 6%,#232220 22%,#161615 50%,#262523 80%,#5b5955 94%,#a7a49f 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35),inset 0 0 2px 1px rgba(0,0,0,.6),0 70px 90px -45px rgba(20,16,10,.6),0 30px 40px -28px rgba(20,16,10,.45)}
[data-theme] .pscreen{border:8px solid #050505;border-radius:47px;background-color:#EFEAE2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M10 14c3-4 8-4 11 0s8 4 11 0'/%3E%3Ccircle cx='60' cy='16' r='5'/%3E%3Cpath d='M48 50l5 9 5-9zM18 44h12M24 38v12M66 62c0-5 7-5 7 0s-7 9-7 9-7-4-7-9 7-5 7 0'/%3E%3Crect x='10' y='64' width='14' height='10' rx='2'/%3E%3C/svg%3E");background-size:84px 84px}
[data-theme] .pscreen::after{border-radius:39px;background:linear-gradient(118deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 28%)}
[data-theme] .pframe .pb{width:3px;background:linear-gradient(90deg,#2a2826,#8d8a85 55%,#2a2826);border-radius:2px}
[data-theme] .pframe .pb1{left:-2px;top:104px;height:24px}[data-theme] .pframe .pb2{left:-2px;top:146px;height:46px}[data-theme] .pframe .pb3{right:-2px;top:156px;height:70px}
/* iOS status bar and the WhatsApp header, light grey glass */
[data-theme] .sbar2{height:44px;padding:0 22px 0 30px;background:#F6F6F6;color:#000}
[data-theme] .sbar2 b{font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:-.01em}
[data-theme] .sbar2 .isl{top:9px;width:86px;height:25px;margin-left:-43px;border-radius:14px;background:#000}
[data-theme] .sbar2 i,[data-theme] .sbar2 .sig{background:#000}
[data-theme] .sbar2 .bat{border:1px solid rgba(0,0,0,.4);background:linear-gradient(90deg,#000 80%,transparent 80%);background-clip:content-box;border-radius:3px}
[data-theme] .cphone .bar{background:#F6F6F6;color:#000;padding:4px 12px 9px 10px;gap:9px;box-shadow:0 .5px 0 rgba(0,0,0,.18);border:0}
[data-theme] .cphone .bar::before{content:"";width:9px;height:9px;border-left:2.4px solid #007AFF;border-bottom:2.4px solid #007AFF;transform:rotate(45deg);margin:0 2px 0 4px;flex:none}
[data-theme] .cphone .bar .av{width:34px;height:34px;border:0;background:#1E3A2F;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
[data-theme] .cphone .bar .av img{width:22px;filter:brightness(1.15)}
[data-theme] .cphone .bar b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
[data-theme] .cphone .bar small{font-size:11.5px;letter-spacing:0;text-transform:none;color:#8A8A8E;opacity:1}
[data-theme] .cphone .bar small i{display:none}
[data-theme] .cphone .msgs{padding:10px 9px;gap:4px}
[data-theme] .cphone .day{font-size:11px;font-weight:500;letter-spacing:.02em;color:#54656F;background:#fff;border:0;border-radius:8px;padding:4px 9px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
[data-theme] .bub2{border:0;font-size:13.5px;line-height:1.33;color:#111B21;padding:6px 9px 5px;box-shadow:0 1px .5px rgba(11,20,26,.13);font-weight:400}
[data-theme] .bub2.them{background:#fff;border-radius:0 9px 9px 9px}
[data-theme] .bub2.me{background:#D9FDD3;border-radius:9px 0 9px 9px;font-weight:400}
[data-theme] .bub2 .tm{font-size:10.5px;color:#667781;letter-spacing:0}
[data-theme] .bub2.me .tm::after{color:#53BDEB}
[data-theme] .bub2 a{text-decoration-color:#027EB5;text-decoration-thickness:1px;color:#027EB5;font-weight:500}
[data-theme] .typing{border:0;background:#fff;border-radius:0 9px 9px 9px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
[data-theme] .typing i{background:#8696A0}
[data-theme] .cphone .inbar{background:#F6F6F6;border-top:.5px solid rgba(0,0,0,.18);padding:7px 10px 26px;gap:8px}
[data-theme] .cphone .inbar span{height:32px;border:.5px solid #D1D1D6;border-radius:17px;background:#fff;color:#8E8E93;font-size:14px}
[data-theme] .cphone .inbar i{width:32px;height:32px;background:#25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11z'/%3E%3C/svg%3E") center/17px no-repeat}
[data-theme] .homeb{width:104px;height:4.5px;bottom:8px;margin-left:-52px;border-radius:3px;background:#000}
/* the soft disc behind each phone becomes a gentle light, not a cut-out circle */
[data-theme] .chatwrap::before,[data-theme] .stage .blob{background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 30%,transparent),transparent)!important;background-color:transparent!important;border:0;width:380px;height:380px;transform:none!important}
[data-theme] .stage .ring{border:1px solid var(--edge2)}

/* the consultancy phone: same titanium and glass, an iOS app inside */
[data-theme] .phone{padding:3px;border:0;border-radius:40px;overflow:visible;
  background:linear-gradient(145deg,#9b9893 0%,#4a4845 6%,#232220 22%,#161615 50%,#262523 80%,#5b5955 94%,#a7a49f 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35),inset 0 0 2px 1px rgba(0,0,0,.6),0 60px 80px -40px rgba(20,16,10,.6),0 26px 34px -24px rgba(20,16,10,.45)}
[data-theme] .phone::before{inset:3px;border:7px solid #050505;border-radius:37px;background:#F2F2F7}
[data-theme] .phone::after{inset:10px;border-radius:30px;background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 26%)}
[data-theme] .phone .notch{top:16px;width:64px;height:19px;margin-left:-32px;border-radius:12px;background:#000}
[data-theme] .scr{inset:10px;border-radius:30px;padding:40px 12px 12px;font-size:12px;color:#000}
[data-theme] .scr::before{content:"9:41";position:absolute;top:10px;left:22px;font-size:11.5px;font-weight:600}
[data-theme] .scr::after{content:"";position:absolute;top:12px;right:18px;width:46px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 10'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='6' width='2.6' height='4' rx='.6'/%3E%3Crect x='3.8' y='4.4' width='2.6' height='5.6' rx='.6'/%3E%3Crect x='7.6' y='2.6' width='2.6' height='7.4' rx='.6'/%3E%3Crect x='11.4' y='.6' width='2.6' height='9.4' rx='.6'/%3E%3Cpath d='M22 2.2a8.6 8.6 0 0 1 6 2.4l-1 1.1a7 7 0 0 0-10 0l-1-1.1a8.6 8.6 0 0 1 6-2.4zm0 3a5.4 5.4 0 0 1 3.8 1.5L22 10.4l-3.8-3.7A5.4 5.4 0 0 1 22 5.2z'/%3E%3Crect x='31' y='1' width='12.5' height='8' rx='2.2' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='.9'/%3E%3Crect x='32.4' y='2.4' width='9' height='5.2' rx='1.2'/%3E%3Crect x='44.2' y='3.6' width='1.3' height='2.8' rx='.6' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat}
[data-theme] .scr>small{font-size:10.5px;letter-spacing:.02em;color:#6D6D72;font-weight:500}
[data-theme] .scr h4{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:2px 0 10px}
[data-theme] :is(.ticks,.pills) li{border:0;border-radius:10px;padding:9px 10px;font-weight:500;box-shadow:0 .5px 0 rgba(0,0,0,.06)}
[data-theme] .ticks li i{border:1.5px solid #C7C7CC;color:#fff}
[data-theme] .ticks li.ok i{border-color:#34C759}
[data-theme] .pills em{border:0;border-radius:6px;font-weight:600;font-size:9px;letter-spacing:.02em;padding:3px 7px}
[data-theme] .pills em.no{background:#E9E9EE;color:#3C3C43}
[data-theme] .buy{border:0;border-radius:10px}
[data-theme] .buy li{border-bottom:.5px solid rgba(60,60,67,.18);font-weight:500}
[data-theme] .buy b{font-weight:600;font-size:11px}
[data-theme] .shots img{border-radius:6px;border:0}
[data-theme] .pn{border:0;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
[data-theme] .pn img,[data-theme] .notif img{background:#1E3A2F;border:0;border-radius:8px;padding:4px}
[data-theme] :is(.kpis div,.spark){border:0;border-radius:10px}
[data-theme] .spark path{stroke:#007AFF}
[data-theme] .am i{border:0;background:#E9E9EE;border-radius:6px}
/* notifications drawn as iOS banners: frosted, rounded, small grey time */
[data-theme] .notif{background:rgba(246,246,248,.86);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:0;border-radius:20px;padding:10px 12px;box-shadow:0 10px 30px -8px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.08)}
[data-theme] .notif img{width:34px;height:34px}
[data-theme] .notif b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
[data-theme] .notif span{font-size:12.5px;color:#3C3C43}
[data-theme] .notif .t{font-size:11px;color:#8E8E93;text-transform:lowercase;letter-spacing:0}

/* in Noir the phones switch to dark mode, as a real phone would at night */
[data-mode="dark"] .pscreen{background-color:#0B141A;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M10 14c3-4 8-4 11 0s8 4 11 0'/%3E%3Ccircle cx='60' cy='16' r='5'/%3E%3Cpath d='M48 50l5 9 5-9zM18 44h12M24 38v12M66 62c0-5 7-5 7 0s-7 9-7 9-7-4-7-9 7-5 7 0'/%3E%3Crect x='10' y='64' width='14' height='10' rx='2'/%3E%3C/svg%3E")}
[data-mode="dark"] :is(.sbar2,.cphone .bar,.cphone .inbar){background:#1F2C34;color:#E9EDEF}
[data-mode="dark"] .sbar2 i,[data-mode="dark"] .sbar2 .sig{background:#E9EDEF}
[data-mode="dark"] .sbar2 .bat{border-color:rgba(255,255,255,.45);background:linear-gradient(90deg,#E9EDEF 80%,transparent 80%);background-clip:content-box}
[data-mode="dark"] .cphone .bar b{color:#E9EDEF}
[data-mode="dark"] .cphone .bar::before{border-color:#00A884}
[data-mode="dark"] .cphone .day{background:#182229;color:#8696A0}
[data-mode="dark"] .bub2,[data-mode="dark"] .bub2.them,[data-mode="dark"] .typing{background:#202C33;color:#E9EDEF}
[data-mode="dark"] .bub2.me{background:#005C4B}
[data-mode="dark"] .bub2 .tm{color:#8696A0}
[data-mode="dark"] .cphone .inbar span{background:#2A3942;border-color:transparent;color:#8696A0}
[data-mode="dark"] .homeb{background:#fff}
[data-mode="dark"] .notif{background:rgba(44,44,46,.82)}
[data-mode="dark"] .notif b{color:#fff}
[data-mode="dark"] .notif span{color:#D1D1D6}
[data-theme="ivory"]{--free:#F3EAD6}
[data-theme="sandstone"]{--free:#F4E6D8}
/* payment marks keep their own colours, so they sit on light chips in every look */
[data-mode="dark"] .pmb{background:#F4EFE6;border-color:transparent;color:#2b2b2b}

/* ---------------------------------------------------------------- frames: brass hairlines on cards, a mat line inside every large photo */
[data-theme] :is(.card .ph,.gcard .gp,.hcard .hp,.lst-img,.xfade,.rcard,.city .pic,.drum .reel,.gal img,.cross .ph){outline:1px solid var(--frame);outline-offset:-7px}
[data-theme] :is(.lst-img,.gal img,.cross .ph){outline-offset:-5px}
/* the featured cards carry a second, finer rule a few pixels outside their edge, like engraved stationery */
[data-theme] :is(.hcard,.sh,.card,.gcard,.svcard,.city .pic){box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--edge2),var(--sh3)}

/* ---------------------------------------------------------------- the ebook's pages stay paper in every look */
[data-theme] .fb .pgf .fr{color:#1C2621}
[data-theme] .fb .txt h5{font-family:var(--head);font-weight:600;font-size:24px;letter-spacing:0}
[data-theme] .fb .tp{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;outline:1px solid rgba(142,107,58,.4);outline-offset:-12px}
[data-theme] .fb .tp img{width:62%;height:auto;margin:14px 0 10px;object-fit:contain}
[data-theme] .fb .tp h5{font-size:24px;margin:0 0 8px;white-space:nowrap}
[data-theme] .fb .tp h5 em{color:#8E6B3A}
[data-theme] .fb .tp p{max-width:82%;font-size:11.5px}
[data-theme] .fb .tp .by{display:block;margin-top:14px;font-family:var(--head);font-size:17px;font-style:italic;color:#1C2621}
[data-theme] .fb .tp .by small{display:block;font-style:normal;margin-top:2px}
[data-theme] .fb :is(.txt small,.txt .gist){color:#7A5C32}
[data-theme] .fb .txt .pno{color:#5B625D}
[data-theme] .fb .txt .gist{border-left-color:#D9C5A0}

/* ---------------------------------------------------------------- finishing touches */
/* filled buttons carry a fine inner rule, like a frame around a plaque */
[data-theme] .btn:not(.ghost):not(.wa2){outline:1px solid color-mix(in srgb,currentColor 28%,transparent);outline-offset:-4px}

/* ---------------------------------------------------------------- dark mode: everything stays legible and keeps its detail */
/* a look switch crossfades as one picture (common.js), so the colours must not drift on their own timers */
:root[data-theme]{transition:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
/* the logo's wordmark in cream, its roof still gold */
[data-mode="dark"] .foot .lg{content:url(/assets/brand/logo-noir.png)}
/* line icons drawn in near-black ink take the light ink instead */
[data-mode="dark"] svg[stroke="#17130F"]{stroke:var(--ink)}
[data-mode="dark"] svg [fill="#17130F"],[data-mode="dark"] svg[fill="#17130F"]{fill:var(--ink)}
/* the city drawings: their soft colour patches turn to dusk gold and sage instead of pink and cream */
:root[data-mode="dark"]{--lm1:rgba(212,180,122,.46);--lm2:rgba(108,184,142,.4)}
[data-mode="dark"] .city .art .a1{fill:var(--lm1)}
[data-mode="dark"] .city .art .a2{fill:var(--lm2)}
[data-mode="dark"] .city .art .ds-ink{stroke:var(--rust)}
/* gold chips and badges carry dark text, not cream on gold */
[data-mode="dark"] :is(.plancard .flag,.offer .pct,.badge,.price .off,.ab-stick,.ebrow .stk,.sh[data-k="ebook"] .shh .chip2){color:var(--btnt)}
/* "what it helps you avoid": a dark card with gold strikes instead of cream on gold */
[data-mode="dark"] .avoid{background:linear-gradient(165deg,var(--mari),var(--deep));color:var(--ink)}
[data-mode="dark"] .avoid h4{color:var(--rust)}
[data-mode="dark"] .avoid li{border-bottom-color:rgba(201,168,106,.22)}
[data-mode="dark"] .avoid li span{--sc:var(--rust)}
/* a cut-out multiplied onto paper would vanish into the dark */
[data-mode="dark"] .founder .pt img{mix-blend-mode:normal}
/* ticks: the plan cards' checkboxes and the tick icons in lists, in gold */
[data-mode="dark"] .plancard li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23D4B47A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-mode="dark"] :is(i,.ic,.x,.y,.tick) > svg [stroke="#17130F"]{stroke:var(--rust);stroke-width:2.4}
[data-mode="dark"] .ctf .live{background:rgba(110,190,140,.1);border-color:rgba(110,190,140,.45);color:#9AD7AE}
[data-mode="dark"] .ctf .live i{background:#6FCB8F}
[data-mode="dark"] .chips span{border:1px solid var(--edge);color:var(--rust);background:rgba(201,168,106,.06)}
[data-mode="dark"] .vs .tg i{background:rgba(201,168,106,.14);box-shadow:inset 0 -2px 0 var(--acc)}
[data-mode="dark"] .vs .r{border-bottom-color:rgba(201,168,106,.2)}
[data-theme="ivory"] .vs .ic .y svg [stroke]{stroke:var(--deep)}
[data-mode="dark"] .pal button.on{border-color:var(--acc)}

/* contrast pass (WCAG AA) across every look */
[data-mode="dark"] :is(.rcard,.dcard) .cap b{color:var(--rust)}
:is([data-theme="ivory"],[data-theme="sandstone"]) :is(.plancard .flag,.offer .pct,.badge,.price .off,.ab-stick,.ebrow .stk,.sh[data-k="ebook"] .shh .chip2,.avoid,.avoid h4){color:#fff}
[data-theme="ivory"] :is(.svcard.c3,.money,.curtain,.menuov,.flip,.aend,.bookband) .btn:not(.ghost):not(.wa2){color:#10241B}
[data-theme="ivory"] .svcard.c1 em{color:#6B4F28}
:root[data-theme="ivory"]{--ink2:#3B413D}
:root[data-theme="sandstone"]{--ink2:#393D51}

/* ---------------------------------------------------------------- the ebook, a book launch: the book on a lit stage, two ways in,
   the numbers in brass, a word from Aman, and the contents set like a printed contents page */
[data-theme] .bookstage{height:440px;margin-top:20px;border:1px solid var(--edge);border-radius:calc(26px*var(--rk));overflow:hidden;
  background:radial-gradient(58% 46% at 50% 44%,rgba(232,200,130,.34),transparent 72%),radial-gradient(120% 70% at 50% 120%,rgba(0,0,0,.35),transparent 60%),linear-gradient(180deg,var(--deep2),var(--deep));
  box-shadow:var(--sh3),inset 0 0 0 6px color-mix(in srgb,var(--deep) 70%,transparent),inset 0 0 0 7px rgba(216,185,124,.35)}
[data-theme] .bookstage .beam{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,236,196,.22),rgba(255,236,196,0) 78%);clip-path:polygon(38% 0,62% 0,88% 100%,12% 100%);pointer-events:none}
[data-theme] .bookstage .dust{position:absolute;inset:-40% 0 0;pointer-events:none;opacity:.8;animation:dust 14s linear infinite;
  background-image:radial-gradient(1.6px 1.6px at 18% 30%,#F3DDA4,transparent),radial-gradient(1.2px 1.2px at 72% 18%,#F3DDA4,transparent),radial-gradient(1.8px 1.8px at 84% 56%,#E8C882,transparent),radial-gradient(1.2px 1.2px at 30% 70%,#F3DDA4,transparent),radial-gradient(1.4px 1.4px at 58% 44%,#E8C882,transparent),radial-gradient(1px 1px at 10% 88%,#F3DDA4,transparent),radial-gradient(1.5px 1.5px at 92% 82%,#F3DDA4,transparent),radial-gradient(1.1px 1.1px at 46% 92%,#E8C882,transparent);
  background-size:100% 50%}
@keyframes dust{to{transform:translateY(40%)}}
[data-theme] .bookstage .arch{width:260px;height:56px;bottom:46px;border:1px solid rgba(216,185,124,.55);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.18) 70%,transparent),radial-gradient(closest-side,rgba(216,185,124,.35),transparent);box-shadow:0 0 30px rgba(216,185,124,.25)}
[data-theme] .bookstage .badge{color:#2A1E0E;border:0;background:radial-gradient(circle at 35% 28%,#F6E2AE,#D8B97C 52%,#A9833F);
  box-shadow:0 0 0 3px rgba(246,226,174,.25),0 0 0 6px rgba(216,185,124,.18),0 12px 26px rgba(0,0,0,.4)}
[data-theme] .bookstage .badge small{color:#4A3412}
[data-theme] .bk .glint{opacity:.7}
.ecta{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin-top:18px}
.ecta .btn{height:52px}
.estats{list-style:none;display:flex;margin-top:18px;border-top:1px solid var(--edge2);border-bottom:1px solid var(--edge2);padding:12px 0}
.estats li{flex:1;text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.estats li+li{border-left:1px solid var(--edge2)}
.estats b{display:block;font-family:var(--head);font-size:36px;font-weight:600;letter-spacing:0;line-height:1;color:var(--rust);margin-bottom:4px;text-transform:none}
[data-theme] .pdfnote{background:none;border:0;padding:0;margin-top:14px;font-weight:500;color:var(--ink2);font-size:13px}
[data-theme] .pdfnote svg{width:18px;height:18px;color:var(--rust)}
.equote{margin-top:22px;position:relative;display:grid;grid-template-columns:58px 1fr;column-gap:14px;align-items:center;border:1px solid var(--edge);border-radius:calc(20px*var(--rk));background:var(--card);padding:18px 16px 16px;box-shadow:var(--sh)}
.equote::before{content:"“";position:absolute;top:-22px;right:18px;font-family:var(--head);font-size:84px;line-height:1;color:var(--rust);opacity:.55}
.equote img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid var(--edge);grid-row:1 / span 2;outline:1px solid var(--edge2);outline-offset:3px}
.equote blockquote{font-family:var(--head);font-style:italic;font-size:19px;line-height:1.25;color:var(--ink)}
.equote figcaption{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.equote figcaption small{display:block;margin-top:2px;letter-spacing:.06em;text-transform:none;font-family:var(--display);font-size:12px;color:var(--ink2)}
/* the contents, set like the page in a printed book */
[data-theme] .toc{background:var(--card);border-radius:calc(6px*var(--rk));padding:14px 18px 10px;box-shadow:var(--sh3),inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--edge2)}
[data-theme] .toc .hd{display:flex;justify-content:center;gap:12px;background:none;color:var(--rust);border-bottom:1px solid var(--edge2);padding:6px 0 12px;margin-bottom:4px;font-size:11px;letter-spacing:.24em}
[data-theme] .toc .hd span+span::before{content:"·";margin-right:12px}
[data-theme] .toc li{padding:9px 0;border-bottom:0;gap:12px;background:none}
[data-theme] .toc li i{font-family:var(--head);font-style:italic;font-size:16px;font-weight:500;width:24px;color:var(--rust);letter-spacing:0}
[data-theme] .toc li b{display:flex;align-items:baseline;gap:8px;font-family:var(--head);font-size:18px;font-weight:600;letter-spacing:0}
[data-theme] .toc li b::after{content:"";flex:1;min-width:18px;border-bottom:1.5px dotted var(--edge);transform:translateY(-3px)}
[data-theme] .toc li small{font-size:9px;letter-spacing:.1em}
[data-theme] .toc li:not(.free) small{font-size:0;gap:0}
[data-theme] .toc li:not(.free) small svg{width:13px;height:13px;color:var(--ink2);opacity:.7}
[data-theme] .toc li.free small{color:var(--btnt);background:var(--btn);padding:3px 7px;border-radius:calc(6px*var(--rk))}
@media (min-width:900px){
  [data-theme] #s-top #bookstage{height:640px}
  [data-theme] #s-top #bookstage .arch{width:360px;height:70px;bottom:92px}
  [data-theme] .toc li:not(.free) small{font-size:9px;gap:4px}
  .ecta{max-width:520px}
  .equote{grid-template-columns:72px 1fr;padding:22px 24px}
  .equote img{width:72px;height:72px}
  .equote blockquote{font-size:24px}
  [data-theme] .toc{padding:20px 28px 14px;column-gap:40px}
}

/* the co-founder: a framed portrait beside his name, the same arch-and-brass language as Aman's */
.cofound{display:grid;grid-template-columns:42% 1fr;gap:16px;align-items:end;margin-top:18px;border:var(--bw) solid var(--edge);border-radius:calc(24px*var(--rk));background:var(--card);padding:14px;box-shadow:var(--sh)}
.cofound .cf-pic{position:relative;aspect-ratio:3/4;border-radius:calc(120px*var(--rk)) calc(120px*var(--rk)) calc(16px*var(--rk)) calc(16px*var(--rk));overflow:hidden;background:radial-gradient(120% 80% at 50% 100%,var(--mari2),var(--mari) 70%);box-shadow:inset 0 0 0 1px var(--edge)}
/* his cut-out stands in a lit arch, like Aman's portrait */
.cofound .cf-arch{position:absolute;inset:12% 12% -2%;border-radius:999px 999px 0 0;border:1px solid var(--rust);opacity:.45}
.cofound .cf-pic img{position:absolute;left:-12%;bottom:0;width:124%;height:100%;object-fit:contain;object-position:50% 100%;display:block;filter:drop-shadow(0 10px 18px var(--shc))}
.cofound .cf-pic .abadge{position:absolute;z-index:2;top:auto;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;padding:5px 9px}
.cofound .cf-txt{padding:4px 2px 6px}
.cofound .cf-txt>span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.cofound h3{font-family:var(--head);font-size:34px;line-height:.98;font-weight:var(--w8);letter-spacing:calc(-.02em*var(--tk));margin:6px 0 10px}
.cofound h3 em{display:block;font-style:italic;color:var(--rust)}
.cofound p{font-size:13.5px;line-height:1.45;color:var(--ink2)}
@media (min-width:900px){.cofound{max-width:1000px;grid-template-columns:320px 1fr;gap:40px;padding:22px}.cofound h3{font-size:56px}.cofound p{font-size:16px;max-width:46ch}}
/* About us: the three co-founders get identical cards, side by side on a wide screen */
.ahero2 .aintro{margin-top:18px}
.ahead{font-family:var(--head);font-size:48px;line-height:.98;font-weight:var(--w8);letter-spacing:calc(-.03em*var(--tk));margin:8px 0 12px}
.founders{display:grid;gap:14px;margin-top:22px}
.founders .cofound{margin-top:0}
.ahero2 .aquote{margin-top:24px;max-width:760px}
.ahero2 .actas{margin-top:20px}
.aend.solo{padding-bottom:28px}
@media (min-width:900px){
  .ahead{font-size:84px}
  .ahero2 .arole{font-size:20px;max-width:46ch}
  .founders{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
  .founders .cofound{grid-template-columns:1fr;max-width:none;gap:18px;align-items:start;align-content:start;padding:16px}
  .founders .cofound h3{font-size:42px}
  .founders .cofound p{font-size:15px}
  .ahero2 .actas{max-width:620px}
  .aend.solo{padding-bottom:0}
}
/* a close-up (a selfie): smaller in the arch, its cropped shoulders fading out, so both founders read at the same size */
.cofound .cf-pic.close img{left:6%;width:88%;height:72%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
/* laptops between 900 and 1200px: the menu stays on one line and the header never runs past the window */
[data-theme] .hnav a{white-space:nowrap}
@media (min-width:900px) and (max-width:1199px){
  [data-theme] .hnav{gap:0}
  [data-theme] .hnav a{padding:0 9px;letter-spacing:.08em;font-size:11.5px}
  [data-theme] .hdr .tab{display:none}
}

/* the closing "talk to Aman" card is light peach in the light themes, so its italic words cannot be peach too */
[data-theme]:not([data-mode="dark"]) .aend em{color:var(--rust)}
/* phones: the dock's longest labels ("Ask about my saved homes", "Book the free 30-min call") fit beside the arrow */
@media (max-width:430px){ [data-theme] .dock .go{letter-spacing:.09em;padding-left:14px} }
@media (max-width:374px){ [data-theme] .dock .go{font-size:11.5px;letter-spacing:.06em} }