/* serenity.is home page. Product-first single column: hero with the real StartSharp window, declare-to-screens explainer, tabbed tour, facts grid, quotes, editions. Poppins throughout, like the product. */
:root{
  --bg:#FFFFFF; --surface:#F3F7FC; --surface2:#EAF2FE; --ink:#0B1B3A; --slate:#55657D; --line:#E1E8F2;
  --brand:#1B6FE6; --brand-text:#1558BD; --brand-ink:#FFFFFF; --sky:#3DA0F5; --code-bg:#0B1B3A; --code-ink:#CFE0FF; --code-key:#7FB8FF; --code-attr:#FFD58A; --code-dim:#7C8DAD;
  --stage-a:#CFE5FF; --stage-b:#EAF3FF; --foot:#0B1B3A; --foot-ink:#C9D6EE; --foot-dim:#8A9BB8; --foot-line:#1E3157;
  --hi:#0B1B3A; --hi-ink:#FFFFFF; --hi-dim:#A9B9D3;
  --f:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --f-code:"JetBrains Mono", ui-monospace, monospace; --f-ui:"Geist", system-ui, sans-serif;
  --ok:#1F8A5B; --bad:#C2413A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){color-scheme:dark;
    --bg:#071222; --surface:#0B1A30; --surface2:#0E2140; --ink:#E4ECF8; --slate:#93A6C6; --line:#18305A;
    --brand:#5BB2FF; --brand-text:#5BB2FF; --brand-ink:#04101F; --sky:#8CCBFF; --code-bg:#050E1C; --code-ink:#C6D5F0; --code-key:#ACCFFF; --code-attr:#F2C879; --code-dim:#5F739A;
    --stage-a:#0F2E57; --stage-b:#0B1F3B; --foot:#040B16; --foot-ink:#B9C8E0; --foot-dim:#7385A3; --foot-line:#132744;
    --hi:#E4ECF8; --hi-ink:#071222; --hi-dim:#4B5D7A; --ok:#4CC08A; --bad:#EF7A72;}
}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#071222; --surface:#0B1A30; --surface2:#0E2140; --ink:#E4ECF8; --slate:#93A6C6; --line:#18305A;
  --brand:#5BB2FF; --brand-text:#5BB2FF; --brand-ink:#04101F; --sky:#8CCBFF; --code-bg:#050E1C; --code-ink:#C6D5F0; --code-key:#ACCFFF; --code-attr:#F2C879; --code-dim:#5F739A;
  --stage-a:#0F2E57; --stage-b:#0B1F3B; --foot:#040B16; --foot-ink:#B9C8E0; --foot-dim:#7385A3; --foot-line:#132744;
  --hi:#E4ECF8; --hi-ink:#071222; --hi-dim:#4B5D7A; --ok:#4CC08A; --bad:#EF7A72;}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:16px/1.65 var(--f);padding-block:0}
.in{max-width:1180px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:30;background:var(--bg)}
.nav .in{display:flex;align-items:center;gap:28px;padding-block:16px;font-size:14.5px;font-weight:500}
.nav .sp{flex:1}
.logo{height:28px;width:auto;display:block}
.tbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.tbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.cta-s{background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;font-weight:600}
.nav .ni,.nav .gi,.nav .gs{display:inline-flex;align-items:center;gap:7px}
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav .gi .ic{width:20px;height:20px;fill:currentColor;stroke:none}
.nav .ghg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13.5px;font-weight:600}
.nav .gi,.nav .gs{padding:7px 12px}
.nav .gs{border-left:1px solid var(--line)}
.nav .gs .cnt{font-variant-numeric:tabular-nums}
.nav .gi:hover,.nav .gs:hover{background:var(--surface)}
.nav .gs:hover .ic{fill:currentColor}

/* hero */
.hero{padding-block:64px 0;display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(40px,6.6vw,86px);line-height:1;letter-spacing:-.045em;font-weight:700;max-width:13ch}
.hero .sub{font-size:clamp(17px,1.6vw,20px);color:var(--slate);max-width:58ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.b1{background:var(--brand);color:var(--brand-ink);padding:14px 24px;border-radius:12px;font-weight:600}
.b2{background:var(--surface);color:var(--ink);padding:14px 24px;border-radius:12px;font-weight:500}
.note{font-size:14px;color:var(--slate)}
.stage{margin-top:40px;padding:28px;border-radius:24px;background:radial-gradient(120% 90% at 85% 0%,var(--stage-a) 0%,var(--stage-b) 45%,var(--surface) 100%)}
.stage .fit{border-radius:12px;box-shadow:0 30px 70px -30px rgba(11,27,58,.45)}

/* trusted by: slow marquee, pauses on hover, wraps when motion is reduced */
.trust{padding-block:56px 0}
.trust-title{display:flex;align-items:center;gap:20px;margin:0 0 22px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.trust-title::after{content:"";flex:1;min-width:40px;height:1px;background:var(--line)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .track{display:flex;width:max-content;animation:marquee 70s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .set{display:flex;gap:14px;padding-right:14px}
.marquee img{height:58px;width:auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 12px;filter:grayscale(1);opacity:.85;transition:filter .2s,opacity .2s}
.marquee img:hover{filter:none;opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee .track{width:auto}
  .marquee .set{flex-wrap:wrap;padding-right:0}
  .marquee .dup{display:none}
}

/* sections */
.sec{padding-block:96px 0}
.sec h2{font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:700;max-width:20ch}
.lead{color:var(--slate);font-size:18px;max-width:62ch;margin-top:14px}

/* declare: one framed stack, explanation left and code right; BasedOnRow lines are highlighted */
.decl{margin-top:40px;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.drow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.drow+.drow{border-top:1px solid var(--line)}
.dtext{padding:32px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.dtext .file{font:500 13px var(--f-code);color:var(--brand)}
.dtext h3{font-size:22px;font-weight:600;letter-spacing:-.015em}
.dtext p{color:var(--slate);font-size:15px;max-width:40ch}
.dtext .based{font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.dtext .based::before{content:"";width:18px;height:2px;border-radius:1px;background:var(--code-attr)}
.dtext .based b{font:500 13.5px var(--f-code)}
.dtext .gets{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.dtext .gets span{font-size:12.5px;font-weight:500;background:var(--surface2);color:var(--brand);border-radius:999px;padding:3px 10px}
pre.code{margin:0;background:var(--code-bg);color:var(--code-ink);font:13.5px/1.75 var(--f-code);padding:30px 32px;overflow-x:auto;white-space:pre;tab-size:4}
.code .k{color:var(--code-key)}.code .a{color:var(--code-attr)}.code .c{color:var(--code-dim)}
.code .hl{display:inline-block;margin:0 -32px;padding:0 32px 0 29px;border-left:3px solid var(--code-attr);background:rgba(255,213,138,.10);min-width:calc(100% + 64px)}

/* tour */
.tourtabs{display:flex;gap:6px;flex-wrap:wrap;margin:32px 0 18px}
.tourtabs button{font:500 14px var(--f);border:0;background:var(--surface);color:var(--ink);padding:9px 16px;border-radius:10px;cursor:pointer}
.tourtabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.tourwin{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(11,27,58,.5)}
.tourcap{margin-top:14px;font-size:14.5px;color:var(--slate);max-width:70ch}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:40px}
.facts div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:6px}
.facts small{font-size:12.5px;color:var(--brand);font-weight:600;font-variant-numeric:tabular-nums}
.facts b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.facts span{color:var(--slate);font-size:14.5px}

/* quotes */
.quotes{columns:3;column-gap:18px;margin-top:40px}
.quotes blockquote{break-inside:avoid;margin:0 0 18px;background:var(--surface);border-radius:18px;padding:22px;font-size:15px;display:flex;flex-direction:column;gap:14px}
.quotes cite{font-style:normal;font-weight:600;font-size:14px}
.quotes cite span{display:block;font-weight:400;color:var(--slate)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.tier{border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.tier.hi{background:var(--hi);color:var(--hi-ink);border-color:var(--hi)}
.tier .nm{font-size:18px;font-weight:600}
.tier .pr{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.tier .pr small{font-size:14px;font-weight:400;letter-spacing:0;color:var(--slate)}
.tier.hi .pr small,.tier.hi .meta{color:var(--hi-dim)}
.tier .meta{font-size:14px;color:var(--slate)}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.tier li{display:flex;gap:10px}
.tier{--chk-bg:var(--surface2);--chk:var(--brand)}
.tier.hi{--chk-bg:#1B6FE6;--chk:#FFFFFF}
.tier li .ck{flex:none;width:18px;height:18px;margin-top:3px}
.tier li .ck circle{fill:var(--chk-bg)}
.tier li .ck path{fill:none;stroke:var(--chk);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tier .go{margin-top:auto;text-align:center;border-radius:12px;padding:13px;font-weight:600;background:var(--surface)}
.tier.hi .go{background:var(--brand);color:var(--brand-ink)}
.pnote{margin-top:18px;font-size:14px;color:var(--slate)}
.pnote b{color:var(--ink);font-weight:500}

/* footer */
footer{margin-top:110px;background:var(--foot);color:var(--foot-ink);padding-block:56px 32px}
.fcols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:24px;font-size:14px}
.fcols b{color:#fff;display:block;margin-bottom:8px;font-weight:600}
.fcols a{display:block;padding:3px 0}
.fcols a:hover,.pnote a:hover{text-decoration:underline}
.fbase{margin-top:40px;padding-top:20px;border-top:1px solid var(--foot-line);font-size:13px;color:var(--foot-dim)}

/* scroll reveal: visible at rest; animates only where scroll timelines exist */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes rise{from{opacity:.25;transform:translateY(28px)}to{opacity:1;transform:none}}
  }
}

/* ---------- scaled mock ---------- */
.fit{position:relative;overflow:hidden;width:100%}
.fit>.fit-in{position:absolute;top:0;left:0;transform-origin:0 0}
@font-face{font-family:"LA";font-style:normal;font-weight:900;font-display:block;src:url("../../Serenity.Assets/line-awesome/fonts/la-solid-900.woff2") format("woff2")}
.la{font-family:"LA";font-weight:900;font-style:normal;line-height:1;display:inline-block;flex:none;-webkit-font-smoothing:antialiased;text-align:center}
.m-app .la{font-size:18px}
.m-band .ic .la{font-size:31px}
.m-search .la{font-size:17px;color:#1D2433;transform:scaleX(-1)}
.m-item .la{font-size:20px;width:22px}
.m-item .r .la{font-size:16px;width:auto;opacity:.8}
.m-item .sv{width:20px;height:20px}
.m-h .la{font-size:27px}
.m-btn .la{font-size:20px}
.m-inp .la{font-size:15px}
.m-date .la{font-size:21px}
.m-grid td .ico .la{font-size:18px}
.m-grid th .la{font-size:15px;color:#9AA6B6}
.m-pager .la{font-size:19px;color:#5B5FD6}
.m-pager .rf .la{color:inherit}
.m-stat .t .la{font-size:58px}
.m-row .la{font-size:20px}
/* ---------- StartSharp Azure Light mock, drawn at the demo's 1440x900 viewport ---------- */
.m-app{--m-bg:#F6FAFD;--m-panel:#FFFFFF;--m-band:#005FB1;--m-text:#1D2433;--m-mut:#5E6B7E;--m-link:#0F41C9;--m-title:#0F6CBD;--m-cat:#39A7B9;--m-line:#E1E8F0;--m-th:#EEF2F7;--m-alt:#F5F8FC;--m-act:#007EFF;--m-green:#22A35A;--m-red:#D33A3A;
  display:grid;grid-template-columns:56px 268px minmax(0,1fr);height:900px;background:var(--m-bg);color:var(--m-text);font:14.5px/1.45 "Poppins",system-ui,sans-serif;text-align:left;overflow:hidden}
.m-app svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.m-band{background:var(--m-band);color:#fff;display:flex;flex-direction:column;align-items:center;padding:10px 0 12px}
.m-band .ic{width:56px;height:59px;display:grid;place-items:center}
.m-band .ic svg{width:27px;height:27px;stroke-width:1.7}
.m-band .mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding-bottom:26px}
.m-vw{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:600;font-size:27px;line-height:1;letter-spacing:.005em}
.m-vw span{color:#5FC0FF}
.m-band img{width:38px;height:38px}
.m-side{background:var(--m-panel);border-right:1px solid var(--m-line);padding:14px 10px 0 14px;display:flex;flex-direction:column;overflow:hidden}
.m-search{height:34px;border:1px solid #D9E1EA;border-radius:6px;padding:0 10px;color:#7A8698;display:flex;gap:8px;align-items:center;background:#fff;flex:none}
.m-search svg{width:17px;height:17px;color:#1D2433}
.m-stitle{color:var(--m-title);font-size:20px;margin:20px 0 10px}
.m-cat{color:var(--m-cat);font-size:13.5px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;margin:16px 0 4px}
.m-item{display:flex;gap:10px;align-items:center;height:31.5px;font-size:15.5px;white-space:nowrap}
.m-item svg{width:19px;height:19px}
.m-item.sub{padding-left:16px;font-size:14.5px;gap:12px}
.m-item.on{color:var(--m-act)}
.m-item .r{margin-left:auto;display:flex;align-items:center;gap:3px}
.m-item .r svg{width:15px;height:15px;opacity:.75}
.m-new{font-size:10px;color:var(--m-green);background:#E5F6EC;padding:1px 4px;border-radius:3px;font-weight:500}
.m-main{padding:18px 22px 14px;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.m-h{color:var(--m-title);font-size:25px;font-weight:500;display:flex;gap:10px;align-items:center;line-height:1.2}
.m-h svg{width:25px;height:25px}
.m-h .x{margin-left:auto;color:var(--m-title)}
.m-tb{display:flex;gap:10px;align-items:center}
.m-tb .m-search{width:175px}
.m-grp{display:flex;border:1px solid #D9E1EA;border-radius:6px;overflow:hidden;background:#fff;height:34px}
.m-btn{padding:0 11px;display:flex;gap:7px;align-items:center;border-right:1px solid #D9E1EA;white-space:nowrap;font-size:14.5px}
.m-btn:last-child{border-right:0}
.m-btn svg{width:19px;height:19px}
.m-btn .g{color:var(--m-green);display:flex}.m-btn .rd{color:var(--m-red);display:flex}.m-btn .b{color:var(--m-act);display:flex}.m-btn .p{color:#7A4FD0;display:flex}
.m-filters{display:flex;flex-wrap:wrap;gap:8px 14px}
.m-f{display:flex;flex-direction:column;gap:4px;font-size:13px}
.m-inp{height:34px;border:1px solid #D9E1EA;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:flex-end;padding:0 9px;gap:6px;font-size:14px;color:var(--m-text)}
.m-inp.v{justify-content:space-between}
.m-inp svg{width:16px;height:16px}
.m-inp .xr{color:var(--m-red)}
.m-date{display:flex;align-items:center;gap:7px}
.m-date svg{width:19px;height:19px}
.m-grid{border:1px solid var(--m-line);background:#fff;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.m-grid table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:14.5px;table-layout:fixed}
.m-grid th{background:var(--m-th);text-align:left;font-weight:500;height:36px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;color:#2A3546}
.m-grid th::after{content:"⋮";position:absolute;right:3px;top:8px;color:#A9B4C2;font-size:13px}
.m-grid td{border-top:1px solid var(--m-line);height:34px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-grid tbody tr:nth-child(even) td{background:var(--m-alt)}
.m-grid td.l{color:var(--m-link)}
.m-grid td.n{text-align:right}
.m-grid td.c{text-align:center}
.m-grid td .ico{display:inline-flex;vertical-align:-3px;margin-right:7px}
.m-grid td .ico svg{width:17px;height:17px}
.m-grid .fem{color:#E26B7A}.m-grid .mal{color:#4C8FE0}.m-grid .shp{color:#39A7B9}.m-grid .pdf{color:var(--m-red)}.m-grid .del{color:var(--m-red)}
.m-pager{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--m-text);height:40px;flex:none}
.m-pager svg{width:18px;height:18px;color:#5B5FD6}
.m-pager .pg{border:1px solid #D9E1EA;border-radius:6px;width:56px;height:32px;display:grid;place-items:center;background:#fff}
.m-pager .rf{color:var(--m-green)}
.m-pager .sp{flex:1}
.m-pager .ps{border:1px solid #D9E1EA;border-radius:6px;height:32px;padding:0 10px;display:flex;align-items:center;gap:22px;background:#fff}
.m-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.m-stat{border:1px solid var(--m-line);border-radius:4px;overflow:hidden;background:#fff}
.m-stat .t{height:116px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.m-stat .t.bl{background:#DCE8FB}.m-stat .t.gr{background:#DDEDE5}
.m-stat b{display:block;font-size:40px;font-weight:600;line-height:1.1}
.m-stat .t span{font-size:16px}
.m-stat .t svg{width:52px;height:52px;stroke-width:1.5}
.m-stat .mi{text-align:center;padding:7px;font-size:15px;color:#3A4658}
.m-two{display:grid;grid-template-columns:1.62fr 1fr;gap:22px;flex:1;min-height:0}
.m-card{border:1px solid var(--m-line);border-radius:4px;background:#fff;padding:16px 20px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden}
.m-card h5{margin:0;font-size:21px;font-weight:500;display:flex;justify-content:space-between;align-items:center;color:var(--m-text);border-bottom:1px solid var(--m-line);padding-bottom:10px}
.m-tabs2{display:flex;font-size:15px}
.m-tabs2 span{padding:5px 14px;color:#6B7FA6}
.m-tabs2 .on{color:var(--m-act);border:1px solid var(--m-line);border-bottom-color:#fff;border-radius:4px 4px 0 0;margin-bottom:-11px;background:#fff}
.m-legend{display:flex;justify-content:center;gap:18px;font-size:12.5px;color:#4A5568}
.m-legend i{display:inline-block;width:30px;height:11px;margin-right:6px;vertical-align:-1px;border:1px solid}
.m-task{display:flex;align-items:center;gap:10px;height:36px;border-bottom:1px solid #F0F3F7;font-size:14.5px}
.m-task .cb{width:16px;height:16px;border:1.5px solid #9AA6B6;border-radius:3px;flex:none}
.m-task .cb.on{background:var(--m-act);border-color:var(--m-act)}
.m-task.done span:first-of-type{color:#8A96A8;text-decoration:line-through}
.m-task .tm{margin-left:auto;font-size:12px;background:#E7F0FF;color:#2E62C9;border-radius:3px;padding:1px 7px}
.m-task .tm.w{background:#FFF1DB;color:#A15C00}
.m-task .tm.d{background:#FDE5E5;color:#B42F2F}
.m-dlg-tabs{display:flex;gap:22px;border-bottom:1px solid var(--m-line);font-size:15.5px;margin-top:2px}
.m-dlg-tabs span{padding:4px 2px 9px;color:#6B7FA6}
.m-dlg-tabs .on{color:var(--m-act);border-bottom:2px solid var(--m-act)}
.m-sech{color:var(--m-cat);font-size:15.5px;display:flex;align-items:center;gap:10px;margin-top:4px}
.m-sech::before{content:"";width:14px;border-top:1px dashed #C9D3DF}
.m-sech::after{content:"";flex:1;border-top:1px dashed #C9D3DF}
.m-row{display:grid;grid-template-columns:172px 1fr;gap:14px;align-items:center}
.m-row label{text-align:right;font-size:15px}
.m-row label i{color:var(--m-red);font-style:normal;margin-right:2px;vertical-align:4px;font-size:12px}
.m-row .m-inp{height:36px;font-size:15px}
.m-row .m-inp.focus{border-color:#9CC3F5;box-shadow:0 0 0 3px #E2EEFD}
.m-detail{margin-left:186px;border:1px solid var(--m-line);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:hidden}
@media (max-width:900px){
  .drow,.facts,.tiers{grid-template-columns:1fr}
  .dtext{padding:24px 20px}
  pre.code{padding:22px 20px;font-size:12.5px}
  .code .hl{margin:0 -20px;padding:0 20px 0 17px;min-width:calc(100% + 40px)}
  .quotes{columns:1}
  .fcols{grid-template-columns:1fr 1fr}
  .nav .hide{display:none}
  .stage{padding:14px;border-radius:16px}
}
@media (min-width:901px) and (max-width:1100px){.facts{grid-template-columns:1fr 1fr}.quotes{columns:2}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.page{padding-block:48px 0}
.page .in{max-width:860px}
.prose{font-size:16.5px;line-height:1.75;overflow-wrap:break-word}
.prose h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:700;margin:0 0 20px;max-width:none}
.prose h2{font-size:clamp(24px,2.8vw,32px);line-height:1.2;letter-spacing:-.025em;font-weight:700;margin:56px 0 14px}
.prose h3{font-size:21px;line-height:1.3;letter-spacing:-.015em;font-weight:600;margin:40px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.prose h4,.prose h5,.prose h6{font-size:17px;font-weight:600;margin:28px 0 8px;color:var(--brand)}
.prose p,.prose ul,.prose ol,.prose table,.prose pre,.prose blockquote{margin:0 0 18px}
.prose ul,.prose ol{padding-left:1.5em}
.prose li{margin:4px 0}
.prose a{color:var(--brand-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose img,.prose video,.prose iframe{max-width:100%;border-radius:12px}
.prose img,.prose video{height:auto}
.prose blockquote{border-left:3px solid var(--brand);background:var(--surface);padding:12px 18px;border-radius:0 12px 12px 0;color:var(--slate)}
.prose blockquote>:last-child{margin-bottom:0}
.prose code{font:.9em var(--f-code);background:var(--surface2);border-radius:6px;padding:.1em .4em}
.prose pre{background:var(--code-bg);color:var(--code-ink);border-radius:14px;padding:20px 24px;overflow-x:auto;font:14px/1.7 var(--f-code)}
.prose pre code{background:none;border-radius:0;padding:0;font:inherit;color:inherit}
.prose pre code.hljs{background:none;padding:0}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;font-size:15px}
.prose td,.prose th{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--surface);font-weight:600}

.author-date{font-size:14.5px;color:var(--slate);margin-bottom:10px}
.blog-header{margin:8px 0 32px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.blog-header h1{font-size:clamp(34px,5.4vw,60px);margin-bottom:0}
.blog-header .description{margin:20px 0 0;font-size:clamp(18px,1.8vw,22px);color:var(--slate)}
.blog-content{min-height:400px}
.blog-content h2:first-child{margin-top:0}
.blog-search{margin:24px 0 8px}
.blog-search .gsc-control-cse,.blog-search .gsc-control-cse .gsc-table-result{background:transparent;border:0;padding:0}
.prose .blog-post{margin:0;padding:32px 0;border-bottom:1px solid var(--line)}
.prose .blog-post>a{display:block;text-decoration:none;color:var(--ink)}
.prose .blog-post h2{margin:0;font-size:clamp(24px,2.6vw,30px)}
.prose .blog-post .description{margin:12px 0 0;color:var(--slate)}
.prose .blog-post .more{margin:14px 0 0;color:var(--brand-text);font-weight:500}
.prose .blog-post>a:hover h2{color:var(--brand)}
.prose .blog-search table{display:table;width:100%;margin:0;overflow:visible;border-collapse:separate}
.prose .blog-search td,.prose .blog-search th{border:0;padding:0;background:none;vertical-align:middle}

/* reserve the space the scripts fill, so the page does not jump when it loads */
.stage:empty{aspect-ratio:1140/734}
.tourwin:empty{aspect-ratio:1140/713}
@media (min-width:901px){
  .tiers:empty{min-height:484px}
  .quotes:empty{min-height:499px}
}