/* Pageory supporting pages: local assets, no framework or third-party requests. */
:root{--paper:#FBFAF8;--paper-2:#F3F1EC;--ink:#14171A;--muted:#586168;--line:#D8D4CC;--accent:#0A5C3A;--accent-soft:#EDF3F0;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--serif:ui-serif,Charter,Georgia,serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--pad:clamp(20px,5vw,56px);--maxw:1200px}
*{box-sizing:border-box}html{scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}a:hover{color:var(--accent)}button,input,select{font:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}h1{font:500 clamp(40px,5.5vw,72px)/1.06 var(--serif);letter-spacing:-.045em}h2{font-size:clamp(27px,3vw,38px);line-height:1.14;letter-spacing:-.035em}h3{font-size:20px;line-height:1.3;letter-spacing:-.02em}p+ p{margin-top:18px}p,li{overflow-wrap:break-word}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}::selection{background:#C8E3D4;color:var(--ink)}.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:white;padding:12px 20px}.skip:focus{left:0}.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.04em;flex-shrink:0}.brand svg{flex:none}.desktop-nav{display:flex;gap:26px;font-size:14px}.desktop-nav a{text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 22px;border-radius:7px;background:var(--accent);color:white;text-decoration:none;font-size:15px;font-weight:650}.button:hover{background:#084A2E;color:#fff}.button.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}.header-cta{font-size:14px;padding:10px 16px;min-height:44px}.mobile-nav{display:none}.breadcrumb{padding-top:30px;display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted)}.breadcrumb a{text-decoration:none}.hero{padding-block:clamp(40px,6vw,76px) clamp(56px,7vw,92px)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(240px,.8fr);gap:clamp(32px,6vw,80px);align-items:start}.eyebrow{font:500 11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}.lede{font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:#3D444A;max-width:58ch;margin-top:24px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:28px}.actions>a:not(.button){font-size:15px}.hero-note{color:var(--muted);font-size:13px;max-width:58ch;margin-top:18px}.brief{border-top:3px solid var(--accent);padding-top:20px;margin-top:8px}.brief .label{font:11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.brief h2{font-size:25px;margin-top:14px}.brief p{font-size:15px;color:var(--muted);margin-top:12px}.brief ul{list-style:none;margin:18px 0 0;padding:0}.brief li{border-top:1px solid var(--line);padding:13px 0;font-size:14px}.brief strong{display:block;font-size:17px;color:var(--ink)}.content{border-top:1px solid var(--line);padding-block:clamp(50px,7vw,90px)}.editorial{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(40px,7vw,88px)}.toc{position:sticky;top:112px;align-self:start}.toc h2{font:11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}.toc a{display:block;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;font-size:14px;line-height:1.5}.body-copy{min-width:0}.body-copy section+section{margin-top:56px;padding-top:42px;border-top:1px solid var(--line)}.body-copy h2{margin-bottom:20px;max-width:27ch}.body-copy p,.body-copy li{color:#3D444A}.body-copy strong{color:var(--ink)}.body-copy ul,.body-copy ol{padding-left:22px;margin:20px 0}.body-copy li+li{margin-top:10px}.body-copy h3{margin:28px 0 10px}.note{padding:22px 24px;border-left:3px solid var(--accent);background:var(--accent-soft);margin:26px 0}.note p{font-size:15px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin:28px 0}.feature-grid h3{margin:0 0 10px}.feature-grid p{font-size:15px}.numbered{counter-reset:step;list-style:none!important;padding:0!important}.numbered li{counter-increment:step;padding:18px 0 18px 42px;position:relative;border-bottom:1px solid var(--line)}.numbered li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:21px;color:var(--accent);font:12px var(--mono)}.table-scroll{overflow-x:auto;max-width:100%;margin:24px 0;border:1px solid var(--line);border-radius:8px}.table-scroll:focus-visible{outline-offset:2px}table{width:100%;border-collapse:collapse;font-size:15px;text-align:left;min-width:520px}caption{text-align:left;padding:16px 20px;font-weight:650;background:var(--paper-2)}th,td{padding:16px 20px;border-top:1px solid var(--line);vertical-align:top}thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}th[scope=row]{font-weight:600;min-width:145px}.cost{white-space:nowrap;color:var(--accent);font-weight:650}.faq{margin-top:24px}.faq details{border-top:1px solid var(--line);padding:0}.faq summary{cursor:pointer;font-weight:600;padding:20px 28px 20px 0;position:relative;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:0;color:var(--accent);font-size:22px;font-weight:400;top:15px}.faq details[open] summary:after{content:"−"}.faq details p{padding-bottom:22px;font-size:16px}.related{background:var(--paper-2);border-top:1px solid var(--line);padding-block:48px}.related h2{font-size:25px}.related-links{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:24px}.related-links a{font-size:15px}.closing{background:#0C0D0F;color:#F5F1EA;padding-block:clamp(54px,7vw,90px)}.closing .eyebrow{color:#71D5A2}.closing h2{max-width:24ch;font-size:clamp(32px,4vw,50px)}.closing p{max-width:60ch;color:#B8BBB7;margin-top:20px}.closing .button{background:#71D5A2;color:#0C0D0F}.closing .button:hover{background:#97E4BC}.closing a:not(.button){color:#D5DED7}.closing :focus-visible,.site-footer :focus-visible{outline-color:#71D5A2}.site-footer{padding-block:44px 26px;background:#0C0D0F;color:#B8BBB7;border-top:1px solid #343A39}.footer-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px}.site-footer .brand{color:#F5F1EA}.site-footer p{font-size:14px;margin-top:18px;max-width:32ch}.site-footer h2{font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#ADB5AE;margin-bottom:18px}.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin:9px 0}.site-footer li a{font-size:14px;text-decoration:none}.site-footer a:hover{color:#71D5A2}.footer-base{border-top:1px solid #343A39;margin-top:36px;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:12px}.example-list{display:grid;gap:72px;padding-bottom:72px}.example{border-top:1px solid var(--line);padding-top:36px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:start}.example h2{font:500 35px/1.1 var(--serif);margin-bottom:10px;letter-spacing:-.03em}.example .eyebrow{margin-bottom:12px}.example>div:last-child>p:not(.eyebrow){font-size:16px;color:#3D444A}.example dl{font-size:14px;margin:20px 0}.example dl div{padding:12px 0;border-top:1px solid var(--line)}.example dt{font-weight:650;margin-bottom:4px}.example dd{margin:0;color:var(--muted)}.example-window{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white}.window-bar{padding:10px 16px;font:10px/1.4 var(--mono);color:var(--muted);background:var(--paper-2);display:flex;justify-content:space-between;gap:10px}.example-preview{aspect-ratio:16/10;position:relative;container-type:inline-size;overflow:hidden}.example-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:24px}.example-links a{font-size:14px}
@media(max-width:950px){.desktop-nav{display:none}.mobile-nav{display:block;margin-left:auto;position:relative}.mobile-nav summary{cursor:pointer;font-size:14px;padding:12px;border:1px solid var(--line);border-radius:6px;list-style:none}.mobile-nav nav{position:absolute;right:0;top:100%;min-width:240px;background:var(--paper);border:1px solid var(--line);padding:12px 20px;box-shadow:0 12px 26px #14171A18}.mobile-nav nav a{display:block;padding:12px 0;font-size:15px;text-decoration:none}.bar{gap:12px}.hero-grid{grid-template-columns:minmax(0,1.5fr) minmax(200px,1fr);gap:32px}.editorial{grid-template-columns:170px minmax(0,1fr);gap:35px}.example{grid-template-columns:1fr;gap:25px}.example-window{max-width:760px}}
@media(max-width:700px){.hero-grid,.editorial,.footer-top{grid-template-columns:1fr}.hero{padding-top:35px}.hero-grid{gap:32px}.brief{margin-top:0}.brief ul{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.toc{position:static;border-bottom:1px solid var(--line);padding-bottom:18px}.toc a{display:inline-block;margin:0 16px 10px 0;border:0;padding:0}.editorial{gap:28px}.feature-grid{grid-template-columns:1fr}.header-cta{font-size:12px;padding:10px 11px}.brand{font-size:18px;gap:7px}.brand svg{width:24px;height:24px}.bar{min-height:67px}.breadcrumb{font-size:12px}.footer-top{gap:32px}.example-list{gap:48px}.body-copy section+section{margin-top:40px;padding-top:32px}.closing .actions{align-items:flex-start;flex-direction:column}}
@media(max-width:380px){.header-cta{display:none}.actions .button{width:100%}.brief ul{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* The real homepage concept components, reused as static visual studies. */
.site{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--s-bg);color:var(--s-fg);font-family:var(--s-font,var(--sans))}
.s-nav{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:3.2cqw 4.2cqw}
.s-logo{font-weight:700;font-size:2.5cqw;letter-spacing:-.02em;white-space:nowrap}
.s-links{display:flex;gap:2.6cqw;font-size:1.9cqw;opacity:.7;list-style:none;margin:0;padding:0}
.s-btn{background:var(--s-ac);color:var(--s-on);border-radius:.8cqw;padding:1.1cqw 2.2cqw;font-size:1.8cqw;font-weight:600;white-space:nowrap}
.s-btn--out{background:transparent;color:inherit;box-shadow:inset 0 0 0 .15cqw currentColor;opacity:.85}
.s-hero{padding:2cqw 4.2cqw 3.4cqw;display:flex;flex-direction:column;gap:1.8cqw}
.s-kicker{font-size:1.6cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--s-ac);font-weight:600}
.s-h1{font-family:var(--s-display,inherit);font-size:7.4cqw;line-height:1;letter-spacing:-.03em;font-weight:var(--s-weight,700);margin:0;text-wrap:balance}
.s-p{font-size:2.1cqw;line-height:1.5;opacity:.72;max-width:38cqw;margin:0}
.s-row{display:flex;gap:1.6cqw;align-items:center;flex-wrap:wrap}
.s-grid{display:grid;gap:1.8cqw;padding:0 4.2cqw 4.2cqw}
.s-card{border-radius:1.2cqw;overflow:hidden;background:var(--s-card,rgba(0,0,0,.04));display:flex;flex-direction:column}
.s-art{background:var(--art);aspect-ratio:4/3;position:relative}
.s-cap{padding:1.6cqw;display:flex;flex-direction:column;gap:.5cqw}
.s-cap b{font-size:2cqw;font-weight:600}
.s-cap span{font-size:1.7cqw;opacity:.62}
.s-bar{display:flex;justify-content:space-between;gap:2cqw;padding:2.4cqw 4.2cqw;font-size:1.7cqw;opacity:.6;border-top:.12cqw solid currentColor;margin-top:auto}
/* Keep keyboard access and mobile navigation within the viewport. */
.skip{left:0;top:-100px}.skip:focus{top:0}
.mobile-nav:not([open]) nav{display:none}
.brand{min-height:44px}
.table-hint{font-size:13px;color:var(--muted)}#addons table{min-width:0}
@media(max-width:950px){.mobile-nav nav{position:fixed;left:var(--pad);right:var(--pad);top:74px;min-width:0}}
@media(max-width:700px){.mobile-nav nav{top:67px}}
@media(max-width:768px){.breadcrumb a,.toc a,.actions>a:not(.button),.related-links a,.example-links a,.example>div:last-child>a,.site-footer a:not(.brand),.body-copy p a{display:inline-block;min-height:36px;padding-block:6px}.site-footer li{margin:3px 0}.toc a{margin-bottom:4px}}
/* Blog: hub cards, post dateline, and customer quotes. */
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:24px;font:11px/1.6 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.post-meta span+span{position:relative;padding-left:19px}
.post-meta span+span:before{content:"";position:absolute;left:0;top:.75em;width:9px;height:1px;background:var(--line)}
.post-groups{padding-bottom:clamp(56px,7vw,92px)}
.post-group{border-top:1px solid var(--line);padding-top:34px}
.post-group+.post-group{margin-top:clamp(44px,5vw,70px)}
.group-note{color:var(--muted);font-size:15px;margin-top:12px;max-width:62ch}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:28px 34px;margin-top:32px}
.post-card{border-top:1px solid var(--line);padding-top:18px;min-width:0}
.post-card h3 a{text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0 1px;transition:background-size .25s}
.post-card h3 a:hover{background-size:100% 1px}
.post-card p{font-size:15px;color:#3D444A;margin-top:10px}
.post-card-meta{font:11px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:30px 36px;margin-top:32px}
.quote{border-top:3px solid var(--accent);padding-top:18px;margin:0;min-width:0}
.quote blockquote{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}
.quote figcaption{margin-top:15px;font-size:14px;color:var(--muted)}
.quote cite{display:block;font-style:normal;font-weight:650;color:var(--ink)}
.stars{display:block;color:var(--accent);letter-spacing:.16em;font-size:13px;margin-bottom:7px}
/* Website Examples: a colour-and-type card per demo, linking to the live site.
   Deliberately not a fake screenshot — the real site is one click away. */
.register{border-top:1px solid var(--line);padding-top:34px}
.register+.register{margin-top:clamp(50px,7vw,86px)}
.register-note{color:var(--muted);font-size:15px;margin-top:12px;max-width:64ch}
.demo-list{display:grid;gap:clamp(38px,5vw,54px);margin-top:36px}
.demo{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,52px);align-items:start}
.demo-face{display:flex;flex-direction:column;justify-content:space-between;gap:26px;aspect-ratio:4/3;padding:24px;border-radius:10px;text-decoration:none;border:1px solid var(--line);background-color:var(--a);background-image:linear-gradient(152deg,var(--a),var(--b));color:var(--fg);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.demo-face:hover{transform:translateY(-3px);box-shadow:0 22px 42px -28px rgba(20,23,26,.65);color:var(--fg)}
.demo-face__mark{font-size:clamp(19px,2.2vw,27px);line-height:1.12}
.demo-face__go{font:11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--go)}
.demo h3{font:500 clamp(27px,3vw,34px)/1.1 var(--serif);letter-spacing:-.03em;margin-top:4px}
.demo>div>p:not(.eyebrow):not(.demo-links){font-size:16px;color:#3D444A;margin-top:12px}
.demo dl{font-size:14px;margin:20px 0 0}
.demo dl div{padding:12px 0;border-top:1px solid var(--line)}
.demo dt{font-weight:650;margin-bottom:4px}
.demo dd{margin:0;color:var(--muted)}
.demo-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:20px;font-size:14px}
@media(max-width:760px){.demo{grid-template-columns:1fr}.demo-face{aspect-ratio:16/9}}