/* ==========================================================================
   Telha marketing site — shared stylesheet
   Editorial ink-on-paper direction; accent, status, focus and motion tokens
   aligned with the Telha Design System v0.2 (docs/telha-design-system).
   ========================================================================== */

:root{
  /* Neutrals (warm paper) */
  --paper:#f3f0e8;
  --paper-2:#eae6db;
  --panel:#faf8f2;
  --surface:#ffffff;
  --ink:#191813;
  --ink-soft:#45443f;
  --muted:#5f5d55;
  --subtle:#838076;
  --line:rgba(23,23,20,.14);
  --line-strong:rgba(23,23,20,.24);

  /* Dark surfaces */
  --dark:#171714;
  --dark-2:#1d1d19;
  --dark-line:#3b3a34;
  --dark-text:#f5f3ec;
  --dark-muted:#b1afa6;

  /* Brand accents */
  --navy:#0d1e85;              /* docs design-system dark blue */
  --navy-deep:#0a1866;
  --status-green:#10a66a;      /* --telha-green-500 */
  --focus-ring:0 0 0 3px rgba(13,30,133,.28);

  /* Muted text on dark surfaces (contrast-safe) */
  --dark-subtle:#a5a399;

  /* Type */
  --font-display:Canela,"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --tracking-eyebrow:.16em;
  --tracking-display:-.03em;

  /* Layout + shape */
  --max:1260px;
  --radius-sm:9px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* Effects */
  --shadow-stage:0 35px 100px rgba(30,28,22,.10);
  --shadow-window:0 24px 70px rgba(25,24,20,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img,svg{display:block;max-width:100%}
::selection{background:rgba(13,30,133,.15)}
:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:6px}
.container{width:min(calc(100% - 48px),var(--max));margin-inline:auto}

.skip-link{
  position:absolute;left:16px;top:-48px;z-index:100;
  padding:10px 16px;border-radius:var(--radius-sm);
  background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;
  transition:top .15s var(--ease);
}
.skip-link:focus-visible{top:12px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* --------------------------------------------------------------------------
   Announcement + header
   -------------------------------------------------------------------------- */
.announcement{
  min-height:38px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 20px;
  background:var(--navy);color:#f0f2fb;
  font-size:.78rem;letter-spacing:.02em;text-align:center;
}
.announcement a{border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px}
.announcement a:hover{border-color:#fff}

.header{
  position:sticky;top:0;z-index:30;
  background:rgba(243,240,232,.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.06rem;letter-spacing:-.02em}
.mark{width:34px;height:34px;display:block;object-fit:contain;flex:0 0 auto}
.navlinks{display:flex;align-items:center;gap:30px;font-size:.9rem;color:var(--ink-soft)}
.navlinks a{padding:6px 2px;border-bottom:1px solid transparent;transition:color .15s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink);font-weight:650;border-bottom-color:var(--navy)}

/* Persona dropdown ("Telha for…") */
.nav-item{position:relative}
.nav-drop-trigger{display:inline-flex;align-items:center;gap:6px}
.nav-drop-trigger .caret{width:9px;height:6px;transition:transform .15s var(--ease)}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:12px;display:none;z-index:50;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block}
.dropdown-panel{
  min-width:250px;padding:8px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--panel);
  box-shadow:0 18px 50px rgba(25,24,20,.16);
}
.dropdown-panel a{display:block;padding:9px 11px;border-radius:9px;border-bottom:0}
.dropdown-panel a:hover{background:#edeae0}
.drop-name{display:block;font-size:.85rem;font-weight:650;color:var(--ink)}
.drop-sub{display:block;margin-top:1px;font-size:.7rem;color:var(--subtle)}
.dropdown-all{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;font-size:.75rem;font-weight:650;color:var(--muted)}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Mobile nav */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:transparent;color:var(--ink);cursor:pointer;
}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
.mobile-menu{
  display:none;
  border-top:1px solid var(--line);
  background:var(--paper);
  padding:10px 0 22px;
}
.mobile-menu.open{display:block}
.mobile-menu .container>a{
  display:block;padding:14px 0;
  font-size:1.05rem;font-weight:600;
  border-bottom:1px solid var(--line);
}
.mobile-menu .actions{margin-top:18px;flex-direction:column;align-items:stretch}
.mobile-menu .actions .btn{width:100%}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  min-height:46px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink);border-radius:var(--radius-pill);
  padding:11px 22px;
  font-weight:650;font-size:.9rem;letter-spacing:.005em;
  cursor:pointer;
  transition:transform .15s var(--ease),background .15s var(--ease),color .15s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-deep)}
.btn-light{background:transparent;color:var(--ink)}
.btn-light:hover{background:rgba(23,23,20,.05)}
.dark .btn-light,.dark-section .btn-light{border-color:var(--dark-text);color:var(--dark-text)}
.dark .btn-light:hover,.dark-section .btn-light:hover{background:rgba(255,255,255,.08)}

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */
.kicker{
  margin:0 0 22px;
  font-size:.74rem;font-weight:750;
  text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);
  color:var(--muted);
}
.display{
  margin:0;
  font-family:var(--font-display);font-weight:450;
  letter-spacing:var(--tracking-display);
  color:inherit;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{padding:96px 0 64px}
.hero.center{text-align:center}
.hero h1{
  max-width:1020px;margin:0;
  font-family:var(--font-display);font-weight:450;
  font-size:clamp(3.1rem,6.6vw,6.4rem);
  line-height:1.02;letter-spacing:var(--tracking-display);
  text-wrap:balance;
}
.hero.center h1{margin-inline:auto}
.lead{
  max-width:700px;margin:28px 0 0;
  color:var(--muted);
  font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.55;
  text-wrap:pretty;
}
.center .lead{margin-inline:auto}
.hero .actions{margin-top:32px}
.center .actions{justify-content:center}
.hero-note{margin:18px 0 0;color:var(--subtle);font-size:.83rem;letter-spacing:.01em}

/* --------------------------------------------------------------------------
   Product stage + window chrome
   -------------------------------------------------------------------------- */
.product-stage{padding:30px 0 96px}
.stage{
  position:relative;overflow:hidden;
  min-height:590px;
  border:1px solid var(--line);border-radius:var(--radius-xl);
  background:
    radial-gradient(circle at 18% 10%,rgba(13,30,133,.05),transparent 30%),
    linear-gradient(135deg,#e6e1d5,#f8f6ef 54%,#e8e3d8);
  box-shadow:var(--shadow-stage);
}
.stage.tall{min-height:690px}
.grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.028) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.window{
  position:relative;z-index:2;
  width:min(94%,1040px);margin:64px auto;
  overflow:hidden;
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  background:#fbfaf6;
  box-shadow:var(--shadow-window);
}
.window-top{
  min-height:56px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line);
  background:#eeece5;
  font-size:.85rem;font-weight:650;
}
.window-title{display:flex;align-items:center;gap:12px}
.dots{display:flex;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:#aaa79d}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;
  border:1px solid #afac9f;border-radius:var(--radius-pill);
  background:#faf9f4;
  font-size:.68rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--status-green)}
.window-body{padding:30px}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mock-card{
  min-height:180px;padding:20px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);
}
.mock-card small{
  display:block;
  color:var(--subtle);font-size:.7rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.1em;
}
.mock-card h3{margin:40px 0 0;font-size:1.15rem;letter-spacing:-.02em}
.mock-card p{margin:10px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}

/* --------------------------------------------------------------------------
   Case demo (homepage)
   -------------------------------------------------------------------------- */
.case-layout{display:grid;grid-template-columns:210px 1fr;min-height:515px}
.sidebar{padding:18px 13px;border-right:1px solid var(--line);background:#f1efe8}
.side-label{
  padding:5px 10px 10px;
  color:var(--subtle);font-size:.68rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.12em;
}
.side-item{padding:10px 12px;margin-bottom:3px;border-radius:var(--radius-sm);font-size:.82rem;color:var(--muted)}
.side-item.active{background:#dedbd1;color:var(--ink);font-weight:650}
.case-main{padding:28px}
.case-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.case-meta h3{margin:0;font-size:1.5rem;letter-spacing:-.025em}
.case-meta p{margin:7px 0 0;color:var(--muted);font-size:.83rem}
.metric{font-family:var(--font-display);font-size:2rem;line-height:1}
.tabs{display:flex;gap:7px;margin-top:25px;border-bottom:1px solid var(--line)}
.tab{
  border:0;background:transparent;cursor:pointer;
  padding:10px 13px 13px;
  color:var(--muted);font-size:.8rem;font-weight:650;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-color:var(--navy)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.timeline{margin-top:24px;position:relative}
.timeline::before{content:"";position:absolute;left:88px;top:3px;bottom:0;width:1px;background:#c8c5bb}
.event{display:grid;grid-template-columns:68px 18px 1fr;gap:12px;position:relative;padding:0 0 20px}
.event-time{text-align:right;color:var(--subtle);font-size:.75rem;padding-top:4px}
.event-dot{width:9px;height:9px;margin:5px auto 0;border-radius:50%;background:#26251f;box-shadow:0 0 0 4px #fbfaf6}
.event-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;background:var(--surface)}
.event-card strong{display:block;font-size:.84rem}
.event-card span{display:block;margin-top:4px;color:var(--muted);font-size:.75rem;line-height:1.45}
.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.evidence{min-height:110px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.evidence small{
  display:block;color:var(--subtle);
  font-size:.68rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.08em;
}
.evidence strong{display:block;margin-top:12px;font-size:.87rem}
.evidence p{margin:7px 0 0;color:var(--muted);font-size:.76rem;line-height:1.45}
.finding{margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.finding-label{
  color:var(--muted);font-size:.68rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.12em;
}
.finding h4{margin:10px 0 0;font-size:1.15rem;letter-spacing:-.015em}
.finding p{margin:10px 0 0;color:var(--muted);font-size:.83rem;line-height:1.5}
.sources-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.source-pill{padding:6px 10px;border-radius:var(--radius-pill);background:#eceae2;font-size:.7rem;font-weight:650}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.trust-strip{
  padding:32px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#eeebe3;
}
.trust-title{
  text-align:center;margin:0 0 22px;
  color:var(--muted);font-size:.72rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.14em;
}
.use-list{
  display:flex;align-items:center;justify-content:center;gap:14px 36px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:1.18rem;letter-spacing:-.01em;
}
.use-list span{white-space:nowrap}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section{padding:104px 0}
.soft{background:var(--paper-2)}
.dark,.dark-section{background:var(--dark);color:var(--dark-text)}
.dark p,.dark .sub,.dark-section p,.dark-section .sub{color:var(--dark-muted)}
.dark .kicker,.dark-section .kicker{color:var(--dark-muted)}

.section-head{
  display:flex;justify-content:space-between;align-items:end;gap:40px;
  margin-bottom:48px;
}
.section-head h2{
  max-width:780px;margin:0;
  font-family:var(--font-display);font-weight:450;
  font-size:clamp(2.3rem,4.2vw,4rem);
  line-height:1.05;letter-spacing:var(--tracking-display);
  text-wrap:balance;
}
.section-head .sub{max-width:440px;margin:0;color:var(--muted);line-height:1.55;text-wrap:pretty}

.quote{padding:112px 0;text-align:center}
.quote h2{
  max-width:1020px;margin:0 auto;
  font-family:var(--font-display);font-weight:450;
  font-size:clamp(2.1rem,4.2vw,3.9rem);
  line-height:1.12;letter-spacing:-.02em;
  text-wrap:balance;
}
.quote h2 span{color:var(--subtle)}
.dark.quote h2 span,.quote.dark h2 span{color:var(--dark-subtle)}
.dark .num,.dark-section .num{color:var(--dark-subtle)}

/* --------------------------------------------------------------------------
   Three-column items (numbered)
   -------------------------------------------------------------------------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.dark .cols3,.dark-section .cols3{border-color:var(--dark-line)}
.item{padding:31px 32px 18px 0;border-right:1px solid var(--line);margin-right:32px}
.dark .item,.dark-section .item{border-color:var(--dark-line)}
.item:last-child{border-right:0;margin-right:0}
.num{font-size:.72rem;color:var(--subtle);font-weight:750;letter-spacing:.06em}
.item h3{margin:52px 0 0;font-size:1.4rem;letter-spacing:-.02em}
.item p{margin:14px 0 0;color:var(--muted);line-height:1.55}
.item-link{
  display:inline-block;margin-top:26px;
  border-bottom:1px solid var(--ink);
  font-size:.85rem;font-weight:650;
  transition:opacity .15s var(--ease);
}
.item-link:hover{opacity:.65}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}
.card{
  min-height:280px;padding:32px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--panel);
}
.card.dark-card{background:var(--dark-2);color:var(--dark-text);border-color:var(--dark-line)}
.card .label{
  font-size:.7rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--subtle);
}
.dark-card .label{color:#aaa89f}
.card h3{
  margin:64px 0 0;
  font-family:var(--font-display);font-weight:450;
  font-size:1.8rem;line-height:1.15;letter-spacing:-.02em;
  text-wrap:balance;
}
.card p{margin:15px 0 0;color:var(--muted);max-width:520px;line-height:1.55}
.dark-card p{color:var(--dark-muted)}
.list{margin:28px 0 0;padding:0;list-style:none}
.list li{padding:13px 0;border-top:1px solid var(--line);font-size:.9rem;font-weight:550}
.dark .list li,.dark-card .list li{border-color:var(--dark-line)}

/* --------------------------------------------------------------------------
   Flow steps
   -------------------------------------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch}
.flow.four{grid-template-columns:repeat(4,1fr)}
.flow-step{
  padding:22px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);
}
.flow-step small{color:var(--subtle);font-size:.72rem;font-weight:750;letter-spacing:.06em}
.flow-step strong{display:block;margin-top:44px;font-size:1rem;letter-spacing:-.01em}
.flow-step p{margin:9px 0 0;color:var(--muted);font-size:.8rem;line-height:1.5}

/* --------------------------------------------------------------------------
   Architecture stack (security page)
   -------------------------------------------------------------------------- */
.arch{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.stack{display:grid;gap:10px}
.layer{
  padding:20px;
  border:1px solid #3e3d37;border-radius:var(--radius-md);
  background:#1e1e1a;
}
.layer strong{display:block;font-size:.95rem}
.layer span{display:block;margin-top:5px;color:#aaa89f;font-size:.8rem;line-height:1.45}

/* --------------------------------------------------------------------------
   Security shell (homepage)
   -------------------------------------------------------------------------- */
.security-shell{
  display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;
  padding:50px 0 10px;
}
.security-art{
  position:relative;overflow:hidden;
  min-height:430px;
  border:1px solid #3d3c36;border-radius:var(--radius-xl);
  background:radial-gradient(circle at 50% 40%,#333329,transparent 40%),#1c1c18;
}
.ring{position:absolute;left:50%;top:50%;border:1px solid #535148;border-radius:50%;transform:translate(-50%,-50%)}
.ring.one{width:310px;height:310px}
.ring.two{width:220px;height:220px}
.ring.three{width:130px;height:130px}
.lock{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:84px;
  display:grid;place-items:center;
  border:1px solid #e9e7df;border-radius:17px;
  font-family:var(--font-display);font-size:1.6rem;color:var(--dark-text);
}
.lock::before{
  content:"";position:absolute;top:-28px;
  width:35px;height:28px;
  border:1px solid #e9e7df;border-bottom:0;border-radius:18px 18px 0 0;
}
.security-copy h2{
  margin:0;
  font-family:var(--font-display);font-weight:450;
  font-size:clamp(2.3rem,4.2vw,3.9rem);
  line-height:1.05;letter-spacing:var(--tracking-display);
}
.security-copy>p{margin:22px 0 0;color:var(--dark-muted);max-width:560px;line-height:1.55}
.security-points{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border-top:1px solid #3d3c36}
.security-point{padding:16px 12px 16px 0;border-bottom:1px solid #3d3c36;font-size:.85rem}
.security-point:nth-child(odd){border-right:1px solid #3d3c36}
.security-point:nth-child(even){padding-left:17px}

/* --------------------------------------------------------------------------
   CTA + footer
   -------------------------------------------------------------------------- */
.cta{padding:118px 0;text-align:center}
.cta h2{
  max-width:920px;margin:0 auto;
  font-family:var(--font-display);font-weight:450;
  font-size:clamp(2.7rem,5.6vw,5.3rem);
  line-height:1;letter-spacing:var(--tracking-display);
  text-wrap:balance;
}
.cta h2.long{font-size:clamp(2.3rem,4vw,3.6rem);line-height:1.1}
.cta p{max-width:610px;margin:28px auto 0;color:var(--muted);font-size:1.05rem;line-height:1.55}
.cta .actions{justify-content:center;margin-top:30px}

footer{padding:36px 0 46px;border-top:1px solid var(--line)}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:22px;color:var(--muted);font-size:.83rem;flex-wrap:wrap}
.footer-links a:hover{color:var(--ink)}
.small{color:var(--subtle);font-size:.77rem}

/* --------------------------------------------------------------------------
   Placeholder visuals — glyphs, skeleton mockups, card motifs
   Decorative stand-ins for product imagery; swap for real screenshots
   without changing the surrounding layout.
   -------------------------------------------------------------------------- */
.glyph{
  width:38px;height:38px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:11px;
  background:var(--surface);color:var(--ink);
}
.glyph svg{width:19px;height:19px}
.dark .glyph,.dark-section .glyph{background:#22221d;border-color:#4a4941;color:var(--dark-text)}

.item-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.item-top+h3{margin-top:40px}
.flow-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.flow-top+strong{margin-top:30px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-top+h3{margin-top:44px}

.item-visual{margin-top:24px}
.item-visual+h3{margin-top:22px}
.card-visual{margin-top:26px}
.card-visual+h3{margin-top:24px}

.mini{
  padding:14px;display:grid;gap:10px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--surface);
  box-shadow:0 10px 26px rgba(25,24,20,.05);
}
.mini-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini-label{
  font-size:.62rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.1em;color:var(--subtle);
  white-space:nowrap;
}
.mini-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border:1px solid #cfccc0;border-radius:var(--radius-pill);
  font-size:.58rem;font-weight:750;text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap;color:var(--ink-soft);
}
.mini-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--status-green)}
.mini-pills{display:flex;gap:6px;flex-wrap:wrap}
.mini-pill{padding:4px 9px;border-radius:var(--radius-pill);background:#eceae2;font-size:.62rem;font-weight:650;white-space:nowrap}
.mini-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-split .mini-label{margin-bottom:8px;display:block}

.sk{display:grid;gap:8px}
.sk-bar{display:block;height:8px;border-radius:4px;background:#e7e3d7;width:100%}
.sk-bar.strong{background:#d9d4c5}
.sk-bar.w25{width:25%}
.sk-bar.w40{width:40%}
.sk-bar.w55{width:55%}
.sk-bar.w70{width:70%}
.sk-bar.w85{width:85%}
.sk-row{display:flex;align-items:center;gap:8px}
.sk-row .sk-bar{flex:0 1 auto}
.sk-dot{width:7px;height:7px;border-radius:50%;background:#26251f;flex:0 0 auto}
.sk-dot.green{background:var(--status-green)}
.sk-dot.amber{background:#f59e0b}
.sk-dot.red{background:#e1261c}
.sk-check{
  width:13px;height:13px;flex:0 0 auto;position:relative;
  border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);
}
.sk-check::after{
  content:"";position:absolute;left:2.5px;top:3px;
  width:6px;height:3px;
  border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(-45deg);
}
.mini-timeline{position:relative;display:grid;gap:10px}
.mini-timeline::before{content:"";position:absolute;left:3px;top:7px;bottom:7px;width:1px;background:#d9d4c5}

.mock-card .sk{margin-top:18px}
.mock-card .sk+h3{margin-top:18px}

/* Reference architecture diagram (deployment) */
.arch-diagram{display:grid;gap:16px}
.arch-boundary{
  position:relative;
  border:1.5px solid var(--ink);border-radius:16px;
  padding:30px 18px 18px;
}
.arch-boundary-label{
  position:absolute;top:-13px;left:18px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--ink);color:var(--paper);
  font-size:.6rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
}
.arch-boundary-label svg{width:11px;height:11px;flex:0 0 auto}
.arch-cols{display:grid;grid-template-columns:1fr 26px 1.25fr 26px 1fr;gap:12px;align-items:start}
.arch-link{align-self:center;display:grid;place-items:center;color:var(--subtle)}
.arch-link svg{width:16px;height:16px}
.arch-col{display:grid;gap:7px}
.arch-col-label{
  margin-bottom:3px;
  font-size:.62rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.1em;color:var(--subtle);
}
.sys-chip{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-size:.76rem;font-weight:650;
}
.sys-chip .sk-dot{width:6px;height:6px}
.core-box{padding:14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface)}
.core-box.core-telha{background:linear-gradient(155deg,#43c4e8 0%,#3182e2 28%,#1c3aac 58%,#0d1e85 82%,#0a1560 100%);border:none;color:#f0f2fb}
.core-title{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700}
.core-title svg{width:15px;height:15px;flex:0 0 auto}
.core-sub{margin-top:4px;font-size:.7rem;line-height:1.45;color:var(--muted)}
.core-telha .core-sub{color:#c3c9e8}
.core-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.core-tag{
  padding:3px 8px;border-radius:var(--radius-pill);
  background:#eceae2;color:var(--ink-soft);
  font-size:.6rem;font-weight:650;white-space:nowrap;
}
.core-telha .core-tag{background:rgba(255,255,255,.16);color:#f0f2fb}
.core-connector{width:1px;height:12px;margin:0 auto;background:var(--line-strong)}
.arch-outside{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.arch-outside-label{
  font-size:.6rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.1em;color:var(--subtle);
}
.blocked-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;
  border:1px dashed #b7b3a6;border-radius:var(--radius-pill);
  color:var(--subtle);font-size:.7rem;font-weight:650;white-space:nowrap;
}
.blocked-chip svg{width:13px;height:13px;flex:0 0 auto}

/* --------------------------------------------------------------------------
   Memory gate diagram — indexed archive → mandate gate → scoped case
   -------------------------------------------------------------------------- */
.memory-flow{display:grid;grid-template-columns:1.1fr 26px .8fr 26px 1.1fr;gap:12px;align-items:center}
.mem-panel{
  padding:16px;display:grid;gap:9px;
  border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);
  box-shadow:0 14px 36px rgba(25,24,20,.06);
}
.mem-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;font-weight:700}
.mem-search{
  display:flex;align-items:center;gap:8px;
  min-height:34px;padding:0 10px;
  border:1px solid var(--line);border-radius:9px;
  background:#fbfaf6;color:var(--subtle);
}
.mem-search svg{width:13px;height:13px;flex:0 0 auto}
.mem-row{display:flex;align-items:center;gap:8px}
.mem-row.locked{opacity:.5}
.lock-ico{width:11px;height:11px;flex:0 0 auto;color:var(--subtle)}
.sh-tr.locked{opacity:.5}
.gate{
  padding:18px 14px;display:grid;gap:9px;justify-items:center;text-align:center;
  border:1.5px solid var(--ink);border-radius:14px;background:var(--panel);
}
.gate-title{font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.gate-sub{font-size:.68rem;color:var(--muted);line-height:1.45}

/* --------------------------------------------------------------------------
   Security architecture drawing (security page, dark section)
   -------------------------------------------------------------------------- */
.sec-arch{display:grid;gap:14px}
.sec-boundary{
  position:relative;
  display:grid;grid-template-columns:1fr 84px;gap:12px;
  border:1.5px solid #6b6960;border-radius:16px;
  padding:30px 16px 16px;
}
.sec-boundary-label{
  position:absolute;top:-13px;left:16px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--dark-text);color:var(--dark);
  font-size:.6rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
}
.sec-boundary-label svg{width:11px;height:11px;flex:0 0 auto}
.sec-layers{display:grid;gap:8px}
.sec-layer{
  padding:12px 14px;display:grid;gap:8px;
  border:1px solid #3e3d37;border-radius:12px;background:#1e1e1a;
}
.sec-layer.gate-layer{border-color:#e9e7df}
.sec-layer-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sec-layer strong{font-size:.85rem}
.sec-layer-num{font-size:.62rem;color:var(--dark-subtle);font-weight:750;letter-spacing:.08em}
.sec-chips{display:flex;gap:5px;flex-wrap:wrap}
.sec-chip{
  padding:3px 8px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.1);color:#d8d6cc;
  font-size:.6rem;font-weight:650;white-space:nowrap;
}
.audit-rail{
  display:grid;place-items:center;padding:12px 6px;
  border:1px dashed #6b6960;border-radius:12px;color:#aaa89f;
}
.audit-rail span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.64rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
}
.sec-blocked{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.dark .blocked-chip{border-color:#57554c;color:#a5a399}
.dark .arch-outside-label{color:var(--dark-subtle)}
.cols3 .item:nth-child(3n){border-right:0;margin-right:0}
.cols3 .item:nth-child(n+4){border-top:1px solid var(--line)}

/* --------------------------------------------------------------------------
   Product tour — large screenshot placeholders (platform page)
   Each .shot is a framed stand-in for a real product screenshot.
   -------------------------------------------------------------------------- */
section[id],.feature[id],.card[id]{scroll-margin-top:96px}
.tour{display:grid;gap:88px}
.feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.feature.flip .feature-copy{order:2}
.feature-copy h3{
  margin:16px 0 0;
  font-family:var(--font-display);font-weight:450;
  font-size:clamp(1.7rem,2.6vw,2.4rem);
  line-height:1.12;letter-spacing:-.02em;
  text-wrap:balance;
}
.feature-copy p{margin:14px 0 0;color:var(--muted);line-height:1.55;max-width:480px}
.feature-copy .list{margin-top:22px}

.shot{
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  background:#fbfaf6;overflow:hidden;
  box-shadow:var(--shadow-window);
}
.shot-top{
  min-height:46px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);background:#eeece5;
  font-size:.78rem;font-weight:650;
}
.shot-body{padding:18px;display:grid;gap:12px}
.shot .timeline{margin-top:2px}
.sh-field{display:grid;gap:6px}
.sh-input{
  min-height:32px;padding:0 10px;
  display:flex;align-items:center;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
}
.sh-input .sk-bar{height:7px}
.sh-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sh-toolbar{display:flex;gap:6px;flex-wrap:wrap}
.sh-tab{
  padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);font-size:.66rem;font-weight:650;color:var(--muted);
  white-space:nowrap;
}
.sh-tab.active{background:var(--navy);border-color:var(--navy);color:#fff}
.sh-table{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.sh-tr{
  display:grid;grid-template-columns:16px 1fr auto auto;gap:10px;align-items:center;
  padding:10px 12px;border-top:1px solid var(--line);
}
.sh-tr:first-child{border-top:0}
.sh-tr .sk-bar{height:7px}
.sh-pill{padding:3px 8px;border-radius:var(--radius-pill);background:#eceae2;font-size:.6rem;font-weight:650;white-space:nowrap}
.sh-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sh-avatars{display:flex}
.sh-avatar{width:22px;height:22px;border-radius:50%;background:#d9d4c5;border:2px solid #fbfaf6;margin-left:-6px}
.sh-avatar:first-child{margin-left:0}
.sh-btn{
  min-height:32px;padding:0 14px;
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--radius-pill);background:var(--navy);color:#fff;
  font-size:.7rem;font-weight:650;white-space:nowrap;
}
.sh-btn.light{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.sh-split{display:grid;grid-template-columns:1.35fr .95fr;gap:12px;align-items:start}
.sh-panel{
  padding:12px;display:grid;gap:9px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Deployment options — card metric rows + capacity comparison table
   -------------------------------------------------------------------------- */
.spec-rows{margin:30px 0 0;padding:0;list-style:none}
.spec-rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 0;border-top:1px solid var(--line);
  font-size:.86rem;
}
.spec-rows .k{color:var(--muted);flex:0 0 auto}
.spec-rows .v{font-weight:600;text-align:right;margin-left:auto}

.compare-shell{
  margin-top:44px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);
  overflow:hidden;
}
.compare-scroll{overflow-x:auto}
.compare{width:100%;min-width:820px;border-collapse:collapse;font-size:.88rem}
.compare th,.compare td{
  padding:18px 22px;
  border-top:1px solid var(--line);
  text-align:left;vertical-align:top;
}
.compare thead th{border-top:0;background:var(--panel);vertical-align:middle}
.compare thead th:first-child{width:186px}
.compare .profile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.compare .profile strong{font-size:1.02rem;letter-spacing:-.01em}
.compare .profile-sub{display:block;margin-top:5px;color:var(--muted);font-size:.76rem;font-weight:400;line-height:1.45;max-width:230px}
.compare tbody th{
  font-size:.72rem;font-weight:750;color:var(--subtle);
  text-transform:uppercase;letter-spacing:.08em;
}
.compare td{color:var(--ink-soft);line-height:1.5}
.compare td strong{color:var(--ink)}
.compare-note{margin:14px 4px 0;color:var(--subtle);font-size:.77rem;line-height:1.55;max-width:760px}

/* --------------------------------------------------------------------------
   Homepage hero visual — hundreds of platforms → controlled environment →
   sign-off gate → scoped access
   -------------------------------------------------------------------------- */
.ingest-viz{display:grid;grid-template-columns:.78fr 52px 1.02fr 52px .95fr;gap:18px;align-items:center}
.ingest-col{display:grid;gap:10px;align-content:center}
.wt-brand{display:flex;align-items:center;gap:11px;min-width:0}
.wt-brand img{width:26px;height:26px;flex:0 0 auto;object-fit:contain}
.wt-brand>strong{font-size:1.12rem;letter-spacing:-.02em}
.wt-sep{color:var(--line-strong)}
.window-heading{
  font-family:var(--font-display);font-weight:600;
  font-size:1.02rem;letter-spacing:-.01em;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.src-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.p-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);
  box-shadow:0 2px 8px rgba(25,24,20,.04);
  font-size:.72rem;font-weight:650;color:var(--ink);
  white-space:nowrap;
}
.pc-ico{width:15px;height:15px;flex:0 0 auto;color:var(--ink-soft)}
.p-logo{width:15px;height:15px;flex:0 0 auto;object-fit:contain}
.p-logo.wide{width:24px}
.p-chip.more{background:transparent;border-style:dashed;color:var(--muted);box-shadow:none;align-self:center}
@media(min-width:1051px){
  .src-col .p-chip:nth-child(1){margin-left:26px}
  .src-col .p-chip:nth-child(2){margin-left:36px}
  .src-col .p-chip:nth-child(3){margin-left:46px}
  .src-col .p-chip:nth-child(4){margin-left:40px}
  .src-col .p-chip:nth-child(5){margin-left:30px}
  .src-col .p-chip:nth-child(6){margin-left:16px}
  .src-col .p-chip:nth-child(7){margin-left:6px}
  .src-col .p-chip:nth-child(9){margin-left:4px}
  .src-col .p-chip:nth-child(10){margin-left:14px}
  .src-col .p-chip:nth-child(11){margin-left:28px}
  .src-col .p-chip:nth-child(12){margin-left:40px}
  .src-col .p-chip:nth-child(13){margin-left:46px}
  .src-col .p-chip:nth-child(14){margin-left:38px}
  .src-col .p-chip:nth-child(15){margin-left:26px}
  .src-col .p-chip:nth-child(16){margin-left:12px}
}
.ingest-viz .core-telha{padding:24px 20px;border-radius:16px;text-align:center;display:grid;gap:10px;justify-items:center}
.ingest-viz .core-telha .core-title{
  font-family:var(--font-display);font-weight:550;font-size:1.35rem;letter-spacing:-.015em;
  display:flex;align-items:center;gap:10px;
}
.ingest-viz .core-title .core-logo{width:26px;height:26px}
.ingest-viz .core-lead{font-family:var(--font-display);font-size:.98rem;color:#e7ebfa}
.ingest-viz .core-telha .core-sub{font-family:var(--font-display);font-size:.9rem;line-height:1.5;color:#c3c9e8;max-width:250px}
.ingest-viz .core-telha .core-tags{justify-content:center}

.case-flow{display:grid;gap:0;align-content:center}
.cf-card{
  border:1px solid var(--line-strong);border-radius:14px;
  background:var(--surface);
  box-shadow:0 6px 18px rgba(25,24,20,.05);
  padding:13px 15px;display:grid;gap:7px;
}
.cf-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px}
.cf-head .cf-title{white-space:nowrap}
.cf-num{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  background:var(--navy);color:#fff;
  font-size:.68rem;font-weight:750;
  display:grid;place-items:center;
}
.cf-title{font-family:var(--font-display);font-weight:550;font-size:1.06rem;letter-spacing:-.01em;flex:1;min-width:0}
.cf-ico{width:16px;height:16px;flex:0 0 auto;color:var(--subtle)}
.cf-ico.green{color:var(--status-green)}
.cf-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font-size:.72rem;font-weight:600;color:var(--ink-soft);
}
.cf-row svg{width:13px;height:13px;flex:0 0 auto;color:var(--subtle)}
.cf-row .end{margin-left:auto;color:var(--subtle);display:inline-flex}
.cf-link{position:relative;height:24px;display:flex;align-items:center;justify-content:center}
.cf-link::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1.5px solid var(--navy)}
.cf-check{
  position:relative;z-index:1;
  width:19px;height:19px;border-radius:50%;
  border:1.6px solid var(--status-green);background:var(--surface);color:var(--status-green);
  display:grid;place-items:center;
}
.cf-check svg{width:10px;height:10px}
.cf-note{margin:0;font-size:.73rem;line-height:1.5;color:var(--muted)}
.cf-green{margin:0;font-size:.7rem;font-weight:700;color:var(--status-green)}
.ingest-beams{align-self:stretch;min-height:220px}
.ingest-beams svg{width:100%;height:100%}
.beam{stroke:rgba(13,30,133,.38);fill:none;stroke-width:1.5;stroke-linecap:round}
.beam.flow{stroke-dasharray:3 5;animation:beamflow 2.4s linear infinite}
.ingest-beams path:nth-child(2n).flow{animation-delay:-1.2s}
.beam.solid{stroke:var(--navy);stroke-width:1.8}
@keyframes beamflow{to{stroke-dashoffset:-16}}
.ingest-boundary{
  border:1px dashed var(--line-strong);border-radius:var(--radius-lg);
  padding:14px;display:grid;gap:10px;
  background:rgba(255,255,255,.45);
}
.ingest-boundary-label{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:.64rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
}
.ingest-boundary-label svg{width:11px;height:11px;flex:0 0 auto}
.boundary-blocked{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap}
/* Long captions inside panels must wrap; grid items must be shrinkable
   (fixes min-content overflow on narrow viewports) */
.mem-panel .mini-label{white-space:normal;line-height:1.5}
.memory-flow>*,.ingest-viz>*{min-width:0}
.mem-title{flex-wrap:wrap;row-gap:4px}
.ingest-viz .core-title{white-space:nowrap}
.core-title .core-logo{width:22px;height:22px;flex:0 0 auto;object-fit:contain}

/* --------------------------------------------------------------------------
   Split hero — sealed evidence core (editorial left, architectural object
   right, case card overlay, status rail beneath)
   -------------------------------------------------------------------------- */
.hero-adv{padding:64px 0 10px}
.hero-adv .hero-copy{max-width:1120px;margin-inline:auto;text-align:center}
.hero-adv .actions{justify-content:center}
.hero-adv h1{
  margin:20px 0 0;
  font-family:var(--font-display);font-weight:450;
  font-size:clamp(2.5rem,5vw,3.7rem);line-height:1.08;
  letter-spacing:var(--tracking-display);text-wrap:balance;
}
.hero-adv .lead{margin:22px auto 0;font-size:1.01rem;color:var(--muted);line-height:1.62;max-width:620px}
.hero-adv .actions{margin-top:30px}
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 4px;font-weight:650;font-size:.92rem;
  border-bottom:1.5px solid var(--ink);
}
.link-arrow:hover{color:var(--muted);border-color:var(--muted)}


/* --------------------------------------------------------------------------
   Use-case ticker — label | scrolling matter types | CTA
   -------------------------------------------------------------------------- */
.ticker-section{padding:96px 0}
.ticker-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:44px;align-items:center}
.ticker-label{
  margin:0;max-width:230px;
  font-size:.98rem;font-weight:650;line-height:1.45;letter-spacing:-.01em;
  text-wrap:balance;
}
.ticker-view{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.ticker-list{display:flex;flex-direction:column;gap:10px;will-change:transform}
.ticker-item{
  font-family:var(--font-display);font-weight:450;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.18;
  letter-spacing:-.02em;text-align:center;white-space:nowrap;
  color:var(--muted);
}
.ticker-cta{justify-self:end}
@media(max-width:900px){
  .ticker-section{padding:76px 0}
  .ticker-grid{grid-template-columns:1fr;gap:28px;justify-items:center}
  .ticker-label{text-align:center}
  .ticker-cta{justify-self:center}
}

@media(max-width:900px){
  .navlinks{display:none}
  .nav-toggle{display:inline-flex}
  .nav .actions{display:none}
  .section-head{align-items:flex-start;flex-direction:column;gap:20px}
  .cols3,.mock-grid,.cards,.arch,.case-layout,.security-shell{grid-template-columns:1fr}
  .item{border-right:0;border-bottom:1px solid var(--line);margin:0;padding:30px 0}
  .dark .item,.dark-section .item{border-color:var(--dark-line)}
  .item:last-child{border-bottom:0}
  .item h3{margin-top:26px}
  .flow,.flow.four{grid-template-columns:1fr 1fr}
  .window{margin:34px auto}
  .sidebar{display:none}
  .arch-cols{grid-template-columns:1fr}
  .arch-link{transform:rotate(90deg);justify-self:center}
  .tour{gap:64px}
  .feature{grid-template-columns:1fr;gap:26px}
  .feature.flip .feature-copy{order:0}
  .sh-split{grid-template-columns:1fr}
  .memory-flow{grid-template-columns:1fr}
  .sec-boundary{grid-template-columns:1fr}
  .audit-rail{padding:10px}
  .audit-rail span{writing-mode:horizontal-tb;transform:none}
}
@media(max-width:680px){
  .container{width:min(calc(100% - 24px),var(--max))}
  .hero{padding:64px 0 48px}
  .hero h1{font-size:clamp(2.6rem,11vw,3.8rem)}
  .stage,.stage.tall{min-height:520px}
  .window{width:96%;margin:26px auto}
  .window-top{padding:0 14px}
  .window-body{padding:18px}
  .case-main{padding:18px}
  .case-meta{display:block}
  .case-meta .metric{margin-top:12px}
  .evidence-grid{grid-template-columns:1fr}
  .event{grid-template-columns:52px 15px 1fr;gap:8px}
  .timeline::before{left:62px}
  .use-list{gap:12px 24px;font-size:1rem}
  .flow,.flow.four{grid-template-columns:1fr}
  .section{padding:76px 0}
  .quote{padding:84px 0}
  .cta{padding:88px 0}
  .security-points{grid-template-columns:1fr}
  .security-point:nth-child(odd){border-right:0}
  .security-point:nth-child(even){padding-left:0}
  .footer{flex-direction:column;align-items:flex-start}
}

@media(max-width:1050px){
  .ingest-viz{grid-template-columns:1fr;gap:12px}
  .ingest-viz .ingest-col{width:100%;max-width:560px;margin-inline:auto}
  .src-col{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:7px}
  .src-col .p-chip{padding:6px 11px;font-size:.68rem}
  .ingest-beams{
    align-self:center;min-height:0;
    display:flex;flex-direction:column;align-items:center;
  }
  .ingest-beams svg{display:none}
  .ingest-beams::before{content:"";height:26px;border-left:1.5px dashed rgba(13,30,133,.5)}
  .ingest-beams::after{
    content:"";
    border-left:4.5px solid transparent;border-right:4.5px solid transparent;
    border-top:6px solid var(--navy);
  }
  .case-flow{max-width:420px}
}
@media(max-width:680px){
  .ingest-viz .core-title{white-space:normal;flex-wrap:wrap;justify-content:center;font-size:1.22rem}
  .ingest-viz .core-telha{padding:20px 16px}
  .ingest-boundary{padding:12px}
}
@media(max-width:900px){
  .boundary-blocked{flex-wrap:wrap}
}