/* BirdsEye marketing site
   Layout idea: the day runs left to right. Time is the grid: an hour axis in the hero
   board and in the product demos, whose stages move from dawn to night. Page chrome uses ink, sky and iris only;
   data colors (productive, neutral, idle) appear only inside product UI.
   Single light theme by choice, with night sections where the content is about off-hours. */
:root{
  color-scheme:light;
  --sky:#F2F5FA; --paper:#FFFFFF; --ink:#0B1330; --ink-2:#3F4963; --ink-3:#5E6884;
  --line:#DDE3EE; --line-2:#C7CFDF;
  --iris:#3A4BF2; --iris-deep:#2A38C8; --iris-soft:#E8EBFF;
  --sun:#FFB224;
  --prod:#1DB87A; --neut:#F5B82E; --unprod:#F0637A; --idle:#A9B4C9;
  --night:#0B1330; --night-2:#131C42; --night-line:#27325C; --on-night:#E9EDF9; --on-night-2:#A9B3D1;
  --font:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --wrap:1200px; --gut:clamp(20px,4.2vw,48px);
  --r-ui:14px; --r-card:22px; --r-btn:12px;
  --shadow-ui:0 1px 0 rgba(11,19,48,.04),0 14px 34px -14px rgba(11,19,48,.2),0 44px 90px -48px rgba(11,19,48,.3);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--sky);color:var(--ink);font:400 1rem/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
svg{display:block;flex:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--iris);color:#fff}
:focus-visible{outline:3px solid var(--iris);outline-offset:3px;border-radius:6px}
.night :focus-visible,.finale :focus-visible{outline-color:#fff}
h1{font-size:clamp(2.5rem,5.3vw,4.35rem);line-height:1.03;letter-spacing:-.038em;font-weight:700;text-wrap:balance}
h2{font-size:clamp(1.85rem,3.5vw,3rem);line-height:1.08;letter-spacing:-.032em;font-weight:650;text-wrap:balance}
h3{font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.22;letter-spacing:-.02em;font-weight:650}
.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.5;color:var(--ink-2);max-width:36em}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.sec{padding-block:clamp(72px,9vw,128px)}
.sec-head{max-width:46rem;margin-bottom:clamp(36px,5vw,60px)}
.sec-head p{margin-top:18px}
.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--line-2);transition:text-decoration-color .15s}
.tlink:hover{text-decoration-color:currentColor}
.night .tlink{text-decoration-color:var(--night-line)}
.skip{position:absolute;left:16px;top:-64px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:var(--r-btn);border:1px solid transparent;font-weight:600;font-size:1rem;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .18s,border-color .18s,transform .18s,box-shadow .18s}
.btn-primary{background:var(--iris);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -10px rgba(58,75,242,.75)}
.btn-primary:hover{background:var(--iris-deep);transform:translateY(-1px)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.btn-line:hover{border-color:#fff}
.btn-sm{min-height:42px;padding:0 16px;font-size:.9375rem}
.btn-block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.cta-note{margin-top:14px;font-size:.9375rem;color:var(--ink-3)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(242,245,250,.84);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:36px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.22rem;letter-spacing:-.035em;text-decoration:none}
.nav{display:flex;gap:30px;margin-right:auto}
.nav a{font-weight:500;color:var(--ink-2);text-decoration:none;font-size:.9688rem;padding:8px 0;transition:color .15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{font-weight:600}
.hdr-cta{display:flex;align-items:center;gap:8px}
.hdr-login{font-weight:500;text-decoration:none;padding:10px 12px;color:var(--ink-2);font-size:.9688rem}
.hdr-login:hover{color:var(--ink)}
.menu{display:none}
.menu summary{list-style:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line-2);background:var(--paper);cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;left:0;right:0;top:68px;background:var(--paper);border-bottom:1px solid var(--line);padding:6px var(--gut) 24px;display:grid;box-shadow:0 30px 40px -30px rgba(11,19,48,.35)}
.menu-panel a:not(.btn){padding:16px 2px;font-weight:600;font-size:1.125rem;text-decoration:none;border-bottom:1px solid var(--line)}
.menu-panel .btn{margin-top:16px}
@media (max-width:900px){
  .nav,.hdr-login{display:none}
  .menu{display:block}
  .hdr-in{gap:12px;height:64px}
  .menu-panel{top:64px}
  .brand{margin-right:auto}
}
@media (max-width:380px){.hdr-cta .btn-sm{padding:0 12px;font-size:.875rem}}

.menu-panel{color:var(--ink)}
.dark-top .hdr:not(.is-past){background:rgba(11,19,48,.8);color:#fff}
.dark-top .hdr:not(.is-past).is-stuck{border-bottom-color:rgba(255,255,255,.09)}
.dark-top .hdr:not(.is-past) .nav a,.dark-top .hdr:not(.is-past) .hdr-login{color:#B8C1E6}
.dark-top .hdr:not(.is-past) .nav a:hover,.dark-top .hdr:not(.is-past) .hdr-login:hover{color:#fff}
.dark-top .hdr:not(.is-past) .menu summary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.dark-top .hdr:not(.is-past) :focus-visible{outline-color:#fff}
.js .dark-top .hdr:not(.is-stuck):not(.is-past){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr{transition:border-color .2s,background-color .25s,color .25s}

/* ---------- hero: the page starts before dawn and fits one viewport ---------- */
:root{--hh:clamp(500px,100vh,1060px);--dawn:clamp(170px,20vw,280px)}
@supports (height:100svh){:root{--hh:clamp(500px,100svh,1060px)}}
.hero{position:relative;isolation:isolate;margin-top:-68px;padding-top:68px;height:var(--hh);display:flex;flex-direction:column;color:#fff;overflow-x:clip}
/* one sky for the hero and the sunrise band under it, so there is no seam at the fold */
.hero::after{content:"";position:absolute;z-index:-2;inset:0 0 calc(-1*var(--dawn));pointer-events:none;
  background:
    radial-gradient(58% calc(var(--hh)*.44) at 50% calc(var(--hh)*1.04),rgba(255,178,36,.42),rgba(240,99,122,.18) 42%,transparent 72%),
    radial-gradient(92% calc(var(--hh)*.62) at 50% calc(var(--hh)*1.1),rgba(96,84,232,.6),transparent 70%),
    radial-gradient(50% calc(var(--hh)*.36) at 10% 0,rgba(58,75,242,.2),transparent 70%),
    radial-gradient(44% calc(var(--hh)*.32) at 94% calc(var(--hh)*.06),rgba(124,92,246,.15),transparent 70%),
    linear-gradient(180deg,#0B1330 0,#0B1330 calc(var(--hh)*.16),#0E1740 calc(var(--hh)*.56),#141D52 var(--hh),#33378E calc(var(--hh) + var(--dawn)*.22),#807CCF calc(var(--hh) + var(--dawn)*.5),#CFC9F0 calc(var(--hh) + var(--dawn)*.76),var(--sky) 100%);
  -webkit-mask-image:linear-gradient(#000 calc(100% - var(--dawn)*.45),transparent);mask-image:linear-gradient(#000 calc(100% - var(--dawn)*.45),transparent)}
.hero::before{content:"";position:absolute;inset:0 0 34%;z-index:-1;background-image:radial-gradient(2px 2px at 32.7% 16.2%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 8.1% 52.4%,rgba(255,255,255,0.9),transparent),radial-gradient(1px 1px at 6.7% 49.7%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 43.5% 8.6%,rgba(255,255,255,0.9),transparent),radial-gradient(1px 1px at 42.6% 79.7%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 62.8% 56.8%,rgba(255,255,255,0.9),transparent),radial-gradient(1px 1px at 58.4% 6.7%,rgba(255,255,255,0.35),transparent),radial-gradient(1.4px 1.4px at 55.6% 14.5%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 54.0% 55.7%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 11.1% 55.7%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 10.5% 68.9%,rgba(255,255,255,0.35),transparent),radial-gradient(1.4px 1.4px at 61.7% 48.7%,rgba(255,255,255,0.7),transparent),radial-gradient(1.4px 1.4px at 77.2% 45.8%,rgba(255,255,255,0.5),transparent),radial-gradient(2px 2px at 30.4% 76.7%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 9.0% 30.2%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 72.5% 29.1%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 51.2% 17.5%,rgba(255,255,255,0.5),transparent),radial-gradient(2px 2px at 92.5% 41.6%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 75.9% 55.9%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 69.1% 57.9%,rgba(255,255,255,0.7),transparent),radial-gradient(1px 1px at 7.7% 10.8%,rgba(255,255,255,0.7),transparent),radial-gradient(2px 2px at 69.3% 8.1%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 64.4% 95.4%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 71.2% 85.4%,rgba(255,255,255,0.35),transparent),radial-gradient(1.4px 1.4px at 93.2% 35.4%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 49.4% 22.5%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 73.4% 39.4%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 17.3% 39.8%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 81.3% 83.2%,rgba(255,255,255,0.7),transparent),radial-gradient(1.4px 1.4px at 97.7% 66.2%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 15.8% 18.6%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 2.2% 80.1%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 28.6% 15.7%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 60.8% 31.9%,rgba(255,255,255,0.9),transparent),radial-gradient(2px 2px at 94.1% 63.6%,rgba(255,255,255,0.35),transparent),radial-gradient(2px 2px at 45.8% 83.9%,rgba(255,255,255,0.9),transparent),radial-gradient(1px 1px at 39.5% 39.5%,rgba(255,255,255,0.7),transparent),radial-gradient(1px 1px at 63.2% 7.9%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 44.2% 12.3%,rgba(255,255,255,0.35),transparent),radial-gradient(1.4px 1.4px at 11.0% 55.3%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 94.0% 59.7%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 61.2% 16.0%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 60.0% 46.6%,rgba(255,255,255,0.7),transparent),radial-gradient(1.4px 1.4px at 98.3% 45.8%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 9.4% 11.6%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 47.9% 67.1%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 21.1% 91.5%,rgba(255,255,255,0.5),transparent),radial-gradient(1.4px 1.4px at 68.6% 87.9%,rgba(255,255,255,0.5),transparent),radial-gradient(2px 2px at 96.9% 83.2%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 51.8% 87.4%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 53.2% 75.2%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 61.1% 76.1%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 81.2% 71.5%,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 51.7% 35.4%,rgba(255,255,255,0.35),transparent);-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
.hero :focus-visible{outline-color:#fff}
.hero-in{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,2.6vh,32px);padding-block:clamp(10px,2.8vh,40px) clamp(8px,2vh,26px)}
.hero-copy{flex:none;display:grid;justify-items:center;gap:clamp(9px,1.8vh,20px)}
.hero h1{font-size:clamp(2rem,min(5vw,8.4vh),4.3rem);line-height:1.03;letter-spacing:-.042em;max-width:17.5em;padding-bottom:.06em;background:linear-gradient(180deg,#fff 42%,#C5CCF8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{font-size:clamp(1rem,min(1.24vw,2.4vh),1.2rem);line-height:1.5;color:#B8C1E6;max-width:45em;text-wrap:pretty}
.hero .cta-row{justify-content:center}
.hero .btn{min-height:clamp(44px,6.4vh,52px)}
.hero .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 0 1px rgba(134,146,255,.4),0 14px 42px -8px rgba(58,75,242,.95)}
.hero .cta-note{margin:0;color:#8E99C6;font-size:.9rem}
.hero-stage{position:relative;isolation:isolate;flex:1 1 0;min-height:0;width:100%;container:stage/size;display:grid;place-items:center}
.hero-stage::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-34%;width:min(124%,1720px);height:124%;translate:-50% 0;background:radial-gradient(ellipse closest-side,rgba(255,186,60,.7),rgba(246,110,120,.34) 36%,rgba(112,98,246,.3) 62%,transparent);filter:blur(24px)}

/* the scene is sized in em and scaled by its container, so it always fits the space left under the copy */
.scene{--p:52.78%;position:relative;flex:none;width:100em;height:28em;font-size:clamp(4px,.78vw,12px);font-size:min(1cqw,3.5714cqh);line-height:1.3;text-align:left;perspective:130em}
.hb{position:absolute;inset:2.4em 4.5em 1.8em;display:flex;flex-direction:column;padding:1.2em 2em 1.1em;border-radius:1.8em;
  background:linear-gradient(180deg,rgba(30,40,96,.86),rgba(16,23,62,.8));border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2.4em 5em -1.8em rgba(3,6,26,.95),0 0 10em -1em rgba(92,100,255,.55);
  transform:rotateX(calc(8deg + var(--rx,0deg))) rotateY(var(--ry,0deg));transform-origin:50% 100%}
.hb-axis,.hb-row{display:grid;grid-template-columns:14.5em minmax(0,1fr) 12.4em;column-gap:1.5em;align-items:center}
.hb-axis{flex:none;height:2.6em;margin-bottom:.5em;color:#8590BD}
.hb-off{font-size:1em;white-space:nowrap}
.hb-hours{position:relative;height:100%;font-size:1.05em}
.hb-hours span{position:absolute;top:50%;transform:translate(-50%,-50%)}
.hb-now{position:absolute;left:var(--p);top:50%;transform:translate(-50%,-50%);z-index:3;min-width:4.3em;padding:.42em 0;border-radius:.7em;background:#FFB224;color:#1B1400;font-weight:700;line-height:1.1;text-align:center;box-shadow:0 0 0 .3em rgba(255,178,36,.17),0 0 2.6em rgba(255,178,36,.8)}
.hb-rows{flex:1;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:.85em}
.hb-row.hb-x{display:none}
.hb-person{display:flex;align-items:center;gap:.9em;min-width:0}
.hav{flex:none;display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:50%;font-size:.95em;font-weight:700;color:#fff;background:linear-gradient(140deg,#5B6BFF,#3A4BF2)}
.hav-2{background:linear-gradient(140deg,#22B8CF,#1483A8)} .hav-3{background:linear-gradient(140deg,#A47CFF,#7C5CF6)}
.hav-4{background:linear-gradient(140deg,#FF8FA3,#E0567A)} .hav-5{background:linear-gradient(140deg,#F7B955,#E08A1E)} .hav-6{background:linear-gradient(140deg,#34D399,#12976B)}
.hb-id{display:grid;min-width:0}
.hb-id b{font-size:1.28em;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-id small{font-size:1.02em;color:#8590BD}
.hl{position:relative;height:2.3em;border-radius:.7em;background:linear-gradient(90deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 8.33%,rgba(255,255,255,.06) 8.33%,rgba(255,255,255,.06) 83.33%,transparent 83.33%),repeating-linear-gradient(135deg,rgba(255,255,255,.11) 0 .22em,transparent .22em .62em) right/16.67% 100% no-repeat}
.hl::after{content:"";position:absolute;left:var(--p);top:-.46em;bottom:-.46em;z-index:2;width:.16em;margin-left:-.08em;border-radius:1em;background:#FFB224;box-shadow:0 0 1em .14em rgba(255,178,36,.75)}
.hl-fill{position:absolute;inset:.42em 0;clip-path:inset(-1em calc(100% - var(--p)) -1em 0)}
.hl .seg{border-radius:.24em;box-shadow:none}
.hl .s-p{background:#22D08B;box-shadow:0 0 .9em rgba(34,208,139,.45)} .hl .s-n{background:#F7C043} .hl .s-u{background:#FF6F88} .hl .s-i{background:#6F7BA6}
.hl .s-pause{background:repeating-linear-gradient(135deg,rgba(255,255,255,.34) 0 .2em,transparent .2em .5em)}
.h-late{position:absolute;top:.42em;bottom:.42em;display:flex;align-items:center;justify-content:center;border:.1em dashed #FF6F88;border-radius:.3em;font-size:.9em;font-weight:700;color:#FF9CAD;overflow:hidden}
.h-leave{position:absolute;top:.42em;bottom:.42em;display:flex;align-items:center;padding-left:1em;border-radius:.4em;background:repeating-linear-gradient(135deg,rgba(124,138,255,.36) 0 .3em,rgba(124,138,255,.13) .3em .7em);font-weight:600;color:#C5CBFF;white-space:nowrap;overflow:hidden}
.hc{display:inline-flex;align-items:center;gap:.55em;height:2.1em;padding:0 .9em;border-radius:99em;font-size:1.1em;font-weight:600;white-space:nowrap;background:rgba(255,255,255,.1);color:#DDE3F8}
.hc i{width:.6em;height:.6em;border-radius:50%;background:#22D08B;flex:none}
.hc-warn{background:rgba(255,178,36,.19);color:#FFD27A} .hc-warn i{background:#FFB224}
.hc-bad{background:rgba(255,111,136,.19);color:#FFA9B8} .hc-bad i{background:#FF6F88}
.hc-leave{background:rgba(124,138,255,.22);color:#C5CBFF} .hc-leave i{background:#8C98FF}
.hb-foot{flex:none;display:flex;flex-wrap:wrap;gap:.4em 1.9em;margin-top:.9em;padding-top:.8em;border-top:1px solid rgba(255,255,255,.1);color:#8590BD}
.hb-foot span{display:inline-flex;align-items:center;gap:.6em}
.hb-foot i{width:.9em;height:.9em;border-radius:.25em}
.hb-foot .s-p{background:#22D08B} .hb-foot .s-n{background:#F7C043} .hb-foot .s-u{background:#FF6F88} .hb-foot .s-i{background:#6F7BA6}
.hb-foot .s-pause{background:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 .2em,transparent .2em .5em);outline:1px solid rgba(255,255,255,.22)}
.fl{position:absolute;z-index:4;display:grid;gap:.7em;padding:1em 1.2em 1.1em;border-radius:1.3em;background:linear-gradient(180deg,rgba(44,55,122,.94),rgba(20,28,76,.96));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1.8em 3.6em -1em rgba(2,5,22,.9),0 0 4em -1em rgba(92,100,255,.5)}
.fl{translate:calc(var(--mx,0)*1.8em) calc(var(--my,0)*1.2em)}
.fl-bar{display:flex;align-items:center;gap:.6em;color:#AEB8E0}
.fl-bar svg{width:1.5em;height:1.5em}
.fl-bar b{font-weight:600;color:#fff}
.fl-bar small{margin-left:auto;font-size:.95em}
.fl p{font-size:1.18em;line-height:1.35;color:#E9EDFB}
.fl-agent{left:.8em;top:0;width:19.6em;gap:.6em;padding:.9em 1.1em 1em}
.fl-row{display:flex;align-items:center;justify-content:space-between;gap:1em}
.fl-timer{font:600 2em/1 var(--mono);letter-spacing:-.02em;color:#fff}
.fl-pill{display:inline-flex;align-items:center;gap:.5em;height:2em;padding:0 .8em;border-radius:99em;background:rgba(34,208,139,.18);color:#6EE7B7;font-weight:600}
.fl-pill i{width:.55em;height:.55em;border-radius:50%;background:#22D08B}
.fl-alert{left:57.5em;top:14.4em;width:20.5em;border-color:rgba(255,178,36,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1.8em 3.6em -1em rgba(2,5,22,.9),0 0 3.4em -.6em rgba(255,178,36,.55)}
@container stage (max-aspect-ratio:100/38){
  .scene{height:35.6em;font-size:min(1cqw,2.809cqh)}
  .hb-row.hb-x{display:grid}
  .fl-alert{top:15.2em}
}
@container stage (max-width:640px) or (max-aspect-ratio:100/58){
  .scene{height:70.6em;font-size:min(1cqw,1.4164cqh);perspective:240em}
  .hb{inset:0 0 8.6em;padding:3.4em 4em 3.6em;border-radius:5em;transform:rotateX(calc(5deg + var(--rx,0deg)))}
  .hb-axis{grid-template-columns:minmax(0,1fr);height:6.4em;margin-bottom:1.6em}
  .hb-axis>:not(.hb-hours){display:none}
  .hb-hours{font-size:2.9em}
  .hb-hours span:nth-child(even){display:none}
  .hb-rows{gap:3em}
  .hb-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"person status" "lane lane";row-gap:1.5em;column-gap:2em}
  .hb-row.hb-x,.hb-row.hb-m{display:none}
  .hb-person{grid-area:person;gap:2.4em} .hb-status{grid-area:status} .hl{grid-area:lane;height:5.4em;border-radius:1.6em}
  .hav{font-size:2.9em;width:2.2em;height:2.2em}
  .hb-id b{font-size:3.7em} .hb-id small{display:none}
  .hc{font-size:3.2em}
  .hl-fill{inset:1em 0} .hl .seg{border-radius:.5em}
  .hl::after{top:0;bottom:0;width:.5em;margin-left:-.25em}
  .hb-foot,.fl-agent{display:none}
  .fl-alert{left:auto;right:1.2em;top:auto;bottom:0;font-size:2.7em;width:23.5em;gap:.4em;padding:.75em 1em .85em}
}
@media (max-width:900px){.hero{margin-top:-64px;padding-top:64px}}
@media (max-width:700px){
  :root{--hh:clamp(540px,100vh,900px)}
  @supports (height:100svh){:root{--hh:clamp(540px,100svh,900px)}}
  .hero h1{font-size:clamp(1.85rem,min(8.6vw,5.4vh),2.7rem)}
  .hero-lead{font-size:clamp(.94rem,2.2vh,1.06rem);line-height:1.45}
  .hero .cta-row{flex-wrap:nowrap;gap:10px}
  .hero .btn{padding:0 18px}
}
@media (max-width:700px) and (max-height:640px){.hero .cta-note{display:none}}
@media (min-width:701px) and (max-height:620px){.hero .cta-note{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>:nth-child(2){animation-delay:.07s} .hero-copy>:nth-child(3){animation-delay:.14s} .hero-copy>:nth-child(4){animation-delay:.2s}
  .hb{animation:board-in 1.1s cubic-bezier(.2,.7,.2,1) .12s both}
  .fl-agent{animation:fl-in .8s cubic-bezier(.2,.7,.2,1) .75s both}
  .scene.is-playing .hc[data-at]{opacity:0;transform:translateY(.4em)}
  .scene.is-playing .hc[data-at].on{opacity:1;transform:none;transition:opacity .35s,transform .35s}
  .scene.is-playing .fl-alert{opacity:0;transform:translateY(1.2em) scale(.94)}
  .scene.is-playing .fl-alert.on{opacity:1;transform:none;transition:opacity .45s,transform .55s cubic-bezier(.2,1.3,.4,1)}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes board-in{from{opacity:0;transform:rotateX(24deg) translateY(4em) scale(.95)}}
@keyframes fl-in{from{opacity:0;transform:translateY(1.4em) scale(.94)}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(34,208,139,.55)}100%{box-shadow:0 0 0 .7em rgba(34,208,139,0)}}

/* sunrise: the first section after the hero leaves room for the band the hero paints below itself */
.sec.dawn{position:relative;z-index:1;padding-top:calc(var(--dawn) + clamp(8px,2vw,28px))}


/* ---------- day board ---------- */
.board{--c1:184px;--c3:150px;--p:52.78%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-ui);padding:20px 26px 18px}
.b-axis,.b-row{display:grid;grid-template-columns:var(--c1) minmax(0,1fr) var(--c3);align-items:center;column-gap:18px}
.b-axis{height:36px;margin-bottom:8px;font-size:.75rem;color:var(--ink-3)}
.b-hours{position:relative;height:100%}
.b-hours span{position:absolute;top:50%;transform:translate(-50%,-50%)}
.b-now{position:absolute;left:var(--p);top:50%;transform:translate(-50%,-50%);background:var(--ink);color:#fff;font-weight:600;font-size:.78rem;line-height:1;padding:7px 0;min-width:52px;text-align:center;border-radius:8px;z-index:3}
.b-rows{display:grid;gap:12px}
.b-person{display:flex;align-items:center;gap:10px;min-width:0}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;flex:none;background:var(--iris-soft);color:var(--iris-deep);letter-spacing:0}
.b-id{min-width:0;display:grid}
.b-name{font-weight:600;font-size:.9375rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-team{font-size:.78rem;color:var(--ink-3);line-height:1.25}
.lane{position:relative;height:30px;border-radius:9px;background:linear-gradient(90deg,#FFE2BF 0,#FFF0DC 8.33%,#EDF1F9 8.33%,#EDF1F9 83.33%,#BDB9F0 83.33%,#5958B6 89%,#1B2359 96%,#121A45 100%)}
.lane::after{content:"";position:absolute;left:var(--p);top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--ink);border-radius:2px;z-index:2}
.lane-fill{position:absolute;inset:5px 0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.seg{position:absolute;top:0;bottom:0;border-radius:3px;box-shadow:inset -1px 0 0 rgba(255,255,255,.55)}
.s-p{background:var(--prod)} .s-n{background:var(--neut)} .s-u{background:var(--unprod)} .s-i{background:var(--idle)}
.s-pause{background:repeating-linear-gradient(135deg,rgba(11,19,48,.2) 0 3px,transparent 3px 7px);box-shadow:none}
.s-leave{position:absolute;top:5px;bottom:5px;border-radius:5px;background:repeating-linear-gradient(135deg,rgba(58,75,242,.2) 0 4px,rgba(58,75,242,.07) 4px 9px);display:flex;align-items:center;justify-content:flex-start;padding-left:12px;font-size:.72rem;font-weight:600;color:var(--iris-deep);white-space:nowrap;overflow:hidden}
.s-late{position:absolute;top:5px;bottom:5px;border:1.5px dashed #E13A56;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;color:#B3223B;overflow:hidden}
.chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;font-size:.8125rem;font-weight:600;white-space:nowrap;background:var(--sky);color:var(--ink-2)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--prod);flex:none}
.chip-warn{background:#FFF1CF;color:#6F4A00} .chip-warn i{background:#E19A00}
.chip-bad{background:#FFE4E9;color:#9C1630} .chip-bad i{background:#E13A56}
.chip-leave{background:var(--iris-soft);color:var(--iris-deep)} .chip-leave i{background:var(--iris)}
.chip-ok{background:#DDF6EA;color:#0B6B45}
.board.is-playing .chip[data-at]{opacity:0;transform:translateY(5px)}
.board.is-playing .chip[data-at].on{opacity:1;transform:none;transition:opacity .35s,transform .35s}
.b-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-3)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px}
@media (max-width:900px){
  .board{--c1:0px;--c3:0px;padding:14px 14px 12px;border-radius:18px}
  .b-axis{grid-template-columns:minmax(0,1fr);height:30px}
  .b-axis>:not(.b-hours){display:none}
  .b-hours span:nth-child(even){display:none}
  .b-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"person status" "lane lane";row-gap:8px;column-gap:10px}
  .b-person{grid-area:person} .b-status{grid-area:status} .lane{grid-area:lane;height:26px}
  .lane::after{top:0;bottom:0}
  .b-rows{gap:14px}
  .b-team{display:none}
  .av{width:26px;height:26px;font-size:.64rem}
  .chip{height:26px;font-size:.78rem}
  .s-late{font-size:0}
}

/* ---------- small visuals (blog figures) ---------- */
.mini{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-ui);padding:18px;font-size:.8125rem}
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end}
.wk{display:grid;gap:7px;justify-items:center;color:var(--ink-3)}
.wk b{color:var(--ink);font-weight:600;font-size:.75rem;white-space:nowrap}
.wk-bar{width:100%;height:104px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.wk-bar i{display:block;border-radius:4px}
.split-bar{display:flex;height:18px;gap:3px;margin-bottom:16px}
.split-bar i{border-radius:5px}
.split-list{display:grid;gap:10px}
.split-list li{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center}
.split-list i{width:10px;height:10px;border-radius:3px}
.split-list b{font-weight:600}
.starts{display:grid;gap:10px}
.starts li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:.875rem;font-weight:600}

/* ---------- product UI: desktop agent window (dark, as in the app) ---------- */
.win{width:min(100%,420px);background:#0F1629;color:#E6EBF7;border:1px solid #232D4B;border-radius:var(--r-ui);box-shadow:var(--shadow-ui);overflow:hidden;font-size:.875rem;line-height:1.4;text-align:left}
.win-wide{width:min(100%,560px)}
.win-bar{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;background:#080D1C;font-size:.8125rem;font-weight:600}
.win-bar b{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.win-bar b::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)}
.win-ctl{display:flex;gap:7px}
.win-ctl i{width:9px;height:9px;border-radius:50%;background:#28324F}
.win-body{padding:14px;display:grid;gap:10px}
.card-d{background:#182035;border:1px solid #242E4A;border-radius:12px;padding:13px 15px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.timer{font-family:var(--mono);font-weight:700;font-size:1.85rem;line-height:1.1;letter-spacing:.02em;color:#F7C948}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-ok{background:rgba(29,184,122,.17);color:#4ADE9B}
.pill-pause{background:rgba(245,184,46,.16);color:#F7C948}
.pill-blue{background:rgba(108,123,255,.2);color:#A9B4FF}
.now-app{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center}
.app{width:38px;height:38px;border-radius:10px;background:#26304F;display:grid;place-items:center;font-weight:700;font-size:.8125rem;color:#C9D3F0}
.now-app b{display:block;font-size:.9688rem}
.win small{color:#8D9ABA;font-size:.75rem}
.tag{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px}
.t-p{background:rgba(29,184,122,.17);color:#4ADE9B}
.t-n{background:rgba(245,184,46,.16);color:#F7C948}
.t-u{background:rgba(240,99,122,.18);color:#FF93A5}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:#141C30;border-radius:10px;padding:10px 12px;display:grid;gap:1px;align-content:start}
.tile b{font-size:.9375rem;font-weight:600}
.tile em{font-style:normal;color:#8D9ABA;font-size:.72rem;line-height:1.35}
.rules-head{display:grid;gap:4px;padding:2px 2px 4px}
.rules-head b{font-size:1rem}
.proj{display:grid;grid-template-columns:4px minmax(0,1fr);gap:12px}
.proj>i{border-radius:4px}
.proj.is-on{border-color:#3B4BD8;background:#16204A}
.budget{margin-top:10px;display:grid;gap:5px}
.budget-bar{height:5px;border-radius:5px;background:#2A3557;overflow:hidden}
.budget-bar i{display:block;height:100%;border-radius:5px;background:#34D399}
.tasks{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.task{font-size:.75rem;font-weight:600;padding:5px 10px;border-radius:999px;background:#232D4D;color:#B9C4E4}
.task.is-on{background:#3A4BF2;color:#fff}
.opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.opts span{font-size:.8125rem;font-weight:600;padding:7px 12px;border-radius:9px;border:1px solid #303B5E;color:#C9D3F0}
.opts span.is-on{background:#F7C948;border-color:#F7C948;color:#201600}
.banner-d{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;border:1px solid rgba(247,201,72,.55);background:rgba(247,201,72,.08);border-radius:12px;padding:12px 14px;color:#FCE9A9}
.banner-d svg{color:#F7C948}
.banner-d b{display:block;color:#FFF3C7}

/* ---------- product UI: dashboard panels (light, as in the web app) ---------- */
.panel{width:min(100%,440px);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-ui);box-shadow:var(--shadow-ui);padding:14px;font-size:.875rem;line-height:1.4;text-align:left}
.panel-wide{width:min(100%,600px)}
.panel-h{font-weight:650;font-size:.9375rem;margin:2px 2px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-h small{font-weight:500;color:var(--ink-3);font-size:.78rem}
.shot{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#EEF2F9;border:1px solid var(--line)}
.shot-in{position:absolute;inset:0;display:grid;grid-template-columns:23% 1fr;filter:blur(var(--blur,3px));transition:filter .4s}
.fs-side{background:#1B2440;padding:12% 14%;display:grid;gap:9%;align-content:start}
.fs-side i{height:6px;border-radius:3px;background:#3B4770}
.fs-side i:first-child{background:#7C8AFF;width:70%}
.fs-main{padding:6% 7%;display:grid;gap:5%;align-content:start;background:#fff}
.fs-main b{height:12px;width:46%;border-radius:4px;background:#1B2440}
.fs-main p{height:6px;border-radius:3px;background:#CBD3E3}
.fs-main p.w70{width:70%} .fs-main p.w40{width:40%}
.fs-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5%;margin-top:3%}
.fs-cards i{aspect-ratio:5/3;border-radius:6px;background:#E3E9F5}
.fs-cards i:nth-child(2){background:#D5DBFF}
.shot-meta{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;font-size:.72rem;font-weight:700}
.shot-meta span{background:rgba(11,19,48,.82);color:#fff;padding:4px 8px;border-radius:6px}
.cap-ctl{margin-top:12px;padding:0 2px;font-weight:600}
.seg-ctl{display:inline-flex;background:var(--sky);border-radius:10px;padding:3px}
.seg-ctl button{border:0;background:none;padding:8px 14px;min-height:36px;border-radius:8px;font-weight:600;font-size:.8125rem;color:var(--ink-3);cursor:pointer}
.seg-ctl button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(11,19,48,.18)}
.recon{display:grid}
.recon-row{display:grid;grid-template-columns:minmax(0,1fr) 78px 78px 92px;gap:10px;align-items:center;padding:12px 4px;border-top:1px solid var(--line)}
.recon-row:first-child{border-top:0;color:var(--ink-3);font-size:.78rem;font-weight:600;padding-top:2px}
.recon-row b{font-weight:650}
.recon-row span.t{color:var(--ink-3);display:block;font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recon-row s{color:var(--ink-3)}
.recon-row .chip{justify-self:start;height:25px;font-size:.75rem;padding:0 10px}
.att{display:grid;gap:7px}
.att-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(7,26px);gap:6px;align-items:center}
.att-row>span:first-child{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-row.att-head{color:var(--ink-3);font-size:.72rem;font-weight:600;text-align:center}
.att-row i{height:26px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:.66rem;font-weight:700}
.a-p{background:#DDF6EA;color:#0B6B45} .a-l{background:#FFF1CF;color:#6F4A00} .a-a{background:#FFE4E9;color:#9C1630} .a-v{background:var(--iris-soft);color:var(--iris-deep)} .a-h{background:#F1E6FF;color:#5B2A9D} .a-w{background:var(--sky);color:var(--ink-3)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:11px 12px;display:grid;gap:2px}
.kpi small{color:var(--ink-3);font-size:.75rem}
.kpi b{font-size:1.3rem;letter-spacing:-.03em}
.kpi em{font-style:normal;font-size:.75rem;font-weight:600;color:#0B6B45}
.kpi em.dn{color:#9C1630}
.bars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;height:92px;margin-top:14px;padding:0 2px}
.bars i{display:block;border-radius:5px 5px 2px 2px;background:var(--iris)}
.bars-x{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:center;font-size:.72rem;color:var(--ink-3);margin-top:6px}
.live{display:grid}
.live li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 2px;border-top:1px solid var(--line)}
.live li:first-child{border-top:0}
.live b{display:block;font-weight:600}
.live small{color:var(--ink-3);font-size:.78rem}
.score{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center}
.ring{width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--prod) 0 82%,var(--sky) 82% 100%);display:grid;place-items:center}
.ring b{width:70px;height:70px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:1.25rem;letter-spacing:-.03em}
.rules{display:grid;gap:7px}
.rules li{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:600}
.rules .tag{font-weight:700}
.panel .t-p{background:#DDF6EA;color:#0B6B45} .panel .t-n{background:#FFF1CF;color:#6F4A00} .panel .t-u{background:#FFE4E9;color:#9C1630}
.suggest{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:8px;color:var(--ink-2)}

/* ---------- product UI: phone ---------- */
.phone{width:min(100%,262px);background:#0A1026;border-radius:38px;padding:9px;box-shadow:var(--shadow-ui)}
.phone-scr{aspect-ratio:9/15.6;border-radius:30px;background:linear-gradient(168deg,#3A3C9C,#171E4E 52%,#0B1330);padding:16px 12px;color:#fff;display:flex;flex-direction:column;gap:9px;overflow:hidden;text-align:left}
.phone-time{font-size:2.9rem;font-weight:600;letter-spacing:-.04em;text-align:center;line-height:1;margin:22px 0 18px}
.notif{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:11px 13px;font-size:.8125rem;line-height:1.4}
.notif b{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:600;margin-bottom:3px;color:#CBD3F2}
.notif b span{display:inline-flex;align-items:center;gap:6px}
.notif.is-old{opacity:.62}

/* ---------- night: boundaries ---------- */
.night{background:var(--night);color:var(--on-night)}
.night .lead{color:var(--on-night-2)}
.trust{background:linear-gradient(180deg,#151D4A 0,var(--night) 260px)}
.split-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,88px);align-items:center}
.split-2.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.split-2 .vis{display:grid;place-items:center}
.promises{display:grid;margin:30px 0 30px}
.promises li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--night-line);align-items:start}
.promises li:last-child{border-bottom:1px solid var(--night-line)}
.promises svg{color:var(--sun);margin-top:3px}
.copy p+p,.copy .lead+.tlink,.copy .lead+p{margin-top:18px}
.copy .lead{margin-top:20px}
.copy .tlink{display:inline-block;margin-top:22px}
@media (max-width:900px){
  .split-2,.split-2.flip{grid-template-columns:1fr}
  .split-2.flip .vis{order:2}
}

/* ---------- setup ---------- */
.setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.setup li{display:grid;gap:10px;align-content:start}
.setup h3{font-size:clamp(1.6rem,2.6vw,2.15rem);letter-spacing:-.035em;line-height:1.1;color:var(--iris);padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--line-2)}
.setup p{color:var(--ink-2)}
@media (max-width:900px){.setup{grid-template-columns:1fr;gap:36px}}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.plans-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px 26px;display:flex;flex-direction:column;gap:16px}
.plan-pop{border-color:var(--ink);box-shadow:var(--shadow-ui)}
.plan-tag{position:absolute;top:-13px;left:22px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;padding:4px 12px;border-radius:999px}
.plan h3{font-size:1.3rem}
.plan-for{color:var(--ink-2);font-size:.9375rem}
.plans:not(.plans-3) .plan-for{min-height:4.4em}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font-size:2.9rem;line-height:1;letter-spacing:-.045em;font-weight:700}
.price span{color:var(--ink-3);font-size:.9375rem}
.price-note{font-size:.875rem;color:var(--ink-3);margin-top:-8px;min-height:2.9em}
.price-total{font-size:.9375rem;font-weight:600;padding:10px 12px;border-radius:10px;background:var(--sky)}
.plan ul{display:grid;gap:10px;font-size:.9375rem;padding-top:6px}
.plan li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.plan li svg{color:var(--iris);margin-top:3px}
.plan-inc{font-weight:600;font-size:.9375rem;margin-bottom:-4px}
.plan-night{background:var(--night);color:var(--on-night);border-color:var(--night)}
.plan-night .plan-for,.plan-night .price-note{color:var(--on-night-2)}
.plan-night li svg{color:var(--sun)}
.plan-night .price-total{background:var(--night-2)}
.price-ctl{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:end;justify-content:space-between;margin-bottom:40px}
.seats{display:grid;gap:10px;flex:1 1 320px;max-width:520px}
.seats label{font-weight:600;display:flex;justify-content:space-between;gap:12px}
.seats input[type=range]{width:100%;height:28px;accent-color:var(--iris);cursor:pointer;margin:0}
.toggle{display:inline-flex;background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:4px}
.toggle button{border:0;background:none;min-height:42px;padding:0 18px;border-radius:999px;font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.toggle small{font-weight:500;opacity:.8;margin-left:6px}
.teaser-foot{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:30px}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9375rem}
.cmp col.c-f{width:46%}
.cmp thead th{position:sticky;top:68px;background:var(--sky);padding:16px 8px;font-size:1.05rem;font-weight:650;text-align:center;border-bottom:2px solid var(--ink);z-index:2}
.cmp thead th:first-child{text-align:left;padding-left:0}
.cmp tbody th{text-align:left;font-weight:500;padding:13px 12px 13px 0;border-top:1px solid var(--line)}
.cmp td{text-align:center;padding:13px 6px;border-top:1px solid var(--line);font-weight:600;font-size:.875rem}
.cmp td.yes::before{content:"";display:inline-block;width:7px;height:13px;border:solid var(--iris);border-width:0 2.4px 2.4px 0;transform:translateY(-2px) rotate(45deg)}
.cmp td.no::before{content:"";display:inline-block;width:12px;height:2.4px;border-radius:2px;background:var(--line-2);vertical-align:middle}
.cmp tr.grp th{font-weight:650;font-size:1.0625rem;padding-top:34px;border-top:0;letter-spacing:-.015em}
@media (max-width:1080px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px} .plan-for,.price-note{min-height:0}}
@media (max-width:900px){.cmp thead th{top:64px}}
@media (max-width:680px){
  .plans,.plans-3{grid-template-columns:1fr;gap:24px}
  .cmp{font-size:.8438rem}
  .cmp col.c-f{width:43%}
  .cmp thead th{font-size:.8438rem;padding:12px 2px}
  .cmp td{font-size:.75rem;padding:12px 2px}
  .cmp tbody th{padding-right:8px}
}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq-grid>h2{position:sticky;top:104px}
.qa{border-top:1px solid var(--line-2)}
.qa:last-child{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:600;font-size:1.125rem;letter-spacing:-.012em;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:11px;height:11px;margin:5px 6px 0 0;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.qa[open] summary::after{transform:rotate(225deg);margin-top:10px}
.qa p{padding:0 44px 24px 0;color:var(--ink-2);max-width:66ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr} .faq-grid>h2{position:static} .qa p{padding-right:8px}}

/* ---------- finale + footer ---------- */
.finale{background:linear-gradient(180deg,var(--sky) 0,#D9D6F6 14%,#8D8AD6 34%,#3B3F96 58%,#151D4A 80%,var(--night) 100%);color:#fff;padding:clamp(150px,19vw,250px) 0 clamp(64px,8vw,104px)}
.finale-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:end}
.finale p{margin-top:16px;color:#D5DAF3;font-size:clamp(1.0625rem,1.35vw,1.25rem);max-width:34em}
@media (max-width:900px){.finale-in{grid-template-columns:1fr}}
.ftr{padding:clamp(40px,5vw,64px) 0 36px;font-size:.9375rem}
.ftr-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:36px 32px;padding-bottom:44px;border-bottom:1px solid var(--night-line)}
.ftr-brand p{margin-top:16px;color:var(--on-night-2);max-width:24em}
.ftr-h{font-size:.9375rem;font-weight:600;letter-spacing:0;margin-bottom:14px;color:#fff;line-height:1.4}
.ftr ul{display:grid;gap:10px}
.ftr li a{color:var(--on-night-2);text-decoration:none;transition:color .15s}
.ftr li a:hover{color:#fff}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:24px;color:#8792B4;font-size:.8438rem}
@media (max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr} .ftr-brand{grid-column:1/-1}}

/* ---------- inner pages ---------- */
.page-hero{padding-block:clamp(44px,6.5vw,92px) clamp(36px,5vw,64px)}
.page-hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);max-width:17em}
.page-hero .lead{margin-top:22px;max-width:40em}
.page-hero .cta-row{margin-top:30px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.toc a{padding:9px 15px;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;font-weight:500;font-size:.9375rem;background:var(--paper);transition:border-color .15s}
.toc a:hover{border-color:var(--ink)}
.feat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);padding-block:clamp(48px,6vw,84px);border-top:1px solid var(--line-2)}
.feat-head{position:sticky;top:104px;align-self:start}
.feat-head p{margin-top:14px;color:var(--ink-2)}
.feat-head .tlink{display:inline-block;margin-top:18px}
.spec{display:grid}
.spec>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:6px 28px;padding:15px 0;border-top:1px solid var(--line)}
.spec>div:first-child{border-top:0}
.spec dt{font-weight:600}
.spec dd{color:var(--ink-2)}
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.roles li{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--ink)}
.roles p{color:var(--ink-2);font-size:.9688rem}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:15px 20px 15px 0;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{font-size:.875rem;color:var(--ink-3);font-weight:600;border-top:0;padding-top:0}
.tbl tbody th{font-weight:600;width:28%}
.tbl td{color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,72px)}
.facts>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.facts dt{color:var(--ink-3)} .facts dd{font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,36px);counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s);font-size:1.6rem;font-weight:650;letter-spacing:-.03em;color:var(--iris);line-height:1}
.steps p{color:var(--ink-2);font-size:.9688rem}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.cols-3>*{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:2px solid var(--ink)}
.cols-3 p{color:var(--ink-2)}
.night .cols-3>*{border-top-color:var(--night-line)}
.night .cols-3 p{color:var(--on-night-2)}
@media (max-width:900px){
  .feat{grid-template-columns:1fr} .feat-head{position:static}
  .spec>div{grid-template-columns:1fr;gap:3px}
  .roles,.cols-3{grid-template-columns:1fr;gap:28px}
  .facts{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:start}
.form{display:grid;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-ui)}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:.9375rem}
.field input,.field select,.field textarea{background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;min-height:50px;width:100%;font-size:1rem}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(58,75,242,.28);outline-offset:0;border-color:var(--iris)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-msg{border-radius:10px;padding:14px 16px;font-size:.9375rem;background:var(--iris-soft);color:var(--iris-deep);font-weight:500}
.form-msg[hidden]{display:none}
.form-msg.is-err{background:#FFE4E9;color:#9C1630}
.form-fine{font-size:.875rem;color:var(--ink-3)}
.next{display:grid;margin-top:30px}
.next li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line-2)}
.next li:last-child{border-bottom:1px solid var(--line-2)}
.next svg{color:var(--iris);margin-top:3px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.field-2{grid-template-columns:1fr}}

/* ---------- prose (legal) ---------- */
.prose{max-width:72ch}
.prose h2{font-size:1.45rem;letter-spacing:-.02em;margin:44px 0 12px}
.prose p,.prose li{color:var(--ink-2);margin-bottom:12px}
.prose ul{list-style:disc;padding-left:22px}
.prose a{font-weight:600}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.b-hours span.is-hid{visibility:hidden}
.qa summary h3{font:inherit;letter-spacing:inherit;margin:0}
.recon-row s{display:block;font-size:.75rem}
.sec:not(.night)+.sec:not(.night){padding-top:0}
.page-hero+.sec{padding-top:clamp(12px,2vw,28px)}

.feat-head h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.note{margin-top:22px;color:var(--ink-2);max-width:60ch}
.night .promises+.tlink{margin-top:0}

@media (max-width:359px){.hdr-cta .btn-sm{display:none}}
@media (max-width:560px){
  .recon-row{grid-template-columns:minmax(0,1fr) 58px 58px 78px;gap:8px;font-size:.8125rem}
  .recon-row b{white-space:nowrap}
  .recon-row span.t{display:none}
  .recon-row .chip{padding:0 8px;font-size:.72rem}
}
@media (max-width:700px){
  .tbl{min-width:0}
  .tbl thead{display:none}
  .tbl tr{display:block;padding:14px 0;border-top:1px solid var(--line)}
  .tbl tbody tr:first-child{border-top:0;padding-top:0}
  .tbl th,.tbl td{display:block;width:auto;padding:2px 0;border:0}
  .tbl tbody th{width:auto;margin-bottom:4px}
  .tbl td[data-l]::before{content:attr(data-l) ": ";font-weight:600;color:var(--ink)}
}
.cap-ctl{flex-wrap:wrap}
.suggest .seg-ctl{flex-wrap:wrap;align-self:start}
@media (max-width:900px){.phone{width:min(100%,216px);border-radius:32px} .phone-scr{border-radius:25px} .phone-time{font-size:2.3rem;margin:14px 0 12px}}
@media (max-width:420px){
  .att-row{grid-template-columns:minmax(0,1fr) repeat(5,26px)}
  .att-row>:nth-child(n+7),.att-legend span:last-child{display:none}
  .seg-ctl button{padding:8px 10px}
  .kpi b{font-size:1.15rem}
}
.win-body{grid-template-columns:minmax(0,1fr)}
.card-d.row{flex-wrap:wrap;row-gap:6px}
.rules li{flex-wrap:wrap}
.kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:420px){
  .timer{font-size:1.5rem}
  .win-body{padding:11px}
  .card-d{padding:11px 12px}
  .tiles{gap:6px}
  .tile{padding:9px 10px}
  .now-app{grid-template-columns:34px minmax(0,1fr)}
  .now-app .tag{grid-column:2;justify-self:start}
  .app{width:34px;height:34px}
}
@media (max-width:360px){.toggle button{padding:0 12px;font-size:.9375rem}}

/* Cross-page fade in browsers that support it; the header stays put */

/* ---------- guides teaser, footer attribution ---------- */
.learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-bottom:30px}
.learn a{display:grid;gap:10px;align-content:start;height:100%;padding-top:20px;border-top:2px solid var(--ink);text-decoration:none}
.learn a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.learn p{color:var(--ink-2)}
@media (max-width:760px){.learn{grid-template-columns:1fr}}
.ftr-brand .ftr-by{margin-top:10px}
.ftr-by a{color:#fff;text-underline-offset:3px}

/* ---------- legal pages ---------- */
.legal{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(28px,5vw,72px);align-items:start}
.legal-toc{position:sticky;top:100px;font-size:.9375rem}
.legal-toc ol{display:grid;gap:9px}
.legal-toc a{color:var(--ink-2);text-decoration:none}
.legal-toc a:hover{color:var(--ink);text-decoration:underline}
.prose h2{scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose strong{color:var(--ink)}
@media (max-width:900px){.legal{grid-template-columns:1fr} .legal-toc{position:static}}

/* ---------- blog ---------- */
.cat-monitoring{--c:#3A4BF2;--c-d:#2433B8;--c-s:#E8EBFF;--shape:22px 22px 22px 84px}
.cat-time{--c:#0E9F6E;--c-d:#0A6B4E;--c-s:#DDF6EA;--shape:84px 22px 22px 22px}
.cat-productivity{--c:#7C5CF6;--c-d:#4B31C4;--c-s:#EDE7FF;--shape:22px 84px 22px 22px}
.cat-jira{--c:#1483A8;--c-d:#0B5F80;--c-s:#DCF2F8;--shape:22px 22px 84px 22px}
.cat-software{--c:#D9466F;--c-d:#B23158;--c-s:#FFE4EC;--shape:84px 22px 84px 22px}
.blog-hero{padding-bottom:clamp(28px,4vw,48px)}
.blog-sec{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--line);scroll-margin-top:72px}
.blog-sec-h{max-width:46rem;margin-bottom:clamp(26px,3.4vw,40px)}
.blog-sec-h h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.blog-sec-h h2::before{content:"";display:inline-block;width:.56em;height:.56em;margin-right:.42em;border-radius:50% 50% 50% 0;background:var(--c,var(--sun))}
.blog-sec-h p{margin-top:10px;color:var(--ink-2);font-size:1.0625rem}
.pcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.6vw,52px) clamp(20px,2.6vw,36px)}
.pc a{display:grid;gap:10px;align-content:start;height:100%;text-decoration:none}
.pc-art{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--shape);background:var(--c-d);transition:border-radius .4s cubic-bezier(.2,.7,.2,1)}
.art{display:block;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pc a:hover .pc-art{border-radius:40px}
.pc a:hover .art{transform:scale(1.05)}
.pc h3{margin-top:8px;font-size:1.22rem;line-height:1.24}
.pc p{color:var(--ink-2);font-size:.9688rem;line-height:1.5}
.pc a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pcs-feat{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:repeat(4,auto);column-gap:clamp(24px,4vw,56px);row-gap:clamp(22px,2.6vw,34px);align-content:space-between}
.pcs-feat .pc:first-child{grid-row:1/5}
.pcs-feat .pc:first-child .pc-art{aspect-ratio:16/10.6}
.pcs-feat .pc:first-child h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;margin-top:12px}
.pcs-feat .pc:first-child p{font-size:1.0625rem}
.pcs-feat .pc:not(:first-child) a{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:20px;align-items:start}
.pcs-feat .pc:not(:first-child) .pc-art{grid-row:1/3}
.pcs-feat .pc:not(:first-child) h3{margin-top:2px}
.blog-feat{border-top:0;padding-top:0}
@media (max-width:860px){
  .pcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcs-feat{grid-template-columns:1fr;grid-template-rows:none}
  .pcs-feat .pc:first-child{grid-row:auto}
}
@media (max-width:560px){
  .pcs{grid-template-columns:1fr}
  .pcs-feat .pc:not(:first-child) a{grid-template-columns:1fr;grid-template-rows:none}
  .pcs-feat .pc:not(:first-child) .pc-art{grid-row:auto}
  .pcs-feat .pc:not(:first-child) h3{margin-top:8px}
}

/* article */
.post-hero{padding-block:clamp(26px,3.6vw,52px) clamp(28px,4vw,52px)}
.post-hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;font-size:.9375rem;font-weight:500;color:var(--ink-3)}
.crumbs a{color:var(--c-d);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.post h1{font-size:clamp(2.05rem,4.1vw,3.3rem);line-height:1.06}
.post-dek{margin-top:18px;max-width:38em;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;color:var(--ink-2)}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:20px;font-size:.9375rem;color:var(--ink-3)}
.post-meta span+span{padding-left:16px;border-left:1px solid var(--line-2)}
.post-art{aspect-ratio:16/11;overflow:hidden;border-radius:28px 28px 28px 120px;background:var(--c-d);box-shadow:var(--shadow-ui)}
.cat-time .post-art{border-radius:120px 28px 28px 28px} .cat-productivity .post-art{border-radius:28px 120px 28px 28px}
.cat-jira .post-art{border-radius:28px 28px 120px 28px} .cat-software .post-art{border-radius:120px 28px 120px 28px}
.post-grid{display:grid;grid-template-columns:minmax(0,230px) minmax(0,730px);gap:clamp(28px,5vw,84px);align-items:start;padding-block:clamp(28px,4vw,48px) clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.post-toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;font-size:.9375rem}
.post-toc summary{list-style:none;margin-bottom:12px;font-weight:600}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc ol{display:grid;gap:2px;border-left:2px solid var(--line)}
.post-toc a{display:block;margin-left:-2px;padding:6px 0 6px 14px;border-left:2px solid transparent;color:var(--ink-3);text-decoration:none;line-height:1.35}
.post-toc a:hover{color:var(--ink)}
.post-toc a.is-on{color:var(--ink);font-weight:600;border-left-color:var(--c)}
.post-body{min-width:0;font-size:1.0938rem;line-height:1.72;color:var(--ink-2)}
.post-body>*+*{margin-top:1.15em}
.post-body h2{margin-top:2.1em;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.16;letter-spacing:-.026em;color:var(--ink);scroll-margin-top:96px}
.post-body>h3{margin-top:1.7em;font-size:1.25rem;color:var(--ink)}
.post-body>h2+*,.post-body>h3+*{margin-top:.7em}
.post-body a:not(.btn){color:var(--iris-deep);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.post-body a:not(.btn):hover{color:var(--iris)}
.post-body strong{color:var(--ink);font-weight:650}
.post-body code{padding:.12em .4em;border:1px solid var(--line);border-radius:6px;background:var(--paper);font:.88em/1.5 var(--mono);color:var(--ink);word-break:break-word}
:is(.post-body,.take,.call,.ans,.qa)>ul,:is(.post-body,.take,.call,.ans,.qa)>ol{display:grid;gap:.5em}
:is(.post-body,.take,.call,.ans,.qa)>ul>li{position:relative;padding-left:1.5em}
:is(.post-body,.take,.call,.ans,.qa)>ul>li::before{content:"";position:absolute;left:.2em;top:.62em;width:.5em;height:.5em;border-radius:50% 50% 50% 0;background:var(--c)}
:is(.post-body,.take,.call,.ans,.qa)>ol{counter-reset:n}
:is(.post-body,.take,.call,.ans,.qa)>ol>li{counter-increment:n;position:relative;padding-left:2.5em}
:is(.post-body,.take,.call,.ans,.qa)>ol>li::before{content:counter(n);position:absolute;left:0;top:.14em;display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:50%;background:var(--c-s);color:var(--c-d);font-size:.84em;font-weight:700}
.ans{padding:22px 26px;border-radius:20px 20px 20px 56px;background:var(--c-s);color:var(--ink);font-size:1.19rem;line-height:1.55;font-weight:500}
.ans>*+*{margin-top:.7em}
.take{padding:24px 26px 26px;border:1px solid var(--line-2);border-radius:20px;background:var(--paper)}
.post-body .take h2{margin:0 0 .75em;font-size:1.2rem;letter-spacing:-.015em}
.call{padding:18px 22px;border:1px solid var(--line-2);border-left:4px solid var(--c);border-radius:16px;background:var(--paper)}
.call>*+*{margin-top:.6em}
.call-warn{border-left-color:#E19A00;background:#FFFAEC}
.call-tip{border-left-color:var(--prod)}
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 26px;align-items:center;padding:22px 26px;border-radius:20px;background:var(--night);color:var(--on-night)}
.stat b{font-size:clamp(2.5rem,6vw,3.7rem);font-weight:700;line-height:1;letter-spacing:-.04em;color:#fff}
.stat p{font-size:1.02rem;line-height:1.5;color:var(--on-night-2)}
.post-body .stat a{color:#fff}
.tpl{border:1px solid var(--line-2);border-radius:18px;background:var(--paper);overflow:hidden}
.tpl-h{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--line);color:var(--ink)}
.tpl-copy{min-height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--sky);font-weight:600;font-size:.9rem;cursor:pointer}
.tpl-copy:hover{border-color:var(--ink)}
.tpl pre{margin:0;padding:20px;max-height:540px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:400 .95rem/1.65 var(--font);color:var(--ink-2)}
.fig{margin-inline:0}
.fig-stage{display:grid;place-items:center;padding:clamp(18px,3vw,34px);border-radius:22px;background:linear-gradient(160deg,#EAF1FE,#D9E5FB);overflow:hidden;font-size:1rem;line-height:1.6;color:var(--ink)}
.fig-stage>*{max-width:100%}
.fig figcaption{margin-top:10px;font-size:.92rem;line-height:1.5;color:var(--ink-3)}
.inl{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 28px;padding:24px 26px;border-radius:22px;background:var(--night);color:#fff}
.inl b{display:block;font-size:1.2rem;letter-spacing:-.015em;line-height:1.3}
.inl p{margin-top:4px;font-size:1rem;line-height:1.5;color:var(--on-night-2)}
.inl .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.inl .btn-ghost:hover{border-color:#fff}
.inl :focus-visible{outline-color:#fff}
.tbl-x{overflow-x:auto;border:1px solid var(--line-2);border-radius:16px;background:var(--paper)}
.tbl-x table{width:100%;min-width:540px;border-collapse:collapse;font-size:.97rem;line-height:1.45}
.tbl-x th,.tbl-x td{padding:12px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.tbl-x thead th{border-top:0;background:var(--sky);color:var(--ink);font-size:.92rem;font-weight:650}
.tbl-x td:first-child{color:var(--ink);font-weight:600}
.post-sec{margin-top:clamp(40px,5vw,64px)}
.post-body .post-sec>h2{margin:0 0 .6em}
.post-body .qa p{padding-bottom:14px}
.post-body .qa>:last-child{padding-bottom:24px}
.src{display:grid;gap:8px;padding-left:1.4em;list-style:decimal;font-size:.96rem;color:var(--ink-3)}
.src a{word-break:break-word}
.post-more{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px)}
@media (max-width:1000px){
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .post-toc{position:static;max-height:none;padding:2px 18px;border:1px solid var(--line-2);border-radius:16px;background:var(--paper)}
  .post-toc summary{display:flex;justify-content:space-between;align-items:center;margin:0;padding:13px 0;cursor:pointer}
  .post-toc summary::after{content:"";width:9px;height:9px;margin-right:4px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
  .post-toc details[open] summary::after{transform:rotate(225deg)}
  .post-toc nav{padding-bottom:14px}
}
@media (max-width:860px){
  .post-hero-in{grid-template-columns:1fr}
  .post-art,.cat-time .post-art,.cat-productivity .post-art,.cat-jira .post-art,.cat-software .post-art{aspect-ratio:16/8;border-radius:22px 22px 22px 72px}
}
@media (max-width:560px){
  .post-body{font-size:1.0313rem}
  .ans{padding:18px 20px;font-size:1.09rem}
  .take,.call,.stat,.inl{padding:18px 20px}
  .stat{grid-template-columns:1fr}
  .fig-stage{padding:14px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){.pc-art,.art{transition:none}}

.facts dd{min-width:0;overflow-wrap:anywhere}
.facts dd .tlink{font-weight:600}

@media (max-width:560px){.post-meta{display:grid;gap:2px} .post-meta span+span{padding-left:0;border-left:0}}

/* ---------- article blocks for skimming: tiles, bars, steps, checklist, do and do not, formula, facts, strip, cards, timeline ---------- */
.post-body :is(.stt,.stp,.chk,.dd,.gl,.cds,.tln) :is(ul,ol){list-style:none;margin:0;padding:0}
.post-body :is(.stt,.stp,.chk,.dd,.gl,.cds,.tln,.hbar,.strip,.fml) h3{margin:0;letter-spacing:-.012em}
.blk-n{margin-top:12px;font-size:.86rem;line-height:1.45;color:var(--ink-3)}
.stt ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stt li{display:grid;gap:6px;align-content:start;padding:20px 20px 18px;border:1px solid var(--line-2);border-radius:18px;background:var(--paper)}
.stt li:first-child{border-color:var(--c-d);border-radius:18px 18px 18px 44px;background:var(--c-d)}
.stt b{font-size:clamp(1.9rem,4.2vw,2.5rem);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.stt p{font-size:.95rem;line-height:1.4;color:var(--ink-2)}
.stt small{font-size:.8rem;line-height:1.35;color:var(--ink-3)}
.stt li:first-child :is(b,p,small){color:#fff}
.post-body .stt li:first-child a{color:#fff}
.hbar,.strip{margin-inline:0;padding:22px 24px;border:1px solid var(--line-2);border-radius:20px;background:var(--paper)}
.hbar figcaption,.strip figcaption{margin-bottom:16px;font-weight:650;font-size:1.05rem;line-height:1.35;color:var(--ink)}
.hbar ul{display:grid;gap:13px;list-style:none;margin:0;padding:0}
.hbar li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 14px;align-items:baseline;padding:0}
.post-body .hbar li::before{content:none}
.hbar span{font-size:.95rem;line-height:1.35;color:var(--ink-2)}
.hbar b{font-size:1rem;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.hbar i{grid-column:1/-1;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--c) var(--v),var(--sky) 0)}
.hbar .is-hot i{background:linear-gradient(90deg,var(--ink) var(--v),var(--sky) 0)}
.hbar .is-hot span{color:var(--ink);font-weight:650}
.stp ol{counter-reset:s}
.stp li{counter-increment:s;position:relative;padding:0 0 24px 58px}
.stp li::before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50% 50% 50% 0;background:var(--c-d);color:#fff;font-weight:700;font-size:1rem}
.stp li::after{content:"";position:absolute;left:18px;top:46px;bottom:6px;width:2px;border-radius:1px;background:var(--line-2)}
.stp li:last-child{padding-bottom:0}
.stp li:last-child::after{content:none}
.stp h3{padding-top:7px;font-size:1.1rem;line-height:1.3;color:var(--ink)}
.stp p{margin-top:4px}
.chk{padding:22px 24px;border-radius:20px;background:var(--c-s)}
.chk h3{margin-bottom:14px!important;font-size:1.1rem;color:var(--ink)}
.chk ul{display:grid;gap:11px}
.chk li{position:relative;padding-left:36px;color:var(--ink);line-height:1.5}
.chk li::before{content:"";position:absolute;left:0;top:.12em;width:23px;height:23px;border:1.5px solid var(--c);border-radius:7px;background:var(--paper)}
.chk li::after{content:"";position:absolute;left:8px;top:.3em;width:6px;height:11px;border:solid var(--c-d);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dd>div{padding:20px 22px;border:1px solid var(--line-2);border-radius:18px;background:var(--paper)}
.dd h3{display:flex;align-items:center;gap:10px;margin-bottom:13px!important;font-size:1.05rem;color:var(--ink)}
.dd h3{position:relative}
.dd h3::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:#DDF6EA}
.dd-y h3::after{content:"";position:absolute;left:10px;top:50%;width:5px;height:10px;margin-top:-7px;border:solid #0A6B4E;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dd-n h3::before{background:#FFE4EC linear-gradient(#B23158,#B23158) no-repeat center/12px 2.5px}
.dd ul{display:grid;gap:9px}
.dd li{position:relative;padding-left:18px;font-size:.98rem;line-height:1.5}
.dd li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--prod)}
.dd-n li::before{background:var(--unprod)}
.fml{padding:22px 26px;border-radius:20px 20px 20px 56px;background:var(--night);color:var(--on-night)}
.fml small{display:block;margin-bottom:8px;font-size:.85rem;color:var(--on-night-2)}
.fml-eq{font-size:clamp(1.12rem,2.4vw,1.42rem);font-weight:650;line-height:1.38;letter-spacing:-.012em;color:#fff}
.fml-ex{margin-top:10px;font-size:.98rem;line-height:1.5;color:var(--on-night-2)}
.post-body .fml strong{color:#fff}
.gl{overflow:hidden;border:1px solid var(--line-2);border-radius:20px;background:var(--paper)}
.gl h3{padding:15px 22px;border-bottom:1px solid var(--line);background:var(--c-s);font-size:1.05rem;color:var(--ink)}
.gl dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--line)}
.gl dl>div{padding:14px 22px 15px;background:var(--paper)}
.gl dl>div:last-child:nth-child(odd){grid-column:1/-1}
.gl dt{font-size:.82rem;font-weight:600;color:var(--ink-3)}
.gl dd{margin:3px 0 0;font-weight:550;line-height:1.42;color:var(--ink)}
.strip-row{display:flex;gap:4px}
.strip-row>div{display:grid;gap:3px;align-content:start;min-width:0;padding:14px 14px 13px;border-radius:12px}
.strip-row b{font-size:.98rem;line-height:1.25;color:inherit}
.strip-row span{font-size:.86rem;line-height:1.38;opacity:.92}
.sg-a{background:var(--c-s);color:var(--c-d)} .sg-b{background:var(--c-d);color:#fff} .sg-c{background:var(--sky);color:var(--ink-2)}
.sg-d{background:#FFF1D6;color:#734600} .sg-e{background:#FFE4EC;color:#8E2145}
.cds ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cds-2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.cds li{display:grid;gap:6px;align-content:start;padding:18px 20px 19px;border:1px solid var(--line-2);border-radius:18px;background:var(--paper)}
.cds h3{font-size:1.03rem;line-height:1.3;color:var(--ink)}
.cds h3::before{content:"";display:block;width:14px;height:14px;margin-bottom:11px;border-radius:50% 50% 50% 0;background:var(--c)}
.cds p{font-size:.95rem;line-height:1.5}
.cds small{font-size:.83rem;font-weight:600;line-height:1.35;color:var(--c-d)}
.tln ol{margin-left:8px!important;border-left:2px solid var(--line-2)}
.tln li{position:relative;padding:0 0 20px 26px}
.tln li:last-child{padding-bottom:2px}
.tln li::before{content:"";position:absolute;left:-9px;top:.32em;width:16px;height:16px;border:3px solid var(--c);border-radius:50%;background:var(--sky);box-sizing:border-box}
.tln b{display:block;font-size:1.02rem;color:var(--ink)}
.tln p{margin-top:2px}
@media (max-width:760px){
  .dd,.gl dl,.cds ul,.cds-2 ul{grid-template-columns:minmax(0,1fr)}
  .hbar,.strip,.chk,.fml{padding:18px 20px}
  .gl dl>div,.gl h3{padding-inline:18px}
  .stt ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stt-3 li:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  .strip-row{flex-direction:column}
  .strip-row>div{flex:none!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px;align-items:baseline}
}
/* hub: compact list under the six cards of each topic */
.pl-h{margin-top:clamp(34px,4.4vw,56px);font-weight:600;font-size:1.0625rem;color:var(--ink)}
.pl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin-top:12px}
.pl a{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;height:100%;padding:13px 0;border-top:1px solid var(--line);text-decoration:none}
.pl-art{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:10px 10px 10px 26px;background:var(--c-d)}
.pl-art .art{display:block;width:100%;height:100%}
.pl h3{font-size:1.02rem;line-height:1.3;letter-spacing:-.012em}
.pl small{display:block;margin-top:3px;overflow:hidden;font-size:.9rem;line-height:1.4;color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis}
.pl a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:820px){.pl{grid-template-columns:minmax(0,1fr)} .pl small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
/* tables: three columns or fewer fit a phone without scrolling. Wider ones scroll and show a shadow at the edge that has more. */
.tbl-x table:not(:has(th:nth-child(4))){min-width:0}
.tbl-x{background:
  linear-gradient(90deg,var(--paper) 40%,rgba(255,255,255,0)) left center/36px 100% no-repeat local,
  linear-gradient(270deg,var(--paper) 40%,rgba(255,255,255,0)) right center/36px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(11,19,48,.2),rgba(11,19,48,0)) left center/14px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(11,19,48,.2),rgba(11,19,48,0)) right center/14px 100% no-repeat scroll,
  var(--paper)}
.post-body .tbl-x thead th{background:rgba(242,245,250,.82)}
.post-rel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 28px;list-style:none;margin:0;padding:0}
.post-rel li{position:relative;padding-left:1.4em;line-height:1.45}
.post-rel li::before{content:"";position:absolute;left:.1em;top:.5em;width:.5em;height:.5em;border-radius:50% 50% 50% 0;background:var(--c)}
@media (max-width:700px){.post-rel ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.post-body .tbl-x th,.post-body .tbl-x td{padding:10px 11px} .post-body .tbl-x table{font-size:.9rem} .post-body .tbl-x table:not(:has(th:nth-child(4))) :is(th,td){overflow-wrap:anywhere}}