/* /security v2: story beats built from the block catalog (ob-teams-hero-1, ob-home-7, ob-home-4, ob-compare-5, ob-compare-4, ob-home-11). Tokens only. */
.security-page{--sec-space:32px}
.security-page section{padding:96px 0}
.security-page .section-intro{display:grid;gap:16px;max-width:760px;margin-bottom:56px}
.security-page .section-intro .lead{color:var(--muted);max-width:56ch}

/* hero: centred h1 with mascot plates and name tags (ob-teams-hero-1) */
.sec-hero{padding:72px 0 24px}
.hero-stage{position:relative;display:grid;justify-items:center;text-align:center;gap:28px}
.hero-stage h1{font-size:clamp(40px,6.6vw,96px);max-width:none;margin-inline:auto}.h1-line{display:block;white-space:nowrap}
.hero-stage .lead{max-width:50ch;color:var(--muted)}
.plate{display:inline-grid;place-items:center;width:.95em;height:.95em;margin-inline:.08em;vertical-align:-.1em;border-radius:.26em;background:var(--panel)}
.plate .mascot{width:70%;height:70%}
.plate-b{background:var(--action)}
.name-tag{position:absolute;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--pill);font-size:13px;font-weight:500;background:var(--frame);color:var(--ink)}
.tag-a{left:4%;top:6%}.tag-b{right:4%;top:46%;background:var(--action);color:var(--action-ink)}.tag-c{left:6%;top:52%}
.sec-hero .security-object{height:340px;width:min(100%,720px);margin-top:16px;--sec-object:300px}
.shield-reviewer{left:6%;bottom:0}.shield-scout{right:6%;top:20px}.shield-builder{position:absolute;left:22%;top:0}
.shield-builder .mascot{width:72px;height:72px}.sec-hero .shield-reviewer .mascot,.sec-hero .shield-scout .mascot{width:96px;height:96px}

/* four boundaries: cards with live scenes (ob-home-7) */
.sec-cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch}
.sec-card{grid-column:span 6;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:28px;border-radius:28px;background:var(--frame);min-width:0;container-type:inline-size;scroll-margin-top:96px}
.card-approval{grid-column:span 7}.card-sandbox{grid-column:span 5}.card-desktop{grid-column:span 5}.card-browser{grid-column:span 7}
.card-desktop,.card-sandbox{background:var(--panel)}.card-desktop .proof-chip,.card-sandbox .proof-chip{background:var(--frame)}
.sec-card-scene{min-width:0;display:grid;align-content:center;flex:1}
.sec-card-copy{display:grid;gap:12px;min-width:0}
.sec-card-copy h3{font-size:22px;letter-spacing:-.03em}
.sec-card-copy>p{color:var(--muted);max-width:44ch}
.sec-card-copy .sec-proofs{margin-top:8px}
.card-art{display:grid;place-items:center;min-height:220px}
.card-art img{width:min(100%,280px);height:auto}
.sec-card .approval-workbench{gap:32px;padding:0;background:none}
.sec-card .mini-ui{background:none;padding:0}
.sec-card .approval-journal{padding:0}.sec-card .journal-feed{min-height:120px}.sec-card .approval-journal>.mini-head{margin-bottom:20px}
.sec-card .sandbox-scene{min-height:360px;padding:48px 0 72px}
.sec-card .sandbox-flags{margin-top:0}
.sec-card.card-browser{background:none;padding:0}
.sec-card.card-browser .sec-card-copy{padding:0 8px}
.sec-card .sec-app{grid-template-columns:minmax(0,1fr);padding:0 8px 8px}
.sec-card .app-navigation,.sec-card .app-window-header{display:none}
.sec-card .app-chat-header{padding:20px 20px 16px}
.sec-card .app-browser-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-height:380px}
@container (max-width:620px){
.approval-workbench{grid-template-columns:minmax(0,1fr);gap:24px}
.sandbox-scene{grid-template-columns:72px minmax(0,1fr);gap:20px;min-height:440px;padding:64px 0 120px}
.sandbox-builder .mascot{width:72px;height:72px}.sandbox-box img{width:200px}.sandbox-command{top:0;left:0;font-size:13px}.sandbox-route{left:20%;top:38%;font-size:32px}
.sandbox-network{position:absolute;width:150px;right:0;bottom:0}.sandbox-result{left:0;bottom:112px;font-size:13px}.sandbox-flags{justify-content:flex-start;gap:12px 20px;font-size:13px}
.app-browser-layout,.sec-card .app-browser-layout{grid-template-columns:minmax(0,1fr)}
}

/* log: chain as a scene (ob-home-4) */
.trail-stage{padding:32px;border-radius:32px;background:var(--panel)}
.trail-stage .sec-app{display:block;background:none;padding:0}
.trail-stage .app-chat-header{padding:0 0 24px}
.trail-stage .app-trail-layout{grid-template-columns:minmax(0,1fr) 260px;gap:32px}
.trail-stage .app-conversation{background:none}
.trail-stage .app-trail .app-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0}
.trail-stage .app-trail .app-event{flex-direction:column;gap:16px;padding:20px;background:var(--frame);border-radius:20px;position:relative}
.trail-stage .app-hash{white-space:normal}
.trail-stage .app-verification{padding:8px 0;justify-content:space-between}
.trail-stage .app-verification .btn{background:var(--frame)}
.sec-trail .sec-proofs{margin-top:24px}

/* threats and defenses (ob-compare-5) */
.sec-threats{padding-top:32px}
.threat-garden{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
.threat-name{font-size:clamp(28px,3.4vw,40px);margin-bottom:28px}.threat-col .proof-chip{background:var(--canvas)}.threat-def .proof-chip{background:var(--panel)}
.threat-panel{display:block;min-height:0}
.threat-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px}
.threat-col{display:grid;align-content:start;gap:12px;padding:28px;border-radius:24px;background:var(--panel);min-width:0}
.threat-def{background:var(--frame)}
.threat-col h3{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.threat-col>p{font-size:16px;line-height:1.55;max-width:60ch;overflow-wrap:anywhere}
.threat-def .sec-proofs{margin-top:8px}

/* status table (ob-compare-4) */
.status-wrap{overflow-x:auto}
.status-table{width:100%;border-collapse:separate;border-spacing:0 6px;text-align:left}
.status-table thead th{padding:8px 24px;font-size:14px;font-weight:500;color:var(--muted)}
.status-table tbody th,.status-table tbody td{padding:20px 24px;background:var(--frame);vertical-align:top;font-size:16px;line-height:1.5}
.status-table tbody th{width:34%;font-weight:500;border-radius:20px 0 0 20px}
.status-table tbody td{background:var(--panel);border-radius:0 20px 20px 0;max-width:60ch}

/* data FAQ (ob-home-11) */
.faq .sec-head{display:grid;gap:16px;align-content:start}
.faq .sec-head .lead{color:var(--muted)}

@media(max-width:1100px){
.sec-card,.card-approval,.card-sandbox,.card-desktop,.card-browser{grid-column:span 12}
.threat-garden{grid-template-columns:minmax(0,1fr);gap:24px}
.threat-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.threat-tabs button:last-child{grid-column:1/-1}
.trail-stage .app-trail-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:768px){
.security-page section{padding:64px 0}
.security-page .section-intro{margin-bottom:32px}
.sec-hero{padding-top:32px}
.hero-stage{gap:20px}.name-tag{display:none}
.sec-hero .security-object{height:240px;--sec-object:200px}
.sec-hero .shield-reviewer .mascot,.sec-hero .shield-scout .mascot{width:72px;height:72px}.shield-builder .mascot{width:56px;height:56px}
.sec-card{padding:20px}
.sec-card.card-browser{padding:0}
.trail-stage{padding:16px}
.trail-stage .app-trail .app-feed{grid-template-columns:minmax(0,1fr)}
.trail-stage .app-chat-header{padding-bottom:16px}
.threat-cols{grid-template-columns:minmax(0,1fr)}
.threat-col{padding:20px}
.status-table,.status-table tbody,.status-table tr,.status-table th,.status-table td{display:block}
.status-table thead{display:none}
.status-table tbody tr{margin-bottom:6px}
.status-table tbody th{width:auto;padding:16px 20px 4px;border-radius:20px 20px 0 0}
.status-table tbody td{padding:4px 20px 16px;border-radius:0 0 20px 20px;max-width:none}
}