/* kairodrome.app. The app's own tokens (src/theme.css in the app), so the site and the app read
   as one thing. Light by default, dark when the visitor's system is dark. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/cinzel-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2')}

:root{
  --bg:#f6f6f4; --surface:#ffffff; --surface-2:#efefec; --sunk:#f6f6f4;
  --border:#e2e1dc; --border-strong:#cfcec7;
  --text:#1b1b1a; --text-body:#3b3a40; --text-2:#68676f;
  /* The app's accent is #0d8f83; one step darker here so white text on it and the accent as
     text both pass 4.5:1. */
  --accent:#0b756b; --accent-text:#0b6f66; --on-accent:#ffffff; --accent-soft:#e5efed; --accent-soft-text:#0b5f57;
  --danger:#c6423f; --warn-soft:#fbf0dc; --warn-text:#7a4e07;
  --blue-soft:#e3eefb; --blue-text:#1d4f8f; --orange-soft:#fbe9de; --orange-text:#8a3b14;
  --meet:#3987e5; --ok:#2f8a4a;
  --shadow:0 10px 28px rgba(20,20,15,.12),0 2px 6px rgba(20,20,15,.06);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* The icon's own: Roman numerals in Cinzel, gold hour dots with a bronze rim, the laurel. */
  --roman:'Cinzel',Georgia,'Times New Roman',serif;
  --gold:#d9a441; --rim:#9a6a1c; --leaf-on:#e8701c; --leaf-off:#bfcdc8; --stem:#e2a34a;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111113; --surface:#18181b; --surface-2:#202024; --sunk:#141416;
    --border:#2b2b30; --border-strong:#38383f;
    --text:#f1f1ef; --text-body:#c9c8cf; --text-2:#a3a2ab;
    --accent:#35c4b5; --accent-text:#4ed5c6; --on-accent:#08211d; --accent-soft:#16312e; --accent-soft-text:#7fe0d4;
    --warn-soft:#33270f; --warn-text:#e3b04b;
    --blue-soft:#172538; --blue-text:#9cc3f2; --orange-soft:#33200f; --orange-text:#f0b48a;
    --meet:#6aa3ea; --ok:#5cc47b;
    --shadow:0 14px 36px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
    --gold:#c9962f; --leaf-on:#e89a35; --leaf-off:#34433f; --stem:#c98a30;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Room for the sticky header, so a link to #join or a section lands with the form in full view. */
[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the brand: the laurel clock and the name, one name in both themes */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.brand img{width:34px;height:34px}
/* The live icon (icon.js): the same size as the picture it replaces. */
.brand .live-icon{display:block;width:34px;height:34px;line-height:0;flex:none}
.brand .live-icon svg{display:block}

/* header */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.top .brand{margin-right:auto}
.top nav{display:flex;gap:24px}
.top nav a{font-size:14px;color:var(--text-body);text-decoration:none}
.top nav a:hover,.top nav a[aria-current=page]{color:var(--text)}
.top nav a[aria-current=page]{font-weight:600}
@media (max-width:820px){.top nav{display:none}.top .wrap{gap:12px}}

/* buttons and the waitlist form */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:8px;font:inherit;font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn.pri{background:var(--accent);color:var(--on-accent)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.alt{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn[disabled]{cursor:default;opacity:.8}
.btn.sm{min-height:38px;font-size:14px;padding:0 14px}
@media (max-width:820px){.top .btn.sm{min-height:44px}}
.join{display:flex;gap:8px;max-width:470px;flex-wrap:wrap}
.join input[type=email]{flex:1 1 220px;min-height:44px;border:1px solid var(--border-strong);border-radius:8px;padding:0 14px;font:inherit;font-size:15px;background:var(--surface);color:var(--text)}
.join input[type=email]::placeholder{color:var(--text-2)}
@media (max-width:520px){.join .btn{flex:1 1 100%}}
.join .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.join-msg{flex-basis:100%;margin:2px 0 0;font-size:14px;min-height:21px}
.join-msg.ok{color:var(--ok);font-weight:600}
.join-msg.err{color:var(--danger)}
@media (prefers-color-scheme:dark){.join-msg.err{color:#e5726e}}
.fine{font-size:14px;color:var(--text-2);margin:12px 0 0;line-height:1.5}
.fine b{color:var(--text);font-weight:600}
/* Colours only the hero's pretend Mac uses: the desktop, the menu bar, the app's quieter grey. */
:root{
  --text-3:#8f8e96;
  --glass:rgba(246,246,244,.58); --glass-line:rgba(255,255,255,.5); --tray-on:rgba(255,255,255,.22);
  --widget:rgba(255,255,255,.92); --widget-text:#1b1b1a; --widget-2:#76757d;
  --lift:0 30px 60px rgba(20,24,22,.22),0 6px 16px rgba(20,24,22,.12);
  --hud:rgba(27,27,26,.86); --hud-text:#ffffff; --hud-key:rgba(255,255,255,.14);
  --sel:#dbe8f8;
}
@media (prefers-color-scheme:dark){
  :root{
    --text-3:#76767f;
    --glass:rgba(30,30,34,.5); --glass-line:rgba(255,255,255,.16); --tray-on:rgba(255,255,255,.2);
    --widget:rgba(28,28,31,.9); --widget-text:#f1f1ef; --widget-2:#9a99a2;
    --lift:0 30px 60px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.4);
    --hud:rgba(241,241,239,.92); --hud-text:#111113; --hud-key:rgba(17,17,19,.1);
    --sel:#1d2d44;
  }
}

.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--accent-text);margin:0 0 18px}

/* hero */
.hero{padding:88px 0 0}
.hero-text{max-width:700px}
.hero h1{font-size:clamp(42px,7.2vw,76px);line-height:1;letter-spacing:-.045em;margin:0 0 22px;font-weight:700;text-wrap:balance}
.hero .lead{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--text-body);margin:0 0 30px;max-width:31em}
.wrap-wide{max-width:1288px}

/* The stage: a Mac at 1440 by 900, scaled to fit by hero.js. On a phone the camera moves in on
   the popups so their words stay readable. */
.stage{position:relative;margin:64px 0 0;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#5b86b9;box-shadow:var(--shadow)}
@media (max-width:700px){.stage{aspect-ratio:1/1;border-radius:14px}}
.cam{position:absolute;inset:0;overflow:hidden}
.desk{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;font-family:var(--font);color:var(--text);background:#5b86b9 url(/desk/wallpaper.webp) center/cover no-repeat;overflow:hidden;line-height:1.4}
.desk kbd{font-size:10.5px;font-weight:600;color:var(--text-3);background:transparent;border-color:var(--border-strong);border-radius:5px;padding:0 5px;min-width:0;line-height:1.55}

.mbar{position:absolute;left:0;right:0;top:0;height:28px;display:flex;align-items:center;gap:19px;padding:0 16px 0 20px;background:rgba(40,70,110,.18);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);font-family:-apple-system,BlinkMacSystemFont,var(--font);font-size:13.5px;font-weight:500;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.18);z-index:5}
.mb-app{font-weight:700}
.mb-r{margin-left:auto;display:flex;align-items:center;gap:17px}
.mbar .mi{height:15px;width:19px;color:#fff;flex:none}
.mbar .mi.bat{height:13px;width:27px}
.clock{margin-left:4px}
.tray{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 7px;border-radius:5px;font-variant-numeric:tabular-nums}
.tray svg{width:17px;height:17px}
.tray.on{background:var(--tray-on)}

.win{position:absolute;background:var(--surface);border-radius:12px;box-shadow:var(--lift);overflow:hidden;outline:1px solid rgba(0,0,0,.14)}
@media (prefers-color-scheme:dark){.win,.pop{outline-color:rgba(255,255,255,.1)}}
.tb{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--surface-2);border-bottom:1px solid var(--border);position:relative}
.tb i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.tb i+i{background:#febc2e}.tb i+i+i{background:#28c840}
.tb span{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:600;color:var(--text-2);pointer-events:none}

.mail{left:370px;top:62px;width:920px;height:700px}
.mail-body{display:grid;grid-template-columns:320px 1fr;height:660px}
.mlist{list-style:none;margin:0;padding:0;border-right:1px solid var(--border);background:var(--surface)}
.mlist li{display:flex;flex-direction:column;gap:2px;padding:16px 22px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-body)}
.mlist li b{font-size:14px;color:var(--text)}
.mlist li small{font-size:12.5px;color:var(--text-2)}
.mlist li.on{background:var(--sel)}
.mread{padding:36px 48px;font-size:15.5px;line-height:1.65;color:var(--text-body)}
.mread h4{font-size:24px;letter-spacing:-.015em;margin:0 0 6px;color:var(--text)}
.mread .from{display:flex;justify-content:space-between;font-size:13.5px;color:var(--text-2);margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.mread p{margin:0 0 14px}

.today{left:196px;top:56px;width:1048px;height:695px;opacity:0;z-index:2}
.today img{width:100%;height:auto}

/* Kairodrome's own popups, as src/quickadd.html and src/start.html draw them */
.pop{position:absolute;left:420px;top:150px;width:600px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--lift);overflow:hidden;opacity:0;outline:1px solid rgba(0,0,0,.06);z-index:3}
.p-row{display:flex;align-items:center;gap:12px;height:58px;padding:0 16px}
.p-ic{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.p-ic svg{width:12px;height:12px}
.p-ic.plus svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.p-ic.play svg{fill:currentColor}
.p-ic.tick{background:var(--accent);color:var(--on-accent)}
.p-in{font-size:18px;font-weight:500;color:var(--text);white-space:pre;line-height:30px;flex:1;min-width:0;overflow:hidden}
.p-in .ph{color:var(--text-3);font-weight:400}
.p-in .tok{color:var(--accent-text)}
.p-in .caret{display:inline-block;width:2px;height:22px;background:var(--accent);margin-left:1px;vertical-align:-5px}
.qa-segs{display:flex;flex-direction:column;gap:6px;padding:0 16px 14px}
.seg{display:flex;align-items:center;gap:12px}
.sl{width:56px;flex:none;font-size:11.5px;font-weight:500;color:var(--text-3)}
.chips{display:flex;gap:2px}
.seg-g{background:var(--surface-2);border-radius:9px;padding:3px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-2);border-radius:7px;padding:5px 10px;background:transparent}
.chips:not(.seg-g) .chip{background:var(--surface-2);color:var(--text)}
.chip.on{background:var(--accent-soft);color:var(--accent-soft-text)}
.chips:not(.seg-g) .chip.on{background:var(--accent-soft);color:var(--accent-soft-text)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot.nw{background:#3987e5}.dot.hb{background:#d95926}.dot.bb{background:#199e70}.dot.fw{background:#8b5cf6}
.p-foot{display:flex;gap:16px;align-items:center;height:36px;padding:0 16px;border-top:1px solid var(--border);background:var(--surface-2);font-size:11px;color:var(--text-3)}
.p-foot kbd{margin-right:3px}
.st-run{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:12px;color:var(--text-2);background:var(--surface-2);border-top:1px solid var(--border)}
.st-run b{color:var(--text);font-weight:600}
.st-run .mono{font-family:var(--mono);font-weight:600;color:var(--accent-text)}
.st-run .r{margin-left:auto;display:flex;align-items:center;gap:4px}
.st-list{border-top:1px solid var(--border);padding:4px 0 6px}
.st-head{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:10px 16px 4px}
.st-item{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 16px;font-size:13px;color:var(--text)}
.st-item .t{flex:1;min-width:0}
.st-item .meta{font-size:12px;color:var(--text-3)}
.st-item.hit{background:var(--accent-soft)}
.st-item.gone{display:none}

.toast{position:absolute;right:22px;top:42px;display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:11px;background:var(--surface);box-shadow:var(--lift);font-size:13.5px;font-weight:500;color:var(--text);opacity:0;z-index:4}
.toast svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.hud{position:absolute;left:50%;bottom:118px;display:flex;align-items:center;gap:16px;padding:14px 22px;border-radius:16px;background:var(--hud);color:var(--hud-text);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transform:translateX(-50%);z-index:6;white-space:nowrap}
.hud .keys{display:flex;gap:6px}
.hud .keys b{font-family:var(--mono);font-size:20px;font-weight:600;min-width:42px;height:42px;padding:0 12px;border-radius:10px;background:var(--hud-key);display:flex;align-items:center;justify-content:center}
.hud-l{font-size:19px;font-weight:600}

.stage-ctl{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.stage-ctl svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.stage-ctl .i-play,.stage.paused .stage-ctl .i-pause{display:none}
.stage.paused .stage-ctl .i-play{display:block}

/* key caps */
kbd{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:6px;padding:2px 7px;min-width:24px;text-align:center;display:inline-block;line-height:1.4}
.kc{display:inline-flex;gap:4px}
.keys-legend{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 32px;font-size:14px;color:var(--text-2)}
.keys-legend li{display:inline-flex;align-items:center;gap:10px}

/* sections */
.sec{padding:136px 0 0}
.sec h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;margin:0 0 12px;line-height:1.1;text-wrap:balance}
.sec h2.statement{font-size:clamp(30px,4.8vw,52px);line-height:1.06;letter-spacing:-.04em;max-width:17em;margin:0 0 18px}
.statement span{color:var(--text-2)}
.sec .sub{font-size:clamp(17px,2vw,20px);color:var(--text-body);margin:0;line-height:1.55;max-width:36em}

.works{margin-top:64px;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.works-l{font-size:15px;font-weight:600;color:var(--text-2);margin:0}
.works ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.works li{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:14.5px;font-weight:500;color:var(--text)}

/* the demo videos: the light or dark one for the visitor's theme; demos.js plays it in view */


/* yours and paid once */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:72px;align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:40px}}
.own dl{margin:32px 0 0}
.own dl div{padding:18px 0;border-top:1px solid var(--border)}
.own dt{font-size:16.5px;font-weight:600}
.own dd{margin:4px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-body);max-width:34em}
.offer{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:var(--shadow)}
.offer .eyebrow{margin:0}
.amt{font-size:60px;font-weight:700;letter-spacing:-.04em;line-height:1;margin:14px 0 8px;font-variant-numeric:tabular-nums}
.amt span{font-size:18px;font-weight:500;letter-spacing:0;color:var(--text-2)}
.was{font-size:14.5px;color:var(--text-2);margin:0 0 22px}
.chk{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--text-body)}
.chk li{position:relative;padding-left:26px;line-height:1.45}
.chk li::before{content:"";position:absolute;left:3px;top:4px;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.btn.wide{width:100%;margin-top:26px}
.after{font-size:13.5px;line-height:1.5;color:var(--text-2);margin:14px 0 0}

/* questions */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 64px;margin-top:36px}
@media (max-width:760px){.faq{grid-template-columns:1fr;gap:26px}}
.faq h3{font-size:16.5px;margin:0 0 6px;letter-spacing:-.01em}
.faq p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-body)}


.foot{margin-top:140px;background:var(--surface);border-top:1px solid var(--border);padding:36px 0 44px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;justify-content:space-between}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;margin-top:14px;color:var(--text-2)}
.foot .links a{color:var(--text-body)}
/* the home page's footer: one last form above the links */
.foot-cta,.foot-base{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.foot-cta{padding:12px 0 36px;border-bottom:1px solid var(--border)}
.foot-cta h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.03em;margin:0;line-height:1.1}
.foot-cta .join{flex:1 1 360px;justify-content:flex-end}
@media (max-width:760px){.foot-cta .join{justify-content:flex-start}}
.foot-base .links{margin-top:0}

/* privacy and terms */
.doc{max-width:740px;margin:0 auto;padding:56px 24px 0;font-size:16px;line-height:1.65;color:var(--text-body)}
.doc h1{font-size:clamp(32px,5vw,40px);letter-spacing:-.025em;line-height:1.15;margin:0 0 6px;color:var(--text)}
.doc .upd{font-size:14px;color:var(--text-2);margin:0 0 28px}
.doc h2{font-size:21px;letter-spacing:-.01em;margin:40px 0 10px;color:var(--text);line-height:1.3}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc b,.doc strong{color:var(--text)}
.doc code{font-family:var(--mono);font-size:13px;background:var(--surface-2);border-radius:4px;padding:1px 5px;color:var(--text)}
.doc .short{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 22px 6px}
.tbl{overflow-x:auto;margin:6px 0 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tbl th{text-align:left;font-size:13px;font-weight:700;color:var(--text-body);background:var(--surface-2);padding:10px 14px;border-bottom:1px solid var(--border)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--text)}

.notfound{text-align:center;padding:120px 24px 40px}
.notfound h1{font-size:40px;letter-spacing:-.02em;margin:0 0 10px}
.notfound p{color:var(--text-body);margin:0 0 24px}

/* the phone's closer camera (hero.js adds .near): the Mail window narrows so the wallpaper shows
   around it, and Today, the toast and the keys sit inside the view */
.desk.near .mail{left:436px;top:76px;width:568px;height:470px}
.desk.near .mail-body{grid-template-columns:1fr}
.desk.near .mlist{display:none}
.desk.near .mread{padding:28px 32px}
.desk.near .today{left:396px;top:64px;width:648px;height:445px}
.desk.near .toast{right:auto;left:430px;top:40px}
.desk.near .hud{bottom:250px}

/* the live icon beside things other than the name */
.live .live-icon{display:block;line-height:0;width:max-content}
.live .live-icon svg{display:block}
.offer > picture img,.offer .live-icon{margin:0 0 18px}

/* The desktop around the windows: a photo wallpaper, widgets, two files and a Dock of plain
   app tiles (no other company's icons). Kairodrome's tile is its live icon with the elapsed-time
   badge the app puts on it. */
.wdg{position:absolute;top:44px;width:156px;height:156px;border-radius:22px;background:var(--widget);color:var(--widget-text);box-shadow:0 8px 24px rgba(10,30,60,.18);font-family:-apple-system,BlinkMacSystemFont,var(--font)}
.cal{left:16px;padding:14px 13px}
.wm{margin:0 0 6px 4px;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#e0453a}
.wgrid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px;text-align:center;font-size:9.5px;font-weight:600;line-height:15px}
.wgrid b{font-weight:600;color:var(--widget-2)}
.wgrid i{font-style:normal}
.wgrid .now{background:#e0453a;color:#fff;border-radius:50%;width:15px;margin:0 auto}
.wx{left:188px;padding:14px 16px;color:#fff;background:linear-gradient(180deg,#5d6f86,#46566b)}
.wx p{margin:0}
.wc{font-size:14px;font-weight:600}
.wt{font-size:38px;font-weight:300;line-height:1.1;letter-spacing:-.02em}
.wx svg{width:20px;height:14px;margin-top:10px;color:#fff}
.wd{font-size:11px;font-weight:600;line-height:1.35;margin-top:2px}
.dicon{position:absolute;right:16px;width:110px;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:-apple-system,BlinkMacSystemFont,var(--font)}
.d1{top:420px}.d2{top:540px}
.dl{font-size:12px;font-weight:600;color:#fff;text-align:center;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fold{position:relative;width:70px;height:54px;border-radius:6px;background:linear-gradient(180deg,#8ccaf7,#5fb0ef);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.fold::before{content:"";position:absolute;left:0;top:-6px;width:30px;height:10px;border-radius:5px 5px 0 0;background:#6dbaf2}
.doc{position:relative;width:50px;height:64px;border-radius:4px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px}
.doc em{font-style:normal;font-size:9px;font-weight:800;color:#fff;background:#d6453b;border-radius:3px;padding:1px 5px}

.dock{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:24px;background:var(--glass);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);box-shadow:inset 0 0 0 1px var(--glass-line),0 10px 30px rgba(0,0,0,.18);z-index:2}
.dock .app{position:relative;width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 0 0 .5px rgba(0,0,0,.12)}
.dock .app svg{width:34px;height:34px}
.dock .is-run::after{content:"";position:absolute;bottom:-6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(20,20,20,.7)}
@media (prefers-color-scheme:dark){.dock .is-run::after{background:rgba(255,255,255,.8)}}
.dock .sep{width:1px;height:46px;background:rgba(0,0,0,.18)}
.a-files{background:linear-gradient(180deg,#4fb2f7,#1f7fe0)}
.a-set{background:linear-gradient(180deg,#9aa0a8,#636a73)}
.a-web{background:linear-gradient(180deg,#ffffff,#e3e7ec);color:#2a74d9!important}
.a-term{background:linear-gradient(180deg,#3a3a3e,#1c1c1f)}
.a-mail{background:linear-gradient(180deg,#5fb2ff,#2b6fd6)}
.a-cal{background:#fff;flex-direction:column;gap:0;color:#1b1b1a!important}
.a-cal em{font-style:normal;font-size:10px;font-weight:700;color:#e0453a;letter-spacing:.04em;margin-top:2px}
.a-cal b{font-size:30px;font-weight:400;line-height:1;margin-top:-1px}
.a-chat{background:linear-gradient(180deg,#9b7cf6,#6a46d8)}
.a-music{background:linear-gradient(180deg,#ff6b81,#e0334f)}
.a-notes{background:linear-gradient(180deg,#ffe48a,#f6c945);color:#8a6a10!important}
.a-trash{background:rgba(255,255,255,.35);color:rgba(30,30,30,.65)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)!important}
.a-dw{box-shadow:none!important}
.a-dw .dw{display:block;width:60px;height:60px;line-height:0}
.a-dw .dw svg{width:60px;height:60px}
.badge{position:absolute;top:-6px;right:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ec4436;color:#fff;font-style:normal;font-size:12.5px;font-weight:600;line-height:22px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,var(--font);font-variant-numeric:tabular-nums;box-shadow:0 1px 2px rgba(0,0,0,.25)}

/* Before and after. */
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px}
@media (max-width:760px){.ba{grid-template-columns:1fr}}
.ba-col{border-radius:14px;padding:24px 26px 10px;border:1px solid var(--border)}
.ba-col.after{background:var(--surface);box-shadow:var(--shadow);border-color:transparent}
.ba-h{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:var(--text-2)}
.after .ba-h{color:var(--accent-text)}
.ba ul{list-style:none;margin:0;padding:0}
.ba li{position:relative;padding:12px 0 12px 26px;font-size:16px;line-height:1.5;color:var(--text-body);border-top:1px solid var(--border)}
.ba li:first-child{border-top:0}
.ba li::before{content:"";position:absolute;left:3px;top:15px;width:11px;height:17px;background:var(--leaf-off);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -12 8 13'%3E%3Cpath d='M0 0 C 2.7 -2.4, 3 -7.2, 0 -11 C -3 -7.2, -2.7 -2.4, 0 0 Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -12 8 13'%3E%3Cpath d='M0 0 C 2.7 -2.4, 3 -7.2, 0 -11 C -3 -7.2, -2.7 -2.4, 0 0 Z'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(35deg)}
.after li::before{background:var(--leaf-on)}

.pn{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px;font-size:13.5px;color:var(--text);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.pn .mono{font-family:var(--mono);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pn-m{color:var(--text-2);font-size:12.5px}
.pn mark{background:none;font-weight:600;border-radius:4px;padding:0 3px}
.pn mark.due{color:var(--blue-text);background:var(--blue-soft)}
.pn mark.cl{color:var(--accent-soft-text);background:var(--accent-soft)}
.pn mark.br{color:var(--warn-text);background:var(--warn-soft)}
.pn-in{display:flex;align-items:center;gap:10px;font-size:16px;padding:6px 4px 14px;border-bottom:1px solid var(--border)}
.pn-ic{width:22px;height:22px;border-radius:6px;background:var(--accent-soft);color:var(--accent-text);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.pn-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:10px 4px 0}
.pn-l{width:58px;font-size:12px;font-weight:600;color:var(--text-2)}
.pn .chip{background:var(--surface);border:1px solid var(--border)}
.pn .chip.on{border-color:transparent}
.pn-foot{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding:10px 4px 0;border-top:1px solid var(--border);font-size:12px;color:var(--text-2)}
.pn-foot kbd{font-size:10.5px;padding:0 5px;margin-right:3px}
.pn-run{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:9px;background:var(--accent-soft);color:var(--accent-soft-text);font-weight:600}
.pn-run .pn-m{color:inherit;opacity:.8;font-weight:500}
.pn-run b{margin-left:auto}
.pn-list{display:flex;flex-direction:column;margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.pn-item{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-top:1px solid var(--border)}
.pn-item:first-child{border-top:0}
.pn-item > span:nth-of-type(1){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-item .pn-t{flex:none!important;width:42px;color:var(--text-2)}
.pn-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin:16px 2px 0}
.bar{width:3px;height:18px;border-radius:2px;flex:none}
.bar.nw{background:#3987e5}.bar.hb{background:#d95926}
.box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--border-strong);flex:none;position:relative}
.box.on{background:var(--accent);border-color:var(--accent)}
.box.on::after{content:"";position:absolute;left:4px;top:1.5px;width:4px;height:7px;border-right:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(45deg)}
.pn-write{background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;padding:12px 14px;font-size:15px;line-height:1.6}
.pn-act{display:flex;justify-content:flex-end;margin-top:12px}
.btn-mini{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:7px;background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:600}
.pn-inv-h{display:flex;align-items:center;justify-content:space-between;font-size:15px}
.pn-inv-h + .pn-m{margin:2px 0 0}
.pill{font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px}
.pill.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.pn-lines{margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.pn-lines div{display:grid;grid-template-columns:minmax(0,1fr) auto 76px;gap:12px;align-items:center;min-height:38px;padding:0 12px;border-top:1px solid var(--border)}
.pn-lines div:first-child{border-top:0}
.pn-lines span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-lines .mono{text-align:right;color:var(--text-body)}
.pn-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 12px 2px;font-weight:600}
.pn-total b{font-size:20px}
@media (max-width:420px){.pn{padding:12px}.pn-in{font-size:14.5px}.pn-item .pn-m,.pn-run .pn-m{display:none}}
.pn-run span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.works-n{flex-basis:100%;margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--text-body);max-width:46em}

/* Section labels: a gold hour dot from the icon's face, then the name. */
.tag{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin:0 0 18px}
.tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1.5px var(--rim);flex:none}
.hero .tag{color:var(--accent-text)}

/* How it works: a day on the dial. The icon at full size stays beside the hours as you read. */
.dayrun{display:grid;grid-template-columns:300px minmax(0,1fr);gap:72px;margin-top:56px;align-items:start}
.dial-col{position:sticky;top:120px;display:flex;flex-direction:column;align-items:center;gap:16px}
.dial{width:300px;height:300px;line-height:0;filter:drop-shadow(0 22px 40px rgba(20,40,36,.22))}
.dial svg,.dial img{width:300px;height:300px;display:block}
.dial-t{margin:0;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.hours{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hour{padding:8px 0 72px;border-top:1px solid var(--border)}
.hour:last-child{padding-bottom:8px}
.hr{display:flex;align-items:baseline;gap:14px;margin:22px 0 8px}
.rn{font-family:var(--roman);font-weight:700;font-size:44px;line-height:1;letter-spacing:.02em;color:var(--text);min-width:2.2em}
.hr-t{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--text-2)}
.hour h3{font-size:clamp(24px,2.8vw,30px);letter-spacing:-.03em;line-height:1.15;margin:0 0 10px}
.hour-p{font-size:16.5px;line-height:1.6;color:var(--text-body);margin:0 0 24px;max-width:34em}
.hour-p .kc{vertical-align:1px;margin-right:4px}
.hour .rn{transition:color .3s}
.hour.is-now .rn{color:var(--accent-text)}
@media (prefers-reduced-motion:reduce){.hour .rn{transition:none}}
@media (max-width:900px){
  .dayrun{grid-template-columns:1fr;gap:0;margin-top:32px}
  .dial-col{display:none}
  .hour{padding-bottom:48px}
  .rn{font-size:36px}
}

/* The laurel along the page edge, lit by how far down you are. Only where there is room. */
.edge{display:none}
@media (min-width:1340px){
  .edge{display:block;position:fixed;left:calc((100vw - 1080px) / 4 - 32px);top:54%;transform:translateY(-50%);width:64px;height:min(64vh,580px);z-index:1;pointer-events:none}
  .edge{opacity:0;transition:opacity .4s}
  .edge.is-shown{opacity:1}
  .edge svg{width:100%;height:100%;overflow:visible}
  .edge-stem{stroke:var(--stem);stroke-width:1.4;stroke-linecap:round;opacity:.8}
  .edge-pair path{fill:var(--leaf-off);transition:fill .25s}
  .edge-pair.is-on path{fill:var(--leaf-on)}
  .edge-pair.is-on path+path{fill:color-mix(in srgb,var(--leaf-on) 85%,var(--text))}
}
@media (prefers-reduced-motion:reduce){.edge,.edge-pair path{transition:none}}