/* Shared shell for each product's own site. Each page sets --tint and its own surface. */
@font-face { font-family:"Geist"; src:url(../fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight:100 900; }
@font-face { font-family:"Geist Mono"; src:url(../fonts/geist-mono-latin-wght-normal.woff2) format("woff2"); font-weight:100 900; }
:root {
  --canvas:#FFFFFF; --panel:#FFFFFF; --sunk:#F5F5F7; --line:#E6E6EA; --line-2:#D6D6DC;
  --ink:#0B0B0F; --ink-2:#4F4F5A; --ink-3:#6B6B76; --accent:#FF5A1F;
  --btn:#0B0B0F; --on-btn:#FFFFFF; --r:12px; --pill:999px;
  --shadow-lg:0 2px 4px rgba(11,11,15,.05), 0 32px 64px -16px rgba(11,11,15,.18);
  --ease:cubic-bezier(.2,.7,.1,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--surface,var(--canvas)); color:var(--ink); font:15px/1.55 "Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.soon-tag { display:inline-block; position:relative; top:-7px; margin-left:-3px; font-size:8.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1; color:#fff; background:#1F6FD1; border-radius:4px; padding:2px 4px 2px 4px; white-space:nowrap; }
nav .soon-tag, .lab .soon-tag { align-self:flex-start; top:-2px; }
.mono { font-family:"Geist Mono",ui-monospace,monospace; }
.grain { position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Lab bar: a thin line above the product's own header, back to Localoy AI. */
.lab { border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-3); }
.lab .wrap { display:flex; align-items:center; gap:12px; height:40px; }
.lab a { color:var(--ink-3); text-decoration:none; transition:color .2s; }
.lab a:hover, .lab a[aria-current] { color:var(--ink); }
/* The way home: the Localoy mark and name, as the home page's header shows them. */
.lab .lab-home { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; font-size:13.5px; letter-spacing:-.01em; white-space:nowrap; }
.lab .lab-home svg { width:16px; height:16px; flex:none; }
.lab .lab-home:hover { opacity:.75; }
.lab .sl { color:var(--line-2, var(--ink-3)); }
.lab .here { color:var(--ink); font-weight:500; }
.lab .sp { margin-left:auto; display:flex; gap:20px; }

.top { position:sticky; top:0; z-index:20; border-bottom:1px solid transparent; transition:background .3s, border-color .3s; }
.top.scrolled { background:color-mix(in srgb, var(--surface,var(--canvas)) 82%, transparent); backdrop-filter:blur(14px) saturate(140%); border-color:var(--line); }
.top .wrap { display:flex; align-items:center; gap:20px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; letter-spacing:-.015em; white-space:nowrap; flex-shrink:0; }
.brand .mk { width:30px; height:30px; border-radius:9px; background:#161210; border:1px solid var(--line); display:grid; place-items:center; }
.brand .mk img, .brand .mk svg { width:21px; height:21px; }
.brand em { font-style:normal; color:var(--tint); }
.top nav { display:flex; gap:2px; margin-left:16px; }
.top nav a { padding:6px 12px; border-radius:var(--pill); color:var(--ink-2); font-size:14px; transition:background .2s,color .2s; }
.top nav a:hover { background:var(--panel); color:var(--ink); }
.top .right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.btn { white-space:nowrap; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px; border-radius:var(--pill); border:1px solid var(--line); background:var(--panel); font-size:14px; font-weight:500; transition:transform .25s var(--ease), border-color .2s; }
.btn:hover { border-color:var(--line-2); transform:translateY(-1px); }
.btn.solid { background:var(--btn); color:var(--on-btn); border-color:var(--btn); }
.btn.lg { height:48px; padding:0 24px; font-size:15px; }


/* Hero: the product's name, the line it owns, and who runs it. */
.hero { padding:96px 0 64px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px; align-items:end; }
.hero .tag { font-size:13px; color:var(--tint); letter-spacing:.02em; }
.hero h1 { font-size:clamp(2.6rem,5.8vw,4.4rem); line-height:1.02; letter-spacing:-.05em; margin:16px 0 0; font-weight:600; max-width:14ch; }
.hero h1 .t { color:var(--tint); }
.hero p { color:var(--ink-2); font-size:18px; max-width:54ch; margin:24px 0 0; }
.hero .cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.chief { border-top:1px solid var(--line); padding-top:20px; }
.chief .face { display:flex; align-items:center; gap:14px; }
.chief img { width:56px; height:56px; border-radius:50%; }
.chief b { display:block; font-size:16px; font-weight:600; }
.chief span { color:var(--ink-2); font-size:14px; }
.chief p { font-size:14.5px; margin:16px 0 0; color:var(--ink-2); }

.window { border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow-lg); overflow:hidden; }
.window .bar { display:flex; align-items:center; gap:14px; height:44px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--sunk); }
.dots { display:flex; gap:7px; } .dots i { width:11px; height:11px; border-radius:50%; background:#D6D6DC; }
.window .wt { margin:0 auto; font-size:13px; color:var(--ink-2); }
.live { font-size:11.5px; color:var(--ink-3); border:1px solid var(--line); border-radius:var(--pill); padding:2px 9px; display:flex; align-items:center; gap:6px; }
.live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--tint); }
.window .stage { height:700px; background:var(--canvas); }
.window iframe { width:100%; height:100%; border:0; display:block; }
.note { font-size:13px; color:var(--ink-3); margin:12px 0 0; }

section.s { padding:128px 0 0; }
.kicker { font-size:13px; color:var(--tint); margin:0 0 12px; letter-spacing:.02em; }
h2 { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; line-height:1.05; margin:0; max-width:20ch; font-weight:600; }
.sub { color:var(--ink-2); font-size:17px; max-width:58ch; margin:16px 0 0; }

/* Features: a ruled two-column list, numbered. */
.feats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 56px; margin-top:48px; counter-reset:f; }
.feat { border-top:1px solid var(--line); padding:24px 0 28px; display:grid; grid-template-columns:40px 1fr; counter-increment:f; }
.feat::before { content:counter(f,decimal-leading-zero); font:12px "Geist Mono",monospace; color:var(--tint); padding-top:4px; }
.feat b { display:block; font-size:17px; font-weight:600; letter-spacing:-.015em; margin-bottom:6px; }
.feat p { margin:0; color:var(--ink-2); }

/* Use cases: what you'd type, what it does, what it uses. */
.cases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:48px; }
.case { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:24px; display:flex; flex-direction:column; }
.case h3 { font-size:16.5px; margin:0 0 14px; letter-spacing:-.015em; font-weight:600; }
.case q { display:block; quotes:"\201C" "\201D"; font-size:15px; color:var(--ink); padding-left:14px; border-left:2px solid var(--tint); margin-bottom:14px; }
.case p { margin:0; color:var(--ink-2); font-size:14.5px; }
.case .uses { margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; gap:6px; }
.case .uses span { font-size:12px; color:var(--ink-3); border:1px solid var(--line); border-radius:var(--pill); padding:2px 9px; }

/* Steps: how a job moves. */
.steps { display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); margin-top:48px; border-top:1px solid var(--line); position:relative; }
.steps::before { content:""; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--tint); transition:width 1.8s var(--ease); }
.steps.in::before { width:100%; }
.step { padding:24px 24px 0 0; }
.step i { display:block; font:normal 12px "Geist Mono",monospace; color:var(--ink-3); margin-bottom:24px; }
.step b { display:block; font-size:16.5px; margin-bottom:6px; letter-spacing:-.01em; }
.step p { margin:0; color:var(--ink-2); font-size:14.5px; }

/* Pricing */
.prices { display:grid; grid-template-columns:repeat(var(--pn,3),minmax(0,1fr)); gap:16px; margin-top:48px; }
.price { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:28px; }
.price.main { border-color:color-mix(in srgb,var(--tint) 45%, var(--line)); }
.price small { color:var(--ink-2); font-size:13.5px; }
.price .amt { font-size:36px; font-weight:600; letter-spacing:-.04em; margin:10px 0 4px; }
.price p { color:var(--ink-2); margin:0 0 18px; font-size:14.5px; }
.price ul { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.price li { padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2); }

/* Download */
.dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:40px; }
.dl a { border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:18px; transition:border-color .2s, transform .3s var(--ease); }
.dl a:hover { border-color:var(--tint); transform:translateY(-2px); }
.dl b { display:block; font-weight:600; }
.dl span { color:var(--ink-3); font-size:13px; }
.dl-first { margin-top:28px; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:var(--sunk); font-size:14px; color:var(--ink-2); }
.dl-first p { margin:0 0 10px; }
.dl-first .dl-first-h { color:var(--ink); font-weight:600; font-size:15px; margin-bottom:4px; }
.dl-first ul { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dl-first li b { display:block; color:var(--ink); font-weight:600; margin-bottom:4px; }
.dl-first em { font-style:normal; color:var(--ink); font-weight:500; }
.dl-first code { font-family:"Geist Mono",ui-monospace,monospace; font-size:12.5px; }
.dl-first a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.dl-first p:last-child { margin:0; }
@media (max-width:900px) { .dl-first ul { grid-template-columns:1fr; gap:12px; } }
.dl .ver { display:block; margin-top:6px; font-style:normal; font-size:12px; color:var(--ink-3); font-family:"Geist Mono",ui-monospace,monospace; }
.dl .ver:empty { display:none; }

/* FAQ */
.faq { margin-top:40px; border-top:1px solid var(--line); max-width:820px; }
.faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary { cursor:pointer; list-style:none; font-weight:500; font-size:16px; display:flex; justify-content:space-between; }
.faq summary::after { content:"+"; color:var(--ink-3); transition:transform .3s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq p { color:var(--ink-2); margin:10px 0 0; max-width:66ch; }

.end { text-align:center; padding:150px 0 130px; }
.end h2 { margin:0 auto; }
.end .cta { display:flex; justify-content:center; gap:10px; margin-top:28px; flex-wrap:wrap; }

.fam a { display:flex; align-items:center; gap:8px; } .fam img { width:14px; height:14px; }
/* Rooms are shown by their chief's face, as in the app's rail (no marks). */
img.fc { border-radius:50%; object-fit:cover; background:var(--panel); }
.brand .mk:has(img.fc) { background:none; border:0; }
.brand .mk img.fc { width:30px; height:30px; }
.fam img.fc { width:20px; height:20px; }



/* The demo: a still of the real app; the live app opens full-screen on a click, so scrolling is never taken over. */
.poster { position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:var(--canvas); cursor:pointer; overflow:hidden; }
.poster img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; transition:transform .8s var(--ease), filter .4s; }
.poster:hover img { transform:scale(1.01); filter:brightness(.97); }
.poster .go { position:absolute; left:50%; bottom:32px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 22px; border-radius:var(--pill); background:var(--btn); color:var(--on-btn); font:500 15px "Geist",sans-serif; box-shadow:var(--shadow-lg); }
.poster .go i { width:0; height:0; border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.demo-modal { position:fixed; inset:0; z-index:100; display:none; background:rgba(11,11,15,.55); backdrop-filter:blur(6px); padding:3vh 3vw; }
.demo-modal.open { display:flex; flex-direction:column; animation:fadein .25s var(--ease); }
@keyframes fadein { from { opacity:0; } }
.demo-modal .frame { position:relative; flex:1; border-radius:16px; overflow:hidden; background:var(--canvas); box-shadow:var(--shadow-lg); }
.demo-modal iframe { width:100%; height:100%; border:0; display:block; }
.demo-modal .bar { display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:13.5px; padding:0 4px 10px; }
.demo-modal .bar button { border:0; background:rgba(255,255,255,.14); color:#fff; border-radius:var(--pill); height:32px; padding:0 14px; font:500 13.5px "Geist",sans-serif; cursor:pointer; }

@media (max-width:900px) {
  .top nav, .lab .sp { display:none; }
  .hero { grid-template-columns:1fr; padding-top:64px; }
  .feats, .cases, .prices, .dl { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .window .stage { height:560px; }
}
/* On a narrow phone the header keeps the product's name and Download; Sign in is left out there. */
@media (max-width:480px) { .top .right .btn:not(.solid) { display:none; } body:not(.loy-lab-home) .top .right .btn.solid { display:none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .rv { opacity:1 !important; transform:none !important; } }

/* One footer on every page. */
footer.foot { border-top:1px solid var(--line); padding:56px 0 64px; color:var(--ink-3); font-size:13.5px; }
footer.foot .wrap { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
footer.foot b { display:block; color:var(--ink); font-weight:500; margin-bottom:12px; }
footer.foot a { display:flex; align-items:center; gap:8px; padding:4px 0; color:var(--ink-2); } footer.foot a:hover { color:var(--ink); }
footer.foot .fc { width:20px; height:20px; border-radius:50%; }
footer.foot .fbrand { color:var(--ink); font-weight:600; font-size:16px; letter-spacing:-.015em; gap:10px; padding:0; }
footer.foot .fbrand svg { width:22px; height:22px; }
footer.foot p { margin:12px 0 18px; max-width:34ch; line-height:1.5; }
@media (max-width:900px) { footer.foot .wrap { grid-template-columns:1fr 1fr; } footer.foot .fb { grid-column:1 / -1; } }

/* The theme switch: a sun in dark, a moon in light. */
.loy-theme { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); display:inline-grid; place-items:center; cursor:pointer; padding:0; }
.loy-theme:hover { color:var(--ink); }
.loy-theme svg { width:18px; height:18px; grid-area:1/1; }
.loy-theme .sun { display:none; }
/* Dark: by the computer's setting first, then the visitor's choice (header switch). */
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --canvas:#0B0B0D; --panel:#141417; --sunk:#1A1A1E; --line:#26262B; --line-2:#33333A; --ink:#F4F4F5; --ink-2:#A3A3AD; --ink-3:#8C8C97; --btn:#F4F4F5; --on-btn:#0B0B0F; --accent:#FF7A3D; --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 32px 64px -16px rgba(0,0,0,.6); } }
:root[data-theme="dark"] { --canvas:#0B0B0D; --panel:#141417; --sunk:#1A1A1E; --line:#26262B; --line-2:#33333A; --ink:#F4F4F5; --ink-2:#A3A3AD; --ink-3:#8C8C97; --btn:#F4F4F5; --on-btn:#0B0B0F; --accent:#FF7A3D; --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 32px 64px -16px rgba(0,0,0,.6); }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .loy-theme .sun { display:block; } }
:root[data-theme="dark"] .loy-theme .sun { display:block; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .loy-theme .moon { display:none; } }
:root[data-theme="dark"] .loy-theme .moon { display:none; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .loy-lab-business { --tint:#FF7A3D; --surface:#1A1310; } }
:root[data-theme="dark"] .loy-lab-business { --tint:#FF7A3D; --surface:#1A1310; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .loy-lab-design { --tint:#6CA4FF; --surface:#10141B; } }
:root[data-theme="dark"] .loy-lab-design { --tint:#6CA4FF; --surface:#10141B; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .loy-lab-studio { --tint:#E8D44D; --surface:#17150D; } }
:root[data-theme="dark"] .loy-lab-studio { --tint:#E8D44D; --surface:#17150D; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .loy-lab-cloud { --tint:#5B9BF0; --surface:#0F141B; } }
:root[data-theme="dark"] .loy-lab-cloud { --tint:#5B9BF0; --surface:#0F141B; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .loy-lab-research { --tint:#57C1AA; --surface:#0F1714; } }
:root[data-theme="dark"] .loy-lab-research { --tint:#57C1AA; --surface:#0F1714; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .loy-lab-shop { --tint:#5B9BF0; --surface:#0F141B; } }
:root[data-theme="dark"] .loy-lab-shop { --tint:#5B9BF0; --surface:#0F141B; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .brand .mk { background:#1F1F24; } }
:root[data-theme="dark"] .brand .mk { background:#1F1F24; }

/* Phone menu: shown when the header's links are hidden; opens a sheet with them
   (site.js). */
.loy-menu-btn { display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink); place-items:center; padding:0; cursor:pointer; flex:none; }
.loy-menu-btn svg { width:20px; height:20px; }
.loy-sheet { position:fixed; left:0; right:0; z-index:60; display:flex; flex-direction:column; max-height:calc(100vh - 72px); overflow:auto; padding:6px 24px 18px; background:var(--canvas); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg, 0 24px 48px -16px rgba(0,0,0,.3)); }
.loy-sheet[hidden] { display:none; }
.loy-sheet a { display:block; padding:14px 0; font-size:17px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.loy-sheet a:last-child { border-bottom:0; }
@media (max-width:900px) { .loy-menu-btn { display:inline-grid; } }

/* Premium transitions: elements rise out of a soft blur on a long settling ease,
   one after another; headings lift from behind a line; scenes tilt up into place.
   Reduced motion shows everything at once (the global rule). */
:root { --ease-out:cubic-bezier(.16,1,.3,1); }
.rv { opacity:0; transform:translateY(28px); filter:blur(8px); transition:opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out), filter 1.1s var(--ease-out); transition-delay:calc(var(--d,0) * 90ms); }
.rv.in { opacity:1; transform:none; filter:none; }
h2.rv { clip-path:inset(0 0 100% 0); transform:translateY(.6em); filter:none; transition:clip-path 1.2s var(--ease-out), transform 1.2s var(--ease-out), opacity .6s var(--ease-out); transition-delay:calc(var(--d,0) * 90ms); }
h2.rv.in { clip-path:inset(-20% 0 -20% 0); }
.sc.rv { transform:perspective(1400px) translateY(56px) rotateX(9deg) scale(.95); transform-origin:50% 100%; transition-duration:1.4s; }
.sc.rv.in { transform:none; }

/* WordPress spaces page blocks apart; these pages lay themselves out, so no gaps
   (one sat above the header and cut the sky short). */
body.loy-lab .wp-block-post-content > * { margin-block-start:0 !important; }