/*
Theme Name: localoy
Description: The localoy.ai blog in the Daylight design: bright and clean, light first, Geist type, pill buttons, one orange highlight. Colors, type and spacing come from theme.json and the tokens below; no hex values live anywhere else. The component sheet is design/preview.html in the localoy-web repo.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: localoy
*/

/* Daylight tokens. Light by default, dark by system setting or the header switch. */
:root {
  --canvas:#FFFFFF; --panel:#FFFFFF; --sunk:#F5F5F7; --line:#E6E6EA;
  --ink:#0B0B0F; --ink-2:#4F4F5A; --ink-3:#6B6B76;
  --accent:#FF5A1F; --accent-soft:#FFF0E9; --accent-ink:#C23A08;
  --btn:#0B0B0F; --on-btn:#FFFFFF; --ok:#0E8A4B;
  --shadow:0 1px 2px rgba(11,11,15,.05),0 12px 32px -8px rgba(11,11,15,.10);
  --shadow-lg:0 2px 4px rgba(11,11,15,.05),0 32px 64px -16px rgba(11,11,15,.18);
  color-scheme:light;
}
/* Dark: by system setting unless the visitor pinned light with the header
   switch (html[data-theme]), or pinned dark. */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --canvas:#0B0B0D; --panel:#141417; --sunk:#101013; --line:#26262B;
    --ink:#F4F4F5; --ink-2:#A3A3AD; --ink-3:#8C8C97;
    --accent:#FF7A3D; --accent-soft:#2A1A12; --accent-ink:#FF9866;
    --btn:#F4F4F5; --on-btn:#0B0B0D; --ok:#4ADE80;
    --shadow:0 0 0 1px rgba(255,255,255,.02),0 12px 32px -8px rgba(0,0,0,.6);
    --shadow-lg:0 0 0 1px rgba(255,255,255,.03),0 32px 64px -16px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --canvas:#0B0B0D; --panel:#141417; --sunk:#101013; --line:#26262B;
  --ink:#F4F4F5; --ink-2:#A3A3AD; --ink-3:#8C8C97;
  --accent:#FF7A3D; --accent-soft:#2A1A12; --accent-ink:#FF9866;
  --btn:#F4F4F5; --on-btn:#0B0B0D; --ok:#4ADE80;
  --shadow:0 0 0 1px rgba(255,255,255,.02),0 12px 32px -8px rgba(0,0,0,.6);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.03),0 32px 64px -16px rgba(0,0,0,.8);
  color-scheme:dark;
}

body { -webkit-font-smoothing:antialiased; }
.wp-site-blocks { min-height:100vh; display:flex; flex-direction:column; }
.wp-site-blocks > main { flex:1; }
a { text-underline-offset:3px; }

/* Header: white, sticky, one hairline. */
header.wp-block-template-part { position:sticky; top:0; z-index:20; background:var(--canvas); border-bottom:1px solid var(--line); }
.admin-bar header.wp-block-template-part { top:32px; }
.loy-brand { display:flex; align-items:center; gap:10px; font-weight:650; font-size:1.0625rem; letter-spacing:-.03em; }
.loy-brand a { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; }
.loy-brand svg { width:26px; height:26px; color:var(--ink); }
.loy-brand .sub { color:var(--ink-3); font-weight:400; }
.loy-brand .tld { color:var(--accent); }
.loy-nav { display:flex; align-items:center; gap:2px; font-size:.875rem; }
.loy-nav a { color:var(--ink-2); text-decoration:none; padding:8px 16px; border-radius:999px; }
.loy-nav a:hover { color:var(--ink); background:var(--sunk); }
.loy-nav a[aria-current="page"] { color:var(--ink); font-weight:500; }
.loy-nav a.pill { background:var(--btn); color:var(--on-btn); margin-left:12px; font-weight:500; }
.loy-nav a.pill:hover { opacity:.88; }
/* Sign up is the outlined pill next to Download; people with an account
   sign in from the sign-up page ("Already have an account? Sign in"). */
.loy-nav a.pill.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); margin-left:12px; }
.loy-nav a.pill.ghost:hover { background:var(--sunk); opacity:1; }
.loy-nav a.pill.ghost + a.pill { margin-left:8px; }
/* Features menu: a <details>, so it opens without JavaScript; site.js closes it on
   a click elsewhere and on Escape. */
.loy-menu { position:relative; }
.loy-menu > summary { list-style:none; cursor:pointer; color:var(--ink-2); padding:8px 16px; border-radius:999px; display:flex; align-items:center; gap:8px; }
.loy-menu > summary::-webkit-details-marker { display:none; }
.loy-menu > summary::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.loy-menu > summary:hover, .loy-menu[open] > summary { color:var(--ink); background:var(--sunk); }
.loy-menu > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.loy-menu-panel { position:absolute; top:calc(100% + 8px); left:0; z-index:50; width:min(600px,calc(100vw - 32px)); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); }
.loy-nav .loy-menu-panel a { display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:10px; }
.loy-menu-panel a b { font-weight:550; color:var(--ink); }
.loy-menu-panel a span { font-size:.8125rem; color:var(--ink-3); line-height:1.4; }
.loy-menu-panel a:hover { background:var(--sunk); }
.loy-menu-panel a.wide { grid-column:1 / -1; }
@media (max-width:980px) { .loy-nav a[href="/docs/"], .loy-nav a[href="/locals/"] { display:none; } }
/* API joins the top links; where they crowd, it goes first (the Features menu still has it). */
@media (max-width:1120px) { .loy-nav > a[href="/features/api/"] { display:none; } }
@media (max-width:640px) { .loy-nav a:not(.pill), .loy-menu { display:none; } .loy-brand .sub { display:none; } }
@media (max-width:640px) { .loy-nav a.pill.ghost, .loy-nav a.pill.ghost + a.pill { margin-left:4px; padding-inline:12px; } .loy-theme { margin-left:4px; } }
@media (max-width:350px) { .loy-nav a.pill.ghost { display:none; } }

/* Post grid: rounded cards, soft shadow, image on top. */
.loy-cards { gap:var(--wp--preset--spacing--50); }
.loy-card { border:1px solid var(--line); border-radius:20px; background:var(--panel); overflow:hidden; height:100%; display:flex; flex-direction:column; }
.loy-card:hover { border-color:var(--ink-3); box-shadow:var(--shadow); }
.loy-card .wp-block-post-featured-image { margin:0; border-bottom:1px solid var(--line); background:var(--sunk); }
.loy-card .wp-block-post-featured-image img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.loy-card__body { padding:var(--wp--preset--spacing--50); display:flex; flex-direction:column; gap:var(--wp--preset--spacing--30); }
.loy-card .wp-block-post-title { line-height:1.25; }
.loy-card .wp-block-post-excerpt { color:var(--ink-2); font-size:.875rem; }
.loy-meta { color:var(--ink-3); font-family:var(--wp--preset--font-family--mono); font-size:.78rem; }

/* Chips: category tags. */
.wp-block-post-terms a { display:inline-block; font-size:.78rem; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); text-decoration:none; }
.wp-block-post-terms a:hover { border-color:var(--ink-3); color:var(--ink); }
.wp-block-post-terms .wp-block-post-terms__separator { display:none; }

.wp-block-post-title a { text-decoration:none; }
.wp-block-post-title a:hover { text-decoration:underline; }

/* Posts: a large title, a comfortable column. */
.loy-article .wp-block-post-title { letter-spacing:-.045em; line-height:1.04; }
.loy-article .wp-block-post-featured-image img { border-radius:18px; border:1px solid var(--line); }
.loy-article .wp-block-post-content > * + * { margin-block-start:1.25em; }
.loy-article .wp-block-post-content :is(h2,h3) { margin-block-start:1.8em; }
.wp-block-quote { border-left:3px solid var(--accent); padding-left:1.25rem; }
.wp-block-quote p { font-size:1.25rem; letter-spacing:-.02em; line-height:1.4; }
.wp-block-image img { border-radius:14px; }
.wp-block-image figcaption { color:var(--ink-3); font-size:.8125rem; }

/* Code: mono on the recessed surface. */
:where(pre, code) { font-family:var(--wp--preset--font-family--mono); }
pre { background:var(--sunk); border:1px solid var(--line); border-radius:14px; padding:var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); overflow-x:auto; font-size:.84rem; line-height:1.75; }
:not(pre) > code { background:var(--sunk); border:1px solid var(--line); border-radius:6px; padding:.1em .4em; font-size:.88em; }

/* Buttons are pills. */
.wp-block-button__link { background:var(--btn); color:var(--on-btn); border-radius:999px; font-weight:500; padding:.7rem 1.6rem; }
.wp-block-button.is-style-outline .wp-block-button__link { background:transparent; color:var(--ink); border:1px solid var(--line); }
.wp-block-separator { border-color:var(--line); opacity:1; }
.wp-block-query-pagination { gap:8px; font-size:.875rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { padding:6px 14px; border:1px solid var(--line); border-radius:999px; text-decoration:none; }

/* End-of-post call to action. */
.loy-cta { background:var(--btn); color:var(--on-btn); border-radius:28px; text-align:center; }
.loy-cta :is(h2,p) { color:inherit; }
.loy-cta p { opacity:.72; }
.loy-cta .wp-block-button__link { background:var(--canvas); color:var(--ink); }
.loy-cta .is-style-outline .wp-block-button__link { background:transparent; color:var(--on-btn); border:1px solid var(--ink-3); }

.loy-footer { border-top:1px solid var(--line); }
.loy-footer a { color:var(--ink-2); text-decoration:none; }
.loy-footer a:hover { color:var(--ink); }

/* ───────── Home page (the landing page, as a WordPress page) ─────────
   Sections are core blocks for the words and custom HTML blocks for the pictures.
   Everything is prefixed lh- so it can't touch posts or docs. */
.lh-wrap { max-width:1120px; margin-inline:auto; }
.lh-section { padding-block:var(--wp--preset--spacing--80); }
.lh-section > h2 { font-size:clamp(1.75rem,4vw,2.75rem); letter-spacing:-.04em; line-height:1.08; max-width:18ch; }
.lh-section > .lh-lead { color:var(--ink-2); font-size:1.1875rem; max-width:52ch; }
.lh-eyebrow { font:500 .8125rem var(--wp--preset--font-family--sans); color:var(--accent-ink); margin-bottom:var(--wp--preset--spacing--30); }
.lh-hl { background:linear-gradient(transparent 62%,var(--accent-soft) 62%); box-shadow:inset 0 -3px 0 var(--accent); color:inherit; padding:0; }

/* hero: centred, on a dotted field that fades out */
.lh-hero h1 { margin-top:12px; }

.lh-hero { position:relative; text-align:center; padding:88px 0 0; background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:22px 22px; background-position:center top; }
.lh-hero::after { content:""; position:absolute; inset:auto 0 0 0; height:160px; background:linear-gradient(transparent,var(--canvas)); pointer-events:none; }
.lh-hero > * { position:relative; z-index:1; }

/* The field (assets/field.js) replaces the CSS dots with a canvas when
   JavaScript runs; without it the dots above stay. */
.lh-hero.has-field, .has-js .lh-hero { background-image:none; }
.lh-hero > canvas.lh-field { position:absolute; top:0; left:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s ease-out; }
.lh-hero > canvas.lh-field.on { opacity:1; }
.lh-hero h1 { font-size:clamp(2.5rem,7vw,5rem); font-weight:650; letter-spacing:-.045em; line-height:1; margin:24px auto; max-width:14ch; }
/* A two-line headline: each .lh-line is one line on wide screens, and wraps
   on its own on phones. */
.lh-hero h1:has(.lh-line) { max-width:none; font-size:clamp(2.25rem,5.4vw,4.5rem); }
.lh-line { display:block; }
@media (min-width:900px) { .lh-line { white-space:nowrap; } }
.lh-hero .lh-lead { font-size:clamp(1.0625rem,2vw,1.3125rem); color:var(--ink-2); max-width:44ch; margin:0 auto 32px; line-height:1.5; }
.lh-hero .wp-block-buttons { justify-content:center; }
.lh-note { font-size:.8125rem; color:var(--ink-3); margin-top:16px; }
.lh-pill { display:inline-flex; align-items:center; gap:8px; padding:4px 14px; border:1px solid var(--line); border-radius:999px; background:var(--panel); font-size:.8125rem; color:var(--ink-2); text-decoration:none; box-shadow:var(--shadow); }
.lh-pill b { background:var(--accent); color:var(--canvas); font-weight:600; font-size:.72rem; padding:2px 8px; border-radius:999px; margin-left:-10px; }
.lh-shot { margin:56px auto 0; max-width:880px; position:relative; z-index:2; text-align:left; }

/* app window */
.lh-win { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow-lg); }
.lh-win-bar { height:42px; display:flex; align-items:center; gap:7px; padding-inline:16px; border-bottom:1px solid var(--line); background:var(--sunk); }
.lh-win-bar i { width:11px; height:11px; border-radius:50%; background:var(--line); }
.lh-win-bar span { margin-inline:auto; font-size:.78rem; color:var(--ink-3); transform:translateX(-24px); }
.lh-win-body { display:grid; grid-template-columns:180px minmax(0,1fr); min-height:270px; }
.lh-win-side { border-right:1px solid var(--line); padding:12px; display:flex; flex-direction:column; gap:2px; font-size:.8125rem; background:var(--sunk); }
.lh-win-side span { padding:7px 12px; border-radius:8px; color:var(--ink-2); }
.lh-win-side span.on { color:var(--ink); background:var(--panel); box-shadow:0 0 0 1px var(--line); font-weight:500; }
.lh-win-main { padding:24px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.lh-turn { font-size:.875rem; max-width:58ch; }
.lh-turn.you { align-self:flex-end; background:var(--sunk); border-radius:14px 14px 4px 14px; padding:8px 16px; }
.lh-act { display:flex; align-items:center; gap:8px; font:.78rem var(--wp--preset--font-family--mono); color:var(--ink-2); padding:8px 12px; background:var(--sunk); border:1px solid var(--line); border-radius:10px; overflow-x:auto; white-space:nowrap; }
.lh-live { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; animation:lh-beat 1.2s ease-in-out infinite; }
@keyframes lh-beat { 50% { opacity:.3; } }
.lh-chips { display:flex; flex-wrap:wrap; gap:8px; }
.lh-chip { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); white-space:nowrap; }
.lh-chip.on { background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:500; }
.lh-chip.mono { font-family:var(--wp--preset--font-family--mono); }

/* bento */
.lh-bento { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; margin-top:40px; }
.lh-tile { border:1px solid var(--line); border-radius:22px; background:var(--panel); padding:32px; display:flex; flex-direction:column; gap:12px; min-width:0; overflow:hidden; box-shadow:var(--shadow); }
.lh-tile.s2 { grid-column:span 2; } .lh-tile.s3 { grid-column:span 3; } .lh-tile.s4 { grid-column:span 4; } .lh-tile.s6 { grid-column:1 / -1; }
.lh-tile.s6 .lh-cmd { align-self:flex-start; max-width:100%; }
.lh-tile h3 { font-size:1.375rem; letter-spacing:-.03em; margin:0; }
.lh-tile p { color:var(--ink-2); max-width:44ch; margin:0; }
.lh-tile .vis { margin-top:auto; padding-top:16px; }
.lh-kicker { font:500 .78rem var(--wp--preset--font-family--sans); color:var(--accent-ink); }
.lh-chat { display:flex; flex-direction:column; gap:8px; }
.lh-bubble { font-size:.84rem; padding:8px 16px; border-radius:16px; max-width:88%; }
.lh-bubble.me { background:var(--btn); color:var(--on-btn); align-self:flex-end; border-bottom-right-radius:4px; }
.lh-bubble.bot { background:var(--sunk); border-bottom-left-radius:4px; }
.lh-code { background:var(--sunk); border:1px solid var(--line); border-radius:14px; font:.84rem/1.75 var(--wp--preset--font-family--mono); }
.lh-code pre { margin:0; padding:16px 24px; overflow-x:auto; background:none; border:0; font-size:inherit; line-height:inherit; }
.lh-code .ps1 { color:var(--ink-3); user-select:none; } .lh-code .out { color:var(--ink-2); } .lh-code .ok { color:var(--ok); }

/* permissions: the app's six switches, one card each */
.lh-perms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px; }
.lh-perm { display:flex; flex-direction:column; gap:8px; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); color:inherit; text-decoration:none; min-width:0; }
.lh-perm:hover { border-color:var(--ink-3); }
.lh-perm:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.lh-perm-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.lh-perm-head b { font-weight:550; }
.lh-perm h3 { font-size:1.25rem; letter-spacing:-.03em; margin:0; }
.lh-perm p { color:var(--ink-2); font-size:.9375rem; margin:0; }
.lh-switch { position:relative; width:30px; height:18px; border-radius:999px; background:var(--accent); flex:none; }
.lh-switch.on { background:var(--ok); }
.lh-switch::after { content:""; position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:var(--canvas); }
.lh-reach { margin-left:auto; font-size:.75rem; font-weight:500; padding:2px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); white-space:nowrap; }
.lh-reach.low { background:var(--sunk); color:var(--ok); }
.lh-perms-key { font-size:.8125rem; color:var(--ink-3); margin-top:16px; }
.lh-perms-key .lh-reach { margin:0 4px 0 0; }
.lh-cmd { display:block; overflow-x:auto; scrollbar-width:none; white-space:nowrap; padding:8px 10px; border-radius:10px; background:var(--sunk); border:1px solid var(--line); font:.8125rem var(--wp--preset--font-family--mono); color:var(--ink-2); }
.lh-cmd::-webkit-scrollbar { display:none; }
@media (max-width:900px) { .lh-perms { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .lh-perms { grid-template-columns:minmax(0,1fr); } }

/* split (safety) */
.lh-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:center; margin-top:40px; }
.lh-split p { color:var(--ink-2); font-size:1.0625rem; }
.lh-mech { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; }
.lh-mech li { display:grid; grid-template-columns:110px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:.9rem; }
.lh-mech b { font:500 .78rem var(--wp--preset--font-family--mono); color:var(--ink-3); padding-top:2px; }

/* steps */
.lh-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px; }
.lh-step { border:1px solid var(--line); border-radius:20px; padding:24px; background:var(--panel); }
.lh-step i { font:500 .8rem var(--wp--preset--font-family--mono); font-style:normal; width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; margin-bottom:16px; }
.lh-step h3 { font-size:1.125rem; letter-spacing:-.02em; margin:0 0 8px; }
.lh-step p { color:var(--ink-2); font-size:.9rem; margin:0; }

/* downloads */
.lh-dls { display:grid; gap:12px; margin-top:40px; }
.lh-dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 24px; background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.lh-dl.best { border-color:var(--ink); box-shadow:var(--shadow); }
.lh-dl .t { font-weight:600; letter-spacing:-.01em; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.lh-dl .d { font:.78rem var(--wp--preset--font-family--mono); color:var(--ink-3); overflow-wrap:anywhere; }
.lh-ver { font:500 .72rem var(--wp--preset--font-family--mono); color:var(--ink-3); border:1px solid var(--line); border-radius:999px; padding:1px 8px; letter-spacing:0; }
.lh-rel { font:.8125rem var(--wp--preset--font-family--mono); color:var(--ink-3); margin:8px 0 var(--wp--preset--spacing--40); }
.lh-rel b { color:var(--ink-2); font-weight:600; }
.lh-rel a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.lh-rel a:hover { color:var(--ink); }
.lh-btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 24px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font:500 .875rem var(--wp--preset--font-family--sans); text-decoration:none; white-space:nowrap; }
.lh-btn:hover { border-color:var(--ink-3); }
/* The Android robot (Material icon) on Android download buttons, in the button's own color. */
.andlogo { display:inline-block; width:1.25em; height:1.25em; margin-right:8px; flex:none; background:currentColor; -webkit-mask:var(--andlogo) center/contain no-repeat; mask:var(--andlogo) center/contain no-repeat; --andlogo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-2.86-1.21-6.08-1.21-8.94 0L5.65 5.67c-.19-.29-.58-.38-.87-.2-.28.18-.37.54-.22.83L6.4 9.48C3.3 11.25 1.28 14.44 1 18h22c-.28-3.56-2.3-6.75-5.4-8.52zM7 15.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25zm10 0c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z'/%3E%3C/svg%3E"); }
.lh-btn.primary { background:var(--btn); border-color:var(--btn); color:var(--on-btn); }
.lh-btn.primary:hover { opacity:.88; }
.lh-callout { margin-top:24px; padding:16px 24px; border-radius:14px; background:var(--accent-soft); color:var(--ink); font-size:.9rem; }
.lh-callout b { display:block; margin-bottom:2px; }
.lh-callout code { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.86em; }

/* closing call to action */
.lh-cta { background:var(--btn); color:var(--on-btn); border-radius:28px; text-align:center; padding:80px 32px; margin-block:var(--wp--preset--spacing--70); }
.lh-cta h2 { font-size:clamp(2rem,5vw,3.25rem); letter-spacing:-.045em; line-height:1.04; max-width:16ch; margin:0 auto 16px; color:inherit; }
.lh-cta p { opacity:.72; max-width:44ch; margin:0 auto 32px; font-size:1.0625rem; }
.lh-cta .lh-btn.inv { background:var(--canvas); color:var(--ink); border-color:var(--canvas); height:52px; padding:0 32px; font-size:1rem; }
.lh-cta .lh-btn.out { background:transparent; color:var(--on-btn); border-color:var(--ink-3); height:52px; padding:0 32px; font-size:1rem; margin-left:8px; }

@media (prefers-reduced-motion:reduce) { .lh-live { animation:none; } }
@media (max-width:860px) {
  .lh-section { padding-block:var(--wp--preset--spacing--70); }
  .lh-bento, .lh-steps { grid-template-columns:minmax(0,1fr); }
  .lh-tile.s2, .lh-tile.s3, .lh-tile.s4, .lh-tile.s6 { grid-column:auto; }
  .lh-split { grid-template-columns:minmax(0,1fr); gap:32px; }
  .lh-win-body { grid-template-columns:minmax(0,1fr); } .lh-win-side { display:none; }
  .lh-hero { padding-top:56px; } .lh-cta { padding:56px 24px; }
  .lh-cta .lh-btn.out { margin:12px 0 0; }
  .lh-mech li { grid-template-columns:minmax(0,1fr); gap:4px; }
}
.lh-row { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; align-items:center; }
.lh-btn.lg { height:52px; padding:0 32px; font-size:1rem; }
.lh-hero .lh-pill { text-decoration:none; }
.lh-hero .lh-shot .lh-win-main .lh-turn { margin:0; }
.wp-block-post-content .lh-hero h1, .wp-block-post-content .lh-cta h2 { text-wrap:balance; }
.lh-section [id] { scroll-margin-top:80px; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Embedded app demo: the real localoy app on sample data, in an iframe.
   Phones get a still picture and a link instead of ~2 MB of application. */
.lh-demo iframe { display:block; width:100%; height:560px; border:0; background:var(--panel); }
.lh-demo-still { display:none; }
.lh-demo-note { margin:0; padding:16px 24px; border-top:1px solid var(--line); text-align:center; }
.lh-demo-note .lh-btn { height:36px; }
@media (max-width:719px) {
  .lh-demo { display:none; }
  .lh-demo-still { display:block; }
}

/* Feature pages: a screenshot, a row of Vinci posts, the pricing tiles. */
.loy-shot { margin:32px 0; }
.loy-shot img, .loy-posts img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.loy-shot figcaption, .loy-shot-note { margin-top:12px; font-size:.875rem; color:var(--ink-3); }
.loy-posts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:32px; }
.loy-price { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:32px 0; }
.loy-price .lh-tile { padding:24px; }
.loy-price h3 { margin:0; font-size:1.5rem; letter-spacing:-.03em; }
.loy-price p { color:var(--ink-2); margin:0; }
.loy-price .lh-btn { align-self:flex-start; margin-top:8px; }
@media (max-width:760px) { .loy-posts, .loy-price { grid-template-columns:minmax(0,1fr); } }

/* The home page's closing line: quiet, one sentence, not a second title. */
.lh-close { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; padding:24px 0; margin-block:var(--wp--preset--spacing--60); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lh-close p { margin:0; font-size:1.125rem; font-weight:550; letter-spacing:-.01em; }
.lh-close p small { display:block; font-size:.8125rem; font-weight:400; color:var(--ink-3); margin-top:4px; }

/* Feature pages (Browser, Vinci): a hero, the real app in a frame, then
   sections built from the same tiles, splits and steps as the home page. */
.loy-feature .lf-hero { text-align:center; padding:72px 0 8px; }
.loy-feature .lf-hero h1 { font-size:clamp(2.25rem,5.4vw,4rem); font-weight:650; letter-spacing:-.045em; line-height:1.02; margin:16px auto; max-width:18ch; text-wrap:balance; }
.loy-feature .lf-hero .lh-lead { font-size:clamp(1.0625rem,2vw,1.25rem); color:var(--ink-2); max-width:52ch; margin:0 auto 28px; line-height:1.5; }
.lf-shot { margin:48px auto 0; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); background:var(--panel); }
.lf-shot img { display:block; width:100%; height:auto; }
.lf-cap { text-align:center; font-size:.8125rem; color:var(--ink-3); margin-top:12px; }
.lf-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:40px; }
.lf-grid .lh-tile { padding:24px; }
.lf-grid .lh-tile h3 { font-size:1.0625rem; letter-spacing:-.02em; }
.lf-grid .lh-tile p { font-size:.9375rem; }
.lf-ico { width:36px; height:36px; border-radius:10px; background:var(--sunk); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); }
.lf-ico svg { width:18px; height:18px; }
.lf-mock { border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); padding:20px; font-size:.9rem; }
.lf-mock-title { font-weight:550; margin-bottom:12px; }
.lf-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.lf-row .dom { font-family:var(--wp--preset--font-family--mono); font-size:.8125rem; }
.lf-row .ok { margin-left:auto; font-size:.75rem; font-weight:500; padding:2px 10px; border-radius:999px; background:var(--sunk); color:var(--ok); }
.lf-ask { display:flex; flex-direction:column; gap:12px; }
.lf-ask .say { background:var(--sunk); border-radius:14px 14px 14px 4px; padding:10px 14px; color:var(--ink); max-width:44ch; }
.lf-ask .chips { display:flex; flex-wrap:wrap; gap:8px; }
.lf-ask .chips span { font-size:.8125rem; font-weight:500; padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel); }
.lf-ask .chips span.go { background:var(--btn); color:var(--on-btn); border-color:transparent; }
.lf-note { font-size:.75rem; color:var(--ink-3); margin-top:10px; }
.lf-sizes { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
@media (max-width:900px) { .lf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .lf-grid { grid-template-columns:minmax(0,1fr); } .loy-feature .lf-hero { padding-top:40px; } }
.lf-video { display:block; width:100%; height:auto; background:var(--sunk); }

/* Header theme switch: a sun in dark, a moon in light. */
.loy-theme { display:inline-grid; place-items:center; width:36px; height:36px; margin-left:12px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); cursor:pointer; padding:0; }
.loy-theme:hover { color:var(--ink); background:var(--sunk); }
.loy-theme:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.loy-theme svg { width:17px; height:17px; }
.loy-theme .sun { display:none; }
.loy-theme[data-mode="dark"] .sun { display:block; } .loy-theme[data-mode="dark"] .moon { display:none; }

/* Pictures with a light and a dark cut: CSS picks one before the first paint,
   so a pinned theme never shows the other cut first. Lazy images that are
   display:none are never fetched. */
.on-dark { display:none !important; }
:root[data-theme="dark"] .on-light { display:none !important; }
:root[data-theme="dark"] .on-dark { display:block !important; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .on-light { display:none !important; }
  :root:not([data-theme="light"]) .on-dark { display:block !important; }
}

/* Vinci page: the pieces one run made, at their real proportions. */
.lf-set { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:40px; align-items:start; }
.lf-set figure { margin:0; }
.lf-set.five { grid-template-columns:repeat(5,minmax(0,1fr)); }
.ll-more { margin:16px 0 0; font-size:.875rem; }
.lf-set figure.wide { grid-column:span 2; }
.lf-set figure.full { grid-column:1 / -1; }
.lf-set img { display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow); }
.lf-set figcaption { font-size:.75rem; color:var(--ink-3); margin-top:8px; font-family:var(--wp--preset--font-family--mono); }
@media (max-width:760px) { .lf-set, .lf-set.five { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .lf-set figure.wide, .lf-set figure.full { grid-column:1 / -1; } }

/* Feature pages: section headings, and a three-up grid. */
.lf-h2 { font-size:clamp(1.75rem,4vw,2.5rem); letter-spacing:-.04em; line-height:1.08; margin:0 0 16px; }
.lf-grid.lf-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lh-split[id], .lh-section[id], .lh-tile[id] { scroll-margin-top:88px; }
@media (max-width:900px) { .lf-grid.lf-grid-3 { grid-template-columns:minmax(0,1fr); } }

/* Use cases: one card per job, with what you'd type and the switches it needs. */
.lf-cases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:56px; }
.lf-case { border:1px solid var(--line); border-radius:20px; background:var(--panel); box-shadow:var(--shadow); padding:24px; display:flex; flex-direction:column; gap:4px; scroll-margin-top:88px; }
.lf-case p { margin:0 0 10px; }
.lf-case .lh-eyebrow { margin:16px 0 6px; }
.lf-case-media { border-radius:14px; background:var(--sunk); padding:16px; display:flex; gap:12px; align-items:center; justify-content:center; min-height:220px; }
.lf-case-media .lf-mock { width:100%; box-shadow:none; }
.lf-case-media img { display:block; max-width:100%; height:auto; max-height:260px; border-radius:10px; border:1px solid var(--line); }
.lf-case-media img.lf-case-sq { width:calc(50% - 6px); max-height:none; }
.lf-prompt { font-size:1.125rem; letter-spacing:-.01em; color:var(--ink); font-weight:500; }
.lf-needs { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto !important; padding-top:6px; }
.lf-case-wide { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:center; }
.lf-case-wide .lh-eyebrow { margin-top:0; }
@media (max-width:760px) { .lf-cases, .lf-case-wide { grid-template-columns:minmax(0,1fr); } }
.lf-needs .lh-reach { margin-left:0; }

/* Pricing: what each card includes, and the questions beside the costs. */
.lf-price { margin-top:56px; }
.lf-price .lh-tile { display:flex; flex-direction:column; gap:8px; }
.lf-list { margin:4px 0 8px; padding:0; list-style:none; display:grid; gap:6px; font-size:.9375rem; color:var(--ink-2); }
.lf-list li { padding-left:22px; position:relative; }
.lf-list li::before { content:""; position:absolute; left:2px; top:.55em; width:10px; height:6px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg); }
/* A list of problems, not features: a grey dash instead of the green check. */
.lf-list.lf-pain li::before { top:.7em; width:10px; height:0; border-left:0; border-bottom:2px solid var(--ink-3); transform:none; }
.lf-list.lf-pain li b { display:block; color:var(--ink); font-weight:600; }
.lf-list.lf-pain li { color:var(--ink-3); }
.lf-faq h3 { font-size:1.0625rem; letter-spacing:-.02em; margin:0 0 4px; }
.lf-faq p { margin:0 0 20px; color:var(--ink-2); }

/* Docs index: one card per guide. */
.lf-docs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:28px 0 20px; }
.lf-doc { display:block; border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:18px 20px; text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:border-color .15s; }
.lf-doc:hover { border-color:var(--ink-3); }
.lf-doc h3 { margin:6px 0 4px; font-size:1.0625rem; letter-spacing:-.02em; }
.lf-doc p { margin:0; color:var(--ink-2); font-size:.9375rem; }
@media (max-width:640px) { .lf-docs { grid-template-columns:minmax(0,1fr); } }

/* Teams page: the example members list and the roles table. */
.lf-members-wrap { margin-top:48px; }
.lf-members { max-width:720px; margin-inline:auto; }
.lf-members .lf-row { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto minmax(64px,auto); gap:12px; }
.lf-members .who { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lf-members .role { color:var(--ink-3); font-size:.8125rem; }
.lf-members .spent { font-variant-numeric:tabular-nums; font-weight:550; text-align:right; }
.lf-members .cap { color:var(--ink-3); font-size:.8125rem; text-align:right; }
.lf-roles-wrap { overflow-x:auto; margin-top:32px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.lf-roles { width:100%; min-width:520px; border-collapse:collapse; font-size:.9375rem; }
.lf-roles th, .lf-roles td { padding:12px 16px; border-top:1px solid var(--line); text-align:center; }
.lf-roles thead th { border-top:0; font-weight:550; font-size:.8125rem; color:var(--ink-2); }
.lf-roles td:first-child, .lf-roles th:first-child { text-align:left; color:var(--ink); }
.lf-roles td:not(:first-child) { color:var(--accent-ink, var(--accent)); font-weight:600; width:13%; }
/* Teams: today vs with Localoy, two even columns. */
.lf-compare { width:100%; border-collapse:collapse; margin-top:var(--wp--preset--spacing--50); font-size:.95rem; }
.lf-compare th { text-align:left; font:500 .8125rem var(--wp--preset--font-family--sans); color:var(--ink-3); padding:0 16px 12px; border-bottom:1px solid var(--line); }
.lf-compare td { width:50%; padding:16px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; }
.lf-compare td:first-child { color:var(--ink-3); }
.lf-compare td:last-child { color:var(--ink); font-weight:500; }
@media (max-width:640px) { .lf-compare td { padding:12px 8px; } .lf-compare th { padding:0 8px 10px; } }
@media (max-width:560px) { .lf-members .lf-row { grid-template-columns:minmax(0,1fr) auto; } .lf-members .role, .lf-members .cap { display:none; } }
.lh-tile .lf-more { display:inline-block; margin-top:12px; font-size:.875rem; color:var(--ink-2); text-decoration:none; }
.lh-tile .lf-more:hover { color:var(--ink); }

/* Feature pages get the home page's black-hole field behind their hero
   (assets/field.js); the text sits above it, and it fades into the page. */
.loy-feature .lf-hero { position:relative; }
.loy-feature .lf-hero > * { position:relative; z-index:1; }
.loy-feature .lf-hero > canvas.lh-field { position:absolute; top:0; left:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s ease-out; }
.loy-feature .lf-hero > canvas.lh-field.on { opacity:1; }
.loy-feature .lf-hero.has-field::after { content:""; position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(transparent,var(--canvas)); pointer-events:none; z-index:0; }

/* The Locals: ten characters, each a face, a name, a field and one line (the
   app's Locals screen, as cards). ll-grid on the home page, ll-strip and
   ll-local on /locals/. Faces are the app's own, in assets/locals. */
.ll-face { flex:none; border-radius:50%; background:var(--sunk); object-fit:cover; display:block; }
.ll-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-top:40px; }
.ll-card { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:20px; border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); color:inherit; text-decoration:none; min-width:0; }
.ll-card:hover { border-color:var(--ink-3); }
.ll-card:focus-visible, .ll-strip a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ll-card .ll-face { width:64px; height:64px; margin-bottom:10px; }
.ll-card b { font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; }
.ll-field { font-size:.8125rem; font-weight:500; color:var(--accent-ink); }
.ll-card p { color:var(--ink-2); font-size:.875rem; line-height:1.5; margin:6px 0 0; }
.ll-more { justify-content:flex-start; margin-top:24px; }
.ll-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:40px auto 0; max-width:720px; }
.ll-strip a { display:flex; flex-direction:column; align-items:center; gap:6px; width:64px; color:var(--ink-2); font-size:.78rem; text-decoration:none; }
.ll-strip a:hover { color:var(--ink); }
.ll-strip .ll-face { width:52px; height:52px; border:1px solid var(--line); }
.ll-locals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:40px; }
.ll-local { scroll-margin-top:88px; }
.ll-local .ll-head { display:flex; align-items:center; gap:16px; }
.ll-local .ll-face { width:88px; height:88px; }
.ll-local h3 { font-size:1.5rem; }
.ll-local .ll-what { color:var(--ink); font-size:1.0625rem; max-width:none; }
.ll-local h4 { font:500 .78rem var(--wp--preset--font-family--sans); color:var(--ink-3); margin:8px 0 0; }
.ll-local ul { margin:0; padding-left:1.1em; color:var(--ink-2); font-size:.9375rem; display:flex; flex-direction:column; gap:4px; }
.ll-asks { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.ll-asks .lh-turn.you { align-self:flex-start; margin:0; }
@media (max-width:980px) { .ll-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px) { .ll-locals { grid-template-columns:minmax(0,1fr); } }
@media (max-width:600px) {
  .ll-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .ll-card { padding:16px; }
  .ll-card .ll-face { width:52px; height:52px; }
  .ll-local .ll-face { width:64px; height:64px; }
}

/* The hero's way in, Terminal first (owner, 2026-10-06: "focus cli too",
   picked variation C): one command in a terminal-looking box, then the app
   download and every platform. site.js hides the box on Windows. */
.lh-term { max-width:620px; margin:8px auto 20px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); text-align:left; overflow:hidden; }
.lh-term[hidden] { display:none; }
.lh-term-bar { display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); }
.lh-term-bar i { width:9px; height:9px; border-radius:50%; background:var(--line); }
.lh-term-line { display:flex; align-items:center; gap:10px; padding:12px 10px 12px 18px; }
.lh-term-line code { background:none; border:0; padding:0; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; white-space:nowrap; font:.95rem var(--wp--preset--font-family--mono); color:var(--ink); }
.lh-term-line code::-webkit-scrollbar { display:none; }
.lh-term-p { color:var(--ink-3); }
.lh-install-copy { flex:none; height:36px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font:500 .875rem var(--wp--preset--font-family--sans); cursor:pointer; }
.lh-install-copy:hover { border-color:var(--ink-3); }
.lh-install-copy.done { color:var(--ok); }
.lh-row .lh-alllink { color:var(--ink-2); text-decoration:none; font-size:.9375rem; padding:0 8px; }
.lh-row .lh-alllink:hover { color:var(--ink); }

/* Agents as social profiles (owner, 2026-10-06). The grid card: a cover
   made from the agent's own face, blurred, the face over its edge, name and
   @handle. The profile (site.js) is the same, larger, with tabs. */
.ll-card { position:relative; overflow:hidden; padding:0 16px 16px; }
.ll-card .ll-cover { display:block; align-self:stretch; height:64px; margin:0 -16px; background-size:cover; background-position:center; filter:blur(16px); transform:scale(1.4); opacity:.3; }
.ll-card .ll-face { position:relative; width:64px; height:64px; margin:-30px 0 8px; border:3px solid var(--panel); box-sizing:content-box; }
.ll-card .ll-handle { font-size:.8125rem; color:var(--ink-3); }
.ll-card .ll-field { margin-top:4px; }
.ll-card .ll-view { margin-top:12px; align-self:stretch; text-align:center; padding:7px 0; border-radius:999px; border:1px solid var(--line); font-size:.8125rem; font-weight:500; color:var(--ink); }
.ll-card:hover .ll-view { border-color:var(--ink-3); }

.ll-profile { width:min(520px, calc(100vw - 24px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--line); border-radius:22px; background:var(--panel); color:var(--ink); box-shadow:var(--shadow-lg); overflow:auto; }
.ll-profile::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }
.llp-x { position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:999px; border:0; background:rgba(0,0,0,.45); color:var(--on-btn); font-size:1.15rem; line-height:1; cursor:pointer; }
.llp-x { color:rgba(255,255,255,.92); }
.llp-body { padding:0 22px 8px; }
.llp-cover { height:132px; margin:0 -22px; background-size:cover; background-position:center; filter:blur(24px); transform:scale(1.5); opacity:.35; }
.llp-cover + .llp-id { position:relative; }
.ll-profile .llp-body { overflow:hidden; }
.llp-id { display:flex; align-items:flex-end; justify-content:space-between; margin-top:-52px; }
.llp-id .ll-face { width:104px; height:104px; border-radius:50%; border:4px solid var(--panel); box-sizing:content-box; }
.llp-get { height:38px; padding:0 18px; }
.llp-name { margin:12px 0 0; font-size:1.5rem; letter-spacing:-.02em; }
.llp-sub { display:flex; gap:10px; align-items:baseline; color:var(--ink-3); font-size:.9rem; margin-top:2px; }
.llp-sub .ll-field { color:var(--accent); font-weight:500; }
.llp-bio { margin:12px 0 4px; font-size:1rem; line-height:1.5; color:var(--ink); }
.llp-tabs { display:flex; gap:4px; margin:16px -22px 0; padding:0 22px; border-bottom:1px solid var(--line); }
.llp-tabs button { border:0; background:none; color:var(--ink-3); font:500 .9rem var(--wp--preset--font-family--sans); padding:12px 12px; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.llp-tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); }
.llp-pane { padding:14px 0 6px; }
.llp-pane[hidden] { display:none; }
.llp-pane h4 { margin:2px 0 8px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.llp-pane ul { margin:0; padding-left:18px; color:var(--ink-2); line-height:1.55; }
.llp-more { display:inline-block; margin-top:14px; color:var(--ink-2); text-decoration:none; }
.llp-more:hover { color:var(--ink); }
.llp-post { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.llp-post:last-child { border-bottom:0; }
.llp-post .ll-face { width:36px; height:36px; }
.llp-who { display:flex; gap:6px; align-items:baseline; font-size:.875rem; }
.llp-who span { color:var(--ink-3); }
.llp-ptext p { margin:3px 0 0; color:var(--ink); line-height:1.45; }
.llp-foot { position:sticky; bottom:0; background:var(--panel); display:flex; align-items:center; justify-content:space-between; padding:12px 18px 16px; border-top:1px solid var(--line); }
.llp-nav { width:40px; height:36px; border-radius:999px; border:1px solid var(--line); background:var(--sunk); color:var(--ink); cursor:pointer; }
.llp-nav:hover { border-color:var(--ink-3); }
.llp-dots { font-size:.8125rem; color:var(--ink-3); }
/* Teams page: the founder's Google booking page, embedded. Google draws it light. */
.lf-book { margin-top:var(--wp--preset--spacing--60); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; }
.lf-book iframe { display:block; width:100%; height:720px; border:0; }
@media (max-width:640px) { .lf-book iframe { height:900px; } }
/* The /book-call one-pager: a standalone dark landing page, no site header or footer. */
.loy-promo{--ink:#F4F4F5;--ink-3:#8C8C97;--accent:#FF7A3D;background:#0B0B0D;color:#F4F4F5;font-family:var(--wp--preset--font-family--sans);min-height:100vh}.loy-promo .top{max-width:1120px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;align-items:center;font-weight:600}.loy-promo .top img{width:22px;vertical-align:-5px;margin-right:8px}.loy-promo .btn{display:inline-block;background:#FF5A1F;color:#fff;text-decoration:none;font-weight:600;padding:14px 26px;border-radius:999px}.loy-promo .btn.sm{padding:9px 18px;font-size:.9rem}.loy-promo .hero{max-width:1120px;margin:0 auto;padding:64px 20px 88px;display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}.loy-promo h1{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:.98;letter-spacing:-.05em;margin:0 0 28px;font-weight:700}.loy-promo h1 span{color:#FF7A3D}.loy-promo .lead{font-size:1.25rem;color:#A3A3AD;max-width:36ch;margin:0 0 32px;line-height:1.5}.loy-promo section{max-width:1120px;margin:0 auto;padding:72px 20px;border-top:1px solid #26262B}.loy-promo h2{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.04em;margin:0 0 32px;line-height:1.05}.loy-promo .pains{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.loy-promo .pains div{background:#141417;border:1px solid #26262B;border-radius:16px;padding:20px}.loy-promo .pains b{display:block;font-size:1.05rem;margin-bottom:10px;line-height:1.3}.loy-promo .pains span{color:#8C8C97;font-size:.9rem}.loy-promo .ba{display:grid;grid-template-columns:1fr 1fr;border:1px solid #26262B;border-radius:16px;overflow:hidden}.loy-promo .ba div{padding:16px 20px;border-bottom:1px solid #26262B}.loy-promo .ba .l{color:#8C8C97;text-decoration:line-through;text-decoration-color:#FF7A3D55}.loy-promo .ba .r{background:#141417;font-weight:500}.loy-promo .ba .h{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#FF7A3D;text-decoration:none}.loy-promo .ag{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.loy-promo .ag a{display:block;text-decoration:none;transition:border-color .15s,transform .15s;background:linear-gradient(#1C1C21,#141417);border:1px solid #26262B;border-radius:18px;padding:20px;text-align:center}.loy-promo .ag img{width:72px;height:72px;border-radius:50%;background:#26262B}.loy-promo .ag b{display:block;margin-top:10px}.loy-promo .ag small{color:#FF7A3D}.loy-promo .ag p{color:#8C8C97;font-size:.85rem;margin:8px 0 0}
@media(max-width:900px){.loy-promo .pains,.loy-promo .ag{grid-template-columns:1fr 1fr}}@media(max-width:560px){.loy-promo .pains,.loy-promo .ag,.loy-promo .ba{grid-template-columns:1fr}}
.loy-promo *{box-sizing:border-box}.loy-promo a{color:inherit}.loy-promo a.btn{color:#fff}.loy-promo .top a.home{text-decoration:none;color:#F4F4F5}
body:has(.loy-promo){background:#0B0B0D}
.loy-promo .eye{color:#FF7A3D;font-weight:500;font-size:.95rem;margin:0 0 18px}
.loy-promo .lead{max-width:44ch}
.loy-promo .cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.loy-promo .ghost{text-decoration:none;color:#F4F4F5;font-weight:500}
.loy-promo .mock{background:#141417;border:1px solid #26262B;border-radius:20px;padding:8px 0;box-shadow:0 32px 64px -16px rgba(0,0,0,.8),0 0 120px -40px rgba(255,122,61,.35)}
.loy-promo .mh,.loy-promo .mr,.loy-promo .mf{display:grid;grid-template-columns:1fr auto 84px;gap:12px;align-items:center;padding:13px 22px}
.loy-promo .mh{grid-template-columns:1fr auto;border-bottom:1px solid #26262B}.loy-promo .mh span{color:#8C8C97;font-size:.85rem}
.loy-promo .mr{border-bottom:1px solid #1E1E23;font-size:.92rem}.loy-promo .mr i{font-style:normal;color:#8C8C97;font-size:.8rem;margin-left:6px}.loy-promo .mr em{font-style:normal;color:#8C8C97;font-size:.82rem;text-align:right}
.loy-promo .mr.warn em{color:#FF7A3D}.loy-promo .mr.key span{color:#A3A3AD;padding-left:14px;border-left:2px solid #FF7A3D55}
.loy-promo .mf{grid-template-columns:1fr auto;color:#8C8C97;font-size:.9rem}.loy-promo .mf b{color:#F4F4F5}
@media(max-width:900px){.loy-promo .hero{grid-template-columns:1fr;gap:40px}}
.loy-promo .close{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;background:#141417;border:1px solid #26262B;border-radius:20px;padding:32px 36px}.loy-promo .close h2{margin:0 0 10px}.loy-promo .close p{color:#A3A3AD;font-size:1.05rem;line-height:1.6;margin:0;max-width:52ch}.loy-promo .close .by{color:#F4F4F5;font-weight:500;margin-top:8px}
/* The booking calendar opens as a pop-up on #book, without JavaScript. */
.loy-promo .modal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:16px}.loy-promo .modal:target{display:flex}
.loy-promo .modal .shade{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.loy-promo .panel{position:relative;width:min(860px,100%);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 32px 64px -16px rgba(0,0,0,.8)}
.loy-promo .ph{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;color:#0B0B0F;border-bottom:1px solid #E6E6EA}.loy-promo .ph a{color:#0B0B0F;text-decoration:none;font-size:1.6rem;line-height:1}
.loy-promo .panel iframe{display:block;width:100%;height:min(600px,calc(100vh - 120px));border:0}
.loy-promo .gw{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.loy-promo .gw h2{margin-bottom:16px}.loy-promo .gw .txt{color:#A3A3AD;font-size:1.05rem;line-height:1.6;margin:0 0 20px}
.loy-promo .ticks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.loy-promo .ticks li{padding-left:22px;position:relative;font-size:.95rem}.loy-promo .ticks li:before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:5px;border-left:2px solid #FF7A3D;border-bottom:2px solid #FF7A3D;transform:rotate(-45deg)}
.loy-promo .code{margin:0;background:#141417;border:1px solid #26262B;border-radius:16px;padding:24px;font:13px/1.7 "Geist Mono",ui-monospace,Menlo,monospace;color:#E4E4E7;overflow-x:auto;box-shadow:0 0 120px -40px rgba(255,122,61,.3)}.loy-promo .code .c{color:#8C8C97}
@media(max-width:900px){.loy-promo .gw{grid-template-columns:1fr}}@media(max-width:560px){.loy-promo .ticks{grid-template-columns:1fr}}
.loy-promo .sub{color:#A3A3AD;font-size:1.1rem;line-height:1.6;max-width:60ch;margin:-16px 0 32px}
.loy-promo .ag a:hover{border-color:#FF7A3D66;transform:translateY(-2px)}.loy-promo .more{margin:24px 0 0;display:flex;gap:24px;flex-wrap:wrap}.loy-promo .more a{color:#FF7A3D;text-decoration:none;font-weight:500}.loy-promo .more a:hover{text-decoration:underline}

/* ---------------------------------------------------------------------------
   The Docs shell (theme/parts/docs-shell.php): grouped sidebar, the article,
   "On this page", prev/next. Three columns above 1080px, two above 900px,
   one below — where a button folds the sidebar into a drawer.
--------------------------------------------------------------------------- */
.loy-docs { display:grid; grid-template-columns:250px minmax(0,1fr) 210px; gap:48px; align-items:start; }
.loy-docs__toggle { display:none; }
@media (max-width:1080px) { .loy-docs { grid-template-columns:230px minmax(0,1fr); gap:36px; } .loy-docs__toc { display:none; } }
@media (max-width:900px) {
  .loy-docs { grid-template-columns:minmax(0,1fr); gap:24px; }
  .loy-docs__toggle { display:flex; align-items:center; justify-content:space-between; width:100%; font:500 .9375rem var(--wp--preset--font-family--sans); color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px 14px; box-shadow:var(--shadow); cursor:pointer; }
  .loy-docs__toggle svg { width:18px; height:18px; color:var(--ink-3); }
  .loy-docs__nav { display:none; }
  .loy-docs__toggle[aria-expanded="true"] + .loy-docs__nav { display:block; }
  .loy-docs__nav { border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--panel); }
}

/* Sidebar */
.loy-docs__nav { position:sticky; top:88px; max-height:calc(100vh - 120px); overflow-y:auto; }
.admin-bar .loy-docs__nav { top:120px; }
@media (max-width:900px) { .loy-docs__nav { position:static; max-height:none; } }
.loy-docs__search { position:relative; margin:0 0 20px; }
.loy-docs__search input { width:100%; box-sizing:border-box; font:400 .875rem var(--wp--preset--font-family--sans); color:var(--ink); background:var(--sunk); border:1px solid var(--line); border-radius:10px; padding:9px 12px 9px 32px; }
.loy-docs__search input:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
.loy-docs__search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-3); pointer-events:none; }
.loy-docs__group { font:600 .72rem/1 var(--wp--preset--font-family--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin:0 0 8px; }
.loy-docs__list { list-style:none; margin:0 0 22px; padding:0; }
.loy-docs__list li { margin:1px 0; }
.loy-docs__list a { display:block; padding:6px 10px; border-radius:8px; color:var(--ink-2); text-decoration:none; font-size:.9375rem; line-height:1.35; }
.loy-docs__list a:hover { background:var(--sunk); color:var(--ink); }
.loy-docs__list a.is-current { background:var(--accent-soft); color:var(--accent-ink); font-weight:550; }

/* The article */
.loy-docs__main { min-width:0; max-width:70ch; }
.loy-docs__main .wp-block-post-title { margin-top:0; }
.loy-docs__main > .loy-docs__crumbs { margin-bottom:14px; }

/* "On this page" */
.loy-docs__toc { position:sticky; top:88px; font-size:.875rem; }
.admin-bar .loy-docs__toc { top:120px; }
.loy-docs__toc > p { font:600 .72rem/1 var(--wp--preset--font-family--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin:0 0 10px; }
.loy-docs__toc ul { list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.loy-docs__toc li a { display:block; padding:4px 0 4px 12px; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-3); text-decoration:none; line-height:1.4; }
.loy-docs__toc li a:hover { color:var(--ink); border-left-color:var(--line); }

/* Prev / next */
.loy-docs__pager { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:70ch; margin:44px 0 0; padding-top:24px; border-top:1px solid var(--line); }
.loy-docs__pager a { display:block; border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:12px 16px; text-decoration:none; color:inherit; box-shadow:var(--shadow); }
.loy-docs__pager a:hover { border-color:var(--ink-3); }
.loy-docs__pager a.next { text-align:right; }
.loy-docs__pager span { display:block; font-size:.75rem; color:var(--ink-3); margin-bottom:2px; }
.loy-docs__pager b { font-weight:550; font-size:.9375rem; }

/* The docs landing: a hero with search, then the cards, grouped by section. */
.loy-docs-index { max-width:1000px; }
.loy-docs-index__hero { text-align:center; margin:0 0 8px; }
.loy-docs-index__hero h1 { margin-bottom:14px; }
.loy-docs-index__search { display:flex; gap:10px; max-width:540px; margin:26px auto 0; }
.loy-docs-index__search input { flex:1; font:400 .9375rem var(--wp--preset--font-family--sans); color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; box-shadow:var(--shadow); }
.loy-docs-index__search input:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
.loy-docs-index__meta { margin:14px 0 0; font-size:.8125rem; color:var(--ink-3); }
.loy-docs-index__meta code { font-family:ui-monospace,Menlo,monospace; background:var(--sunk); border:1px solid var(--line); border-radius:6px; padding:2px 6px; }
.loy-docs-index h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin:36px 0 14px; font-weight:600; }
.loy-docs-index__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:640px) { .loy-docs-index__grid { grid-template-columns:minmax(0,1fr); } }
.loy-docs-index .lf-doc:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* The Docs menu in the header: the same <details> pattern as Features. */
.loy-menu-docs > summary { /* inherits .loy-menu */ }
/* Docs sits near the right edge of the nav, so the panel is anchored to its
   right edge — left-anchored it ran off the viewport and cut off Reference. */
/* Docs uses the same two-column panel as Features; anchored right so it stays on screen.
   Section wrappers are flattened and their headings hidden, so items flow in one grid like Features. */
.loy-menu-docs .loy-menu-col { display:contents; }
.loy-menu-docs .loy-menu-col > h3 { display:none; }
.loy-menu-docs .loy-menu-panel { left:auto; right:0; width:min(600px,calc(100vw - 32px)); }
@media (max-width:700px) { .loy-menu-docs .loy-menu-panel { grid-template-columns:minmax(0,1fr); } }
.loy-menu-col > h3 { font:600 .72rem/1 var(--wp--preset--font-family--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin:0 0 10px; }
.loy-menu-col a { display:block; padding:7px 10px; margin:0 -10px; border-radius:9px; text-decoration:none; color:var(--ink); }
.loy-menu-col a:hover { background:var(--sunk); }
.loy-menu-col .t { display:block; font-size:.9375rem; font-weight:550; letter-spacing:-.01em; color:var(--ink); }
.loy-menu-col .d { display:block; font-size:.8125rem; color:var(--ink-3); line-height:1.35; margin-top:2px; }
.loy-menu-foot { grid-column:1/-1; margin:16px -18px -18px; padding:12px 18px; border-top:1px solid var(--line); background:var(--sunk); border-radius:0 0 18px 18px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.875rem; }
.loy-menu-foot a { color:var(--accent-ink); text-decoration:none; font-weight:500; }
.loy-menu-foot a:hover { text-decoration:underline; }


/* ---------------------------------------------------------------------------
   The Docs shell (theme/parts/docs-shell.php) — layout.
   The shell escapes the 700px content column with WP's own alignwide class,
   so no 100vw math is needed here (that fought the fluid title and made it
   flick between one and two lines). See notes in docs-shell.php.
--------------------------------------------------------------------------- */
.loy-docs { display:grid; grid-template-columns:250px minmax(0,1fr) 210px; gap:48px; align-items:start; }
/* alignwide gives the grid the full wide width; keep it centred. */
.loy-docs.alignwide { max-width:1120px; margin-left:auto; margin-right:auto; }

/* The page title flicked between one and two lines. Cause: when the page height
   sits near the viewport edge the classic scrollbar appears, which steals ~15px
   from the content column, so the title wraps to a second line — the page grows,
   the scrollbar is needed, and it settles in a different state each reload.
   Reserving the scrollbar's space always makes the content width constant, so
   the wrap can no longer depend on whether the page happens to scroll. */
html { scrollbar-gutter:stable; }

/* Product Hunt: the launch badge under the hero's Download button and in
   the footer, its light or dark cut with the theme (owner, 2026-10-12). */
.lh-ph { display:flex; justify-content:center; margin-top:18px; }
/* At the top of the hero, in the latest-release pill's place. */
.lh-ph.top { margin:0 0 22px; }
.lh-ph-badge, .loy-ph-badge { display:inline-flex; line-height:0; border-radius:10px; }
.lh-ph-badge img, .loy-ph-badge img { width:250px; height:54px; max-width:100%; }
.lh-ph-badge:focus-visible, .loy-ph-badge:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.loy-ph-badge img { width:200px; height:43px; }
/* /book-call: the demo film in the hero, and the "what you just saw" cards. */
.loy-promo .film{justify-self:stretch;width:100%;max-width:1080px;margin:0 auto}.loy-promo .film video{display:block;width:100%;aspect-ratio:16/9;border-radius:20px;background:#141417;border:1px solid #26262B;box-shadow:0 32px 64px -16px rgba(0,0,0,.8),0 0 120px -40px rgba(255,122,61,.35)}.loy-promo .film p{color:#8C8C97;font-size:.85rem;text-align:center;margin:12px 0 0}
.loy-promo .saw{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.loy-promo .saw div{background:#141417;border:1px solid #26262B;border-radius:16px;padding:22px}.loy-promo .saw b{display:block;font-size:1.05rem;margin-bottom:8px}.loy-promo .saw span{color:#8C8C97;font-size:.92rem;line-height:1.5}
@media(max-width:900px){.loy-promo .saw{grid-template-columns:1fr 1fr}}@media(max-width:560px){.loy-promo .saw{grid-template-columns:1fr}}
/* /book-call: the title on top, the film centred under it. */
.loy-promo .hero.stack{grid-template-columns:1fr;gap:40px;text-align:center;justify-items:center;padding-bottom:72px}.loy-promo .hero.stack .lead{margin-left:auto;margin-right:auto}.loy-promo .hero.stack .cta{justify-content:center}