/* Hub (ucpsandbox.com apex), to the Hub board. Shares the store tokens; paper is #f4f2ec here. */
.hub-header{height:72px;padding:0 var(--gutter);display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}
.hub-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.hub-brand .mark{width:28px;height:28px;border-radius:6px;background:#f2c14e;color:#1d1c19;display:flex;align-items:center;justify-content:center}
.hub-brand .name{font-size:18px;font-weight:600}.hub-brand .by{font-size:14px;color:var(--ink-2)}
.hub-header nav{margin-left:40px;display:flex;gap:28px;font-size:15px;font-weight:500}.hub-header nav a{text-decoration:none;color:var(--ink)}
.hub-cta{margin-left:auto;display:flex;gap:10px;align-items:center}.hub-cta .signin{height:42px;padding:0 16px;display:inline-flex;align-items:center;font-size:15px;font-weight:600;text-decoration:none;color:var(--ink)}
.btn.dark{background:#1d1c19;color:#fff;border-radius:8px;height:42px;padding:0 18px;font-size:15px}.btn.dark:hover{background:#000;color:#fff}
.btn.dark.big{height:54px;padding:0 26px;font-size:16px}.btn.outline.big{height:54px;padding:0 22px;font-size:16px;border-radius:8px}
.hub-hero{padding:80px var(--gutter) 72px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:center}
.hub-hero .copy{grid-column:span 6;display:flex;flex-direction:column;gap:22px}
.hub-hero .kicker{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600}.hub-hero .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#f2c14e}
.hub-hero h1{font-size:68px;line-height:1.02;letter-spacing:-.025em}.hub-hero p{margin:0;font-size:19px;line-height:1.55;color:#4a463e;max-width:580px}
.hub-hero .ctas{display:flex;gap:12px;padding-top:6px;flex-wrap:wrap}.hub-hero .fine{font-size:14px;color:var(--ink-2)}
.sample{grid-column:8/span 5;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(29,28,25,.08)}
.sample .top{display:flex;justify-content:space-between;align-items:center}.sample .top .eyebrow{color:var(--ink-2)}
.sample .tag-sample{height:20px;padding:0 7px;display:inline-flex;align-items:center;border-radius:4px;background:var(--warn-bg);color:var(--warn);font-size:11px;font-weight:700}
.sample .title{font-size:20px;font-weight:600;line-height:1.3}
.sample .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sample .metric{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:10px;background:#faf8f3}.sample .metric .l{font-size:12px;color:var(--ink-2)}
.sample .metric .v{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}.sample .a{font-size:15px;color:#2a6fa0;font-weight:700}.sample .b{font-size:26px;font-weight:700}.sample .b i{font-style:normal;color:#c2571a}
.sample .metric .d{font-size:12px;font-weight:600}.sample .metric .d.up{color:var(--ok)}.sample .metric .d.down{color:var(--bad)}
.sample .trace{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:10px;background:#1d1c19;color:#e9e5dc;font-family:var(--mono);font-size:12px;line-height:1.55}.sample .trace .t{color:#b8b2a5}.sample .trace .flag{color:#f2a98a}
.sample .foot{font-size:13px;color:var(--ink-2)}
.how{margin:0 var(--gutter);padding:40px;border-radius:16px;background:#1d1c19;color:#e9e5dc;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.how div{display:flex;flex-direction:column;gap:10px}.how .n{width:36px;height:36px;border-radius:50%;background:#f2c14e;color:#1d1c19;display:flex;align-items:center;justify-content:center;font-weight:700}
.how b{font-size:22px;font-weight:600;color:#fff}.how span{font-size:15px;line-height:1.55;color:#cfc9bd}
.hub-section{padding:96px var(--gutter) 0;display:flex;flex-direction:column;gap:28px}
.hub-section .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}.hub-section h2{font-size:44px;letter-spacing:-.015em}.hub-section .head span{font-size:16px;color:var(--ink-2);max-width:560px}
.tests{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tests div,.tests a{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:12px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.tests a{justify-content:center;border:1px dashed var(--input);background:transparent}
.tests b{font-size:17px;font-weight:600}.tests span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.see{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.see a{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}.see b{font-size:19px;font-weight:600}.see span{font-size:15px;line-height:1.55;color:var(--ink-2)}
.who{padding:96px var(--gutter) 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.who div{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:12px;background:#fff;border:1px solid var(--line)}.who .eyebrow{color:var(--ink-2)}.who b{font-size:18px;font-weight:600;line-height:1.35}
.hub-stores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hub-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink)}
.hub-card img,.hub-card .ph{width:100%;height:220px;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500}
.hub-card .body{padding:24px;display:flex;flex-direction:column;gap:10px}.hub-card .tags{display:flex;gap:8px}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--sunken);color:var(--ink-2)}
.tag.live{background:var(--ok-bg);color:var(--ok)}.tag.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.tag.planned{background:var(--warn-bg);color:var(--warn)}
.hub-card .title{font-size:28px;font-weight:500}.hub-card .blurb{font-size:14px;line-height:1.5;color:var(--ink-2)}.hub-card code{font-size:13px}
.hub-scen{padding:72px var(--gutter) 96px;display:flex;flex-direction:column;gap:20px}.hub-scen .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}.hub-scen h2{font-family:var(--body);font-size:24px;font-weight:600}.hub-scen .head span{font-size:15px;color:var(--ink-2)}
table.scen{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:15px}
table.scen th{background:var(--sunken);text-align:left;font-size:13px;color:var(--ink-2);font-weight:600;padding:14px 20px}table.scen td{padding:14px 20px;border-top:1px solid var(--line)}
table.scen code.k{padding:3px 8px;border-radius:4px;background:#1d1c19;color:#f2c14e;font-size:13px}
footer.hub{margin-top:auto;padding:28px var(--gutter);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}footer.hub .links{display:flex;gap:20px}
@media (max-width:1100px){.hub-hero h1{font-size:52px}.tests{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-header nav{display:none}}
@media (max-width:820px){.hub-hero{grid-template-columns:1fr;padding:40px var(--gutter) 40px}.hub-hero .copy,.sample{grid-column:auto}.hub-hero h1{font-size:40px}.how,.see,.who,.hub-stores{grid-template-columns:1fr}.how{margin:0 var(--gutter);padding:24px;gap:24px}.hub-section{padding-top:56px}.hub-section .head{flex-direction:column;align-items:flex-start;gap:10px}.hub-section h2{font-size:32px}.who{padding-top:56px}.tests{grid-template-columns:1fr}.hub-brand .by,.hub-cta .signin{display:none}table.scen td:last-child,table.scen th:last-child{display:none}}

.legal{max-width:760px;margin:0 auto;padding:72px var(--gutter) 96px;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.65;color:var(--ink)}
.legal .kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}.legal h1{font-size:48px;letter-spacing:-.02em;line-height:1.05}.legal .lede{font-size:19px;color:var(--ink-2)}.legal .updated{font-size:14px;color:var(--ink-2)}
.legal h2{font-size:22px;margin-top:28px;font-family:var(--body);font-weight:600;letter-spacing:0}.legal ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}.legal a{font-weight:600}
.legal .note{padding:14px 16px;border-radius:8px;background:#fbf0dc;color:#3d2a00;font-size:15px}.legal .entity{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.legal table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}.legal th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
footer.hub a{color:inherit}
@media (max-width:820px){.legal{padding-top:40px}.legal h1{font-size:34px}.legal table,.legal tbody,.legal tr,.legal td{display:block}.legal thead{display:none}.legal td{border:0;padding:2px 0}.legal tr{padding:10px 0;border-bottom:1px solid var(--line)}}
main > .hub-section:last-child{padding-bottom:96px}
@media (max-width:820px){main > .hub-section:last-child{padding-bottom:56px}}

/* Contact page (design: Contact) */
.contactpage{max-width:1280px;margin:0 auto;padding:72px var(--gutter) 80px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:28px;align-items:start;color:var(--ink)}
.contactpage .main{grid-column:span 7;display:flex;flex-direction:column;gap:28px}.contactpage aside{grid-column:9 / span 4;display:flex;flex-direction:column;gap:16px;padding-top:148px}
.contactpage .lead{display:flex;flex-direction:column;gap:14px}.contactpage .kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.contactpage h1{margin:0;font-size:56px;line-height:1.04;letter-spacing:-.02em}.contactpage .lead p{margin:0;font-size:19px;line-height:1.55;color:#4a463e;max-width:560px}
.contactpage .panel{display:flex;flex-direction:column;gap:20px;padding:28px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.contactpage fieldset{margin:0;padding:0;border:0}.contactpage legend{padding:0 0 8px;font-size:14px;font-weight:600}
.contactpage .topics{display:flex;gap:8px;flex-wrap:wrap}
.contactpage .topics label{height:40px;padding:0 16px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid #cfc8b8;background:#fff;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;position:relative}
.contactpage .topics input{position:absolute;opacity:0;width:0;height:0}.contactpage .topics label:has(input:checked){background:#1d1c19;border-color:#1d1c19;color:#fff}.contactpage .topics label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.contactpage .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contactpage form > label,.contactpage .pair label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;line-height:1.3}
.contactpage .hint{font-size:13px;font-weight:400;line-height:1.5;color:var(--ink-2)}.contactpage .hint a{font-weight:600}
.contactpage form input[type=text],.contactpage form input[type=email],.contactpage textarea{box-sizing:border-box;width:100%;height:50px;padding:0 14px;border:1px solid #cfc8b8;border-radius:8px;background:#fff;color:var(--ink);font:400 16px 'Instrument Sans',system-ui,sans-serif}
.contactpage input.mono{font:400 15px 'IBM Plex Mono',monospace}.contactpage textarea{height:auto;padding:12px 14px;line-height:1.5;resize:vertical}
.contactpage form input:focus,.contactpage textarea:focus{outline:2px solid var(--ink);border-color:var(--ink)}
.contactpage .err{font-size:13px;font-weight:500;color:#9a3226}.contactpage .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The store field and the message hints follow the chosen topic. */
.contactpage .bugonly,.contactpage .hint[class*=for-]{display:none}
.contactpage form:has(input[value=bug]:checked) .bugonly{display:flex}.contactpage form:has(input[value=bug]:checked) .for-bug,.contactpage form:has(input[value=account]:checked) .for-account{display:inline}
.contactpage .send{display:flex;align-items:center;gap:16px}.contactpage .send .btn{flex-shrink:0;height:52px;border:0;cursor:pointer}
.contactpage .sent{gap:12px;font-size:16px;line-height:1.55;color:#3d3a33}.contactpage .sent .ok{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#2d6a3e}
.contactpage .sent .big{font-family:Fraunces,Georgia,serif;font-size:30px;font-weight:500;color:var(--ink)}.contactpage .acts{display:flex;gap:10px;padding-top:4px}.contactpage .acts .btn{height:44px;font-size:14px;border-radius:8px}
.contactpage aside .card{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:12px;background:#fff;border:1px solid var(--line)}.contactpage aside h2{margin:0 0 8px;font:600 16px 'Instrument Sans',system-ui,sans-serif;letter-spacing:0}
.contactpage aside .card a{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid #efebe2;text-decoration:none}.contactpage aside .card a b{font-size:15px;font-weight:600}.contactpage aside .card a span{font-size:13px;color:var(--ink-2)}
.contactpage aside .soft{background:#e8e3d7;border:0;gap:10px;font-size:14px;line-height:1.55}.contactpage aside .soft h2{margin:0}
@media (max-width:980px){.contactpage{padding-top:40px}.contactpage .main,.contactpage aside{grid-column:span 12}.contactpage aside{padding-top:0}.contactpage h1{font-size:40px}.contactpage .pair{grid-template-columns:1fr}.contactpage .send{flex-direction:column;align-items:flex-start}}

/* Changelog (design: Changelog); shares the contact page's frame */
.changelog .main{grid-column:span 8;gap:32px}.changelog aside{grid-column:10 / span 3}
.changelog .topics a{height:40px;padding:0 16px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid #cfc8b8;background:#fff;font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none}
.changelog .topics a[aria-current=true]{background:#1d1c19;border-color:#1d1c19;color:#fff}
.changelog .days{display:flex;flex-direction:column}.changelog .days section{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.changelog .when{display:flex;flex-direction:column;gap:4px}.changelog .when h2{margin:0;font:600 16px 'Instrument Sans',system-ui,sans-serif;letter-spacing:0}.changelog .when span{font-size:13px;color:var(--ink-2)}
.changelog .days ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}.changelog .days li{display:flex;align-items:flex-start;gap:14px}
.changelog .kind{flex-shrink:0;width:78px;height:24px;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:12px;font-weight:600;background:#1d1c19;color:#fff}
.changelog .kind.improved{background:#e4edf3;color:#1f4a66}.changelog .kind.fixed{background:#e6f1e8;color:#2d6a3e}
.changelog .what{flex-grow:1;display:flex;flex-direction:column;gap:4px}.changelog .what b{font-size:17px;font-weight:600;line-height:1.35}.changelog .what span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.changelog .area{flex-shrink:0;white-space:nowrap;padding-top:4px;font-size:12px;font-weight:600;color:var(--ink-2)}.changelog .none{margin:0;padding:28px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.changelog aside .card a.row{flex-direction:row;justify-content:space-between;align-items:center;padding:10px 0;font-size:14px}.changelog aside .card a.row code{font-size:12px;color:var(--ink-2)}
.changelog aside .kv{display:flex;justify-content:space-between;gap:12px}.changelog aside .kv.top{padding-top:8px;border-top:1px solid #d6d0c2}.changelog aside .kv code{font-size:13px}
.changelog .tell{font-size:13px;line-height:1.5;color:var(--ink-2)}.changelog .tell a{font-weight:600}
@media (max-width:980px){.changelog .main,.changelog aside{grid-column:span 12}}
@media (max-width:640px){.changelog .days section{grid-template-columns:1fr;row-gap:14px}.changelog .area{display:none}}