@import url("./fonts/montserrat.css");

:root {
  --canvas:#fbfbfb;
  --paper:#fff;
  --ink:#161624;
  --muted:#6a6a6a;
  --line:#dcd9d9;
  --accent:#8950fc;
  --purple:#5f38b0;
  --tint:#f9f6ff;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-family:Montserrat,Arial,sans-serif;
  color:var(--ink);
  background:var(--canvas);
}
* { box-sizing:border-box }
body { margin:0; background:var(--canvas) }
button,a { font:inherit }
a { color:inherit; text-decoration:none }
button { cursor:pointer }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px }
.frame,.top-inner { width:min(1320px,calc(100% - 48px)); margin-inline:auto }
.skip,.sr-only { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap }
.skip:focus { clip:auto;width:auto;height:auto;background:white;padding:12px;z-index:5 }
.top { background:var(--paper); border-bottom:1px solid var(--line) }
.top-inner,.top nav,footer .frame,footer .frame>div { display:flex;align-items:center }
.top-inner { min-height:70px;justify-content:space-between;gap:24px }
.wordmark { display:inline-flex;align-items:center }
.wordmark img { display:block;width:176px;height:auto }
.top nav { gap:28px;font-size:.88rem;font-weight:600 }
.top nav a:hover,footer a:hover { color:var(--purple) }
h1,h2,h3,h4,p { margin:0 }
.intro { padding-block:clamp(26px,3vw,48px) clamp(22px,2.5vw,36px);text-align:center }
h1 { max-width:1000px;margin-inline:auto;color:var(--ink);font-size:clamp(38px,4.4vw,68px);font-weight:800;letter-spacing:-.048em;line-height:1.04;text-wrap:balance }
.intro>p { margin:14px auto 0;max-width:900px;line-height:1.55;color:var(--muted);font-size:clamp(.95rem,1.2vw,1.1rem);text-wrap:balance }
.diagram { width:100%;background:var(--paper);border-block:1px solid var(--line);padding-block:clamp(18px,2vw,30px) 14px }
.architecture { display:grid;justify-items:center }
.sources { width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) }
.source { display:grid;justify-items:center;align-content:start;gap:4px;width:min(80%,330px);justify-self:center;padding:13px 6px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--tint);text-align:center }
.source b { font-size:clamp(.83rem,1.4vw,1.16rem);font-weight:700 }
.source small { font-size:clamp(.67rem,1vw,.82rem);line-height:1.4;color:var(--muted) }
.glyph { display:inline-block;width:22px;height:22px;position:relative;color:var(--accent);margin-bottom:2px }
.watch { border:1.5px solid currentColor;border-radius:50% }
.watch:before { content:"";position:absolute;inset:5px;border:1.5px solid;border-radius:50% }
.watch:after { content:"";position:absolute;top:9px;left:-2px;right:-2px;border-top:1px solid }
.exposure { width:18px;height:18px;margin:2px 2px 4px;transform:rotate(45deg);border:1.5px solid;border-radius:3px }
.exposure:after { content:"";position:absolute;inset:4px;border:1px solid;border-radius:2px }
.investigate:before { content:"";position:absolute;inset:1px 5px 5px 1px;border:1.5px solid;border-radius:50% }
.investigate:after { content:"";position:absolute;width:10px;height:1.5px;transform:rotate(45deg);right:0;bottom:4px;background:currentColor }
.wires { width:100%;height:clamp(55px,5vw,72px);position:relative }
.wires svg { display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--accent);stroke-width:1.5 }
.wires path { vector-effect:non-scaling-stroke }
.wires:after { content:"";position:absolute;left:50%;bottom:0;width:10px;height:10px;border:solid var(--accent);border-width:0 2px 2px 0;transform:translateX(-50%) rotate(45deg) }
.connector-label { position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);padding:3px 10px;border-radius:12px;background:var(--paper);color:var(--purple);font-size:.72rem;font-weight:650;white-space:nowrap }
.connection-actions { margin-top:10px;text-align:center }
.connection-actions h2 { margin-bottom:13px;font-size:clamp(1.25rem,1.85vw,1.65rem);letter-spacing:-.035em;font-weight:700 }
.assistant-actions,.account-actions { display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px }
.assistant-caption { margin:-6px 0 14px;color:var(--muted);font-size:.87rem;line-height:1.5 }
.account-actions { margin-top:16px }
.assistant-actions a,.account-actions button { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 13px;min-height:40px;border:1px solid var(--line);border-radius:6px;font-size:.8rem;font-weight:600;background:var(--paper);color:var(--ink) }
.assistant-actions a:hover { border-color:var(--accent);color:var(--purple);background:var(--tint) }
.account-actions button { min-width:110px }
.account-actions .login:disabled { background:var(--canvas);color:var(--muted);cursor:not-allowed }
.account-actions .access { color:white;background:var(--accent);border-color:var(--accent) }
.account-actions .access:hover { background:var(--purple);border-color:var(--purple) }
#access-dialog { width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 32px);margin:auto;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 12px 48px rgb(0 0 0 / 18%) }
#access-dialog::backdrop { background:rgb(22 22 36 / 40%) }
.request-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px }
.request-heading h2 { font-size:1.4rem;letter-spacing:-.035em }
.request-heading button { border:0;border-radius:6px;background:var(--canvas);color:var(--ink);font-size:1.4rem;width:36px;height:36px }
#access-form { display:grid;gap:7px;font-size:.9rem }
#access-form>label,#access-form legend { font-weight:600 }
#access-form input[type=email],#access-form input[type=text],#access-form select,#access-form textarea { width:100%;padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit;margin-bottom:6px }
#access-form input[type=email] { margin-bottom:0 }
#work-email-hint { color:var(--muted);font-size:.78rem;line-height:1.4;margin-bottom:6px }
#access-form textarea { resize:vertical }
#access-form fieldset { border:0;padding:0;margin:0 0 8px }
#access-form legend { padding:0;margin-bottom:4px }
#access-form fieldset label { display:flex;align-items:center;gap:8px;padding:5px 0 }
#access-form input[type=radio] { accent-color:var(--purple);margin:0 }
.request-submit { padding:10px 18px;border:0;border-radius:6px;color:white;background:var(--purple);font-weight:600 }
.request-submit:disabled { opacity:.7;cursor:wait }
.request-status:not(:empty) { margin-top:12px;font-size:.9rem;line-height:1.5 }
.access-note { margin-top:10px;color:var(--muted);text-align:center;font-size:.74rem;line-height:1.55 }
.access-note a { text-decoration:underline;text-underline-offset:2px }
.library { background:var(--canvas);padding-block:clamp(23px,3vw,40px) clamp(40px,6vw,80px) }
.section-intro { display:flex;align-items:center;justify-content:space-between;gap:30px }
.section-intro h2 { font-size:clamp(1.7rem,2.8vw,2.7rem);letter-spacing:-.05em;line-height:1.12;font-weight:650 }
.prompt-heading p { margin-top:6px;color:var(--muted);font-size:.86rem;line-height:1.5 }
.shuffle-button { flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--purple) }
.shuffle-button svg { transform:rotate(-12deg) }
.shuffle-button:hover { border-color:var(--accent);background:var(--tint) }
.shuffle-button:active svg { transform:rotate(12deg) }
.prompt-rows { display:grid;gap:12px;margin-top:16px }
.prompt-rail { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(5px,1vw,14px);align-items:center;position:relative }
.rail-arrow { display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;padding:0;background:var(--paper);color:var(--purple);font-size:1.15rem }
.rail-arrow:enabled:hover { border-color:var(--accent);background:var(--tint) }
.rail-arrow:disabled { color:var(--muted);opacity:.45;cursor:default }
.carousel-track {
  --gap:14px;
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--gap)) / 3);
  gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-block:3px 5px;
}
.question { display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:138px;padding:clamp(16px,1.55vw,23px);background:var(--paper);border:1px solid var(--line);border-radius:10px;scroll-snap-align:start }
.question:focus-within { border-color:var(--accent) }
.question h3 { margin:0 0 14px;font-weight:650;font-size:clamp(1rem,1.4vw,1.24rem);line-height:1.35;letter-spacing:-.035em }
.copy { display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;background:var(--tint);color:var(--purple);min-height:36px;margin-top:auto;padding:7px 12px;font-size:.77rem;font-weight:650 }
.copy:hover { border-color:var(--accent) }
.copy-icon { width:12px;height:13px;position:relative;display:inline-block }
.copy-icon:before,.copy-icon:after { position:absolute;content:"";width:7px;height:8px;border:1.3px solid;border-radius:1.4px }
.copy-icon:before { top:0;left:0 }.copy-icon:after { bottom:0;right:0;background:var(--tint) }
footer { border-top:1px solid var(--line) }footer .frame { justify-content:space-between;gap:20px;min-height:84px }footer .wordmark img { width:144px }footer .frame>div { gap:22px;font-size:.76rem;font-weight:600 }
[hidden] { display:none!important }
@media(max-width:900px) {
 .top-inner { min-height:62px }.wordmark img { width:150px }
 .section-intro { align-items:center;gap:12px }
 .carousel-track { grid-auto-columns:calc((100% - var(--gap)) / 2) }
}
@media(max-width:710px) {
 .frame,.top-inner { width:calc(100% - 32px) }.top nav { gap:12px;font-size:.74rem }
 .source { width:calc(100% - 8px) }
 .assistant-actions { max-width:470px;margin-inline:auto }
 .assistant-actions a { padding-inline:10px }
 .carousel-track { grid-auto-columns:100% }

}
@media(max-width:430px) {
 .top-inner { gap:10px;flex-wrap:wrap;padding-block:10px }.wordmark img { width:128px }.top nav { gap:10px;font-size:.7rem }
 .source { width:calc(100% - 4px);padding-inline:2px }.source b { font-size:.76rem }.source small { font-size:.65rem }
 footer .frame { flex-wrap:wrap;justify-content:flex-start;padding-block:16px }footer .frame>div { gap:16px }
}

.top nav a[aria-current="page"] { color:var(--purple) }
footer .access-note.frame { min-height:0;display:block;padding-bottom:14px;margin-top:0;text-align:right }
.cases-page { padding-block:clamp(30px,4vw,64px) clamp(46px,6vw,90px) }
.cases-page h1 { margin:0 0 clamp(22px,3vw,42px);font-size:clamp(40px,4.6vw,72px);letter-spacing:-.055em }
.cases-layout { display:grid;grid-template-columns:minmax(205px,245px) minmax(0,1fr);gap:clamp(24px,4vw,65px);align-items:start }
.case-index { position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:4px 12px 8px 0 }
.index-group+.index-group { margin-top:14px }
.index-group h3 { font-size:.74rem;font-weight:700;color:var(--purple);margin:0 0 5px }
.index-group ul { list-style:none;margin:0;padding:0 }
.index-group a { display:block;padding:4px 0;font-size:.79rem;line-height:1.35 }
.index-group a:hover { color:var(--purple);text-decoration:underline;text-underline-offset:3px }
.mobile-index { display:none }
.case-content { background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 4px rgb(0 0 0 / 9%);padding-inline:clamp(24px,3.8vw,56px) }
.case-section { padding-block:clamp(22px,2.6vw,35px);scroll-margin-top:18px }
.case-section+.case-section { border-top:1px solid var(--line) }
.case-section h2 { margin:0 0 12px;font-size:clamp(1.35rem,2.2vw,2.05rem);line-height:1.16;letter-spacing:-.045em }
.case-section p { max-width:80ch;color:var(--ink);font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.67 }
.case-section p+p { margin-top:10px }
.guide-index { align-self:start;position:sticky;top:20px;padding:10px 0 }
.guide-index nav { display:grid;gap:4px }
.guide-index nav a { width:fit-content;padding:5px 0;font-size:.9rem;font-weight:600 }
.guide-index nav a:hover { color:var(--purple);text-decoration:underline }
.guide-index>.text-link { margin-top:18px }
.guide-page .case-section h3 { margin:18px 0 6px;font-size:1rem }
.guide-page .case-section ol { margin:10px 0 0;padding-left:1.4rem }
.guide-page .case-section li { padding-left:4px;font-size:clamp(.94rem,1vw,1.02rem);line-height:1.6 }
.guide-page .case-section li+li,.guide-page .case-section ol+p,.guide-page .connection-note p+p { margin-top:10px }
.guide-page .case-section a,.guide-detail summary { color:var(--purple);text-decoration:underline;text-underline-offset:3px }
.guide-field { display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px 12px;margin-block:8px;border:1px solid var(--line);border-radius:6px;background:var(--canvas);width:fit-content;max-width:100% }
.guide-field code,.guide-field span { min-width:0;overflow-wrap:anywhere;font-size:.85rem }
.guide-field code { font-family:var(--mono) }
.guide-field button { border:1px solid var(--line);border-radius:5px;padding:7px 10px;color:var(--purple);background:var(--paper);font-size:.78rem;font-weight:650 }
.guide-field button:hover { border-color:var(--accent) }
.guide-detail { margin-top:12px;font-size:.88rem }
.guide-detail summary { cursor:pointer }
.guide-detail[open] summary { margin-bottom:8px }
@media(max-width:750px) {
 .guide-index { position:static;padding:0;margin-bottom:16px }
 .guide-index nav { display:flex;flex-wrap:wrap;gap:2px 14px }
 .guide-index>.text-link { margin-top:6px }
 .cases-layout { display:block }
 .case-index { position:static;max-height:none;padding:0;margin-bottom:16px }
 .desktop-index { display:none }
 .mobile-index { display:block;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:7px }
 .mobile-index summary { cursor:pointer;color:var(--purple);font-weight:650;font-size:.87rem }
 .mobile-index[open] summary { margin-bottom:14px }
 .case-content { padding-inline:17px }
 footer .frame>div { flex-wrap:wrap;row-gap:9px }
}
a.source { position:relative }
a.source:hover,a.source:focus-visible { border-color:var(--accent);background:var(--paper) }
a.source b { text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px }
a.source:hover b,a.source:focus-visible b { text-decoration-color:var(--accent) }
.text-link { display:inline-flex;align-items:baseline;gap:7px;color:var(--purple);font-size:.85rem;font-weight:650;text-decoration:underline;text-underline-offset:3px }
.text-link:hover { color:var(--ink) }
.case-section .text-link,.connection-note .text-link,.trust-list .text-link { margin-top:12px }
.editorial-page { padding-block:clamp(30px,4vw,64px) clamp(46px,6vw,90px) }
.page-intro { margin-bottom:clamp(22px,3vw,42px) }
.page-intro h1 { margin:0;font-size:clamp(40px,4.6vw,72px);letter-spacing:-.055em }
.page-intro p { max-width:74ch;margin-top:14px;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.55;color:var(--muted) }
.product-list,.trust-list { border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 1px 4px rgb(0 0 0 / 9%);padding-inline:clamp(18px,3.6vw,52px) }
.product-entry,.trust-list section { display:grid;grid-template-columns:minmax(175px,.45fr) minmax(0,1.1fr);gap:clamp(22px,4vw,64px);padding-block:clamp(22px,2.7vw,40px);scroll-margin-top:16px }
.product-entry+.product-entry,.trust-list section+section { border-top:1px solid var(--line) }
.product-name h2,.trust-list h2,.connection-note h2 { margin:5px 0;font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.18;letter-spacing:-.04em }
.product-name p { color:var(--purple);font-size:.82rem;font-weight:650;line-height:1.5 }
.product-copy h3 { font-size:clamp(1.06rem,1.4vw,1.25rem);line-height:1.33;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance }
.product-copy p,.trust-list p,.connection-note p { font-size:clamp(.94rem,1vw,1.02rem);line-height:1.65;max-width:79ch }
.product-copy p+p,.trust-list p+p,.trust-list a+p { margin-top:10px }
.trust-list p a { color:var(--purple);text-decoration:underline;text-underline-offset:3px }
.trust-list p a:hover,.trust-list p a:focus-visible { color:var(--ink) }
.connection-note { margin-top:24px;padding:clamp(18px,2.3vw,32px);border:1px solid var(--line);background:var(--tint);border-radius:10px }
.connection-note h2 { margin:0 0 8px }
.connection-links { display:flex;align-items:baseline;flex-wrap:wrap;column-gap:22px }
@media(max-width:750px) {
 .product-entry,.trust-list section { grid-template-columns:1fr;gap:12px }
 .product-name h2 { display:inline;margin-left:8px;vertical-align:middle }
 .product-name .glyph { vertical-align:middle;margin-bottom:0 }
 .product-name p { margin-top:5px }
 .product-name .exposure { margin-inline:2px }
}