/* Octa Intelligence · octaintel.xyz. Brand Guidelines v1 (14 Oct 2026): night and cream, Newsreader / Plus Jakarta Sans / IBM Plex Mono,
   the solid octagon turning clockwise 20 s a turn (still for reduced motion). No colour here that the book does not give. */
:root{
  --bg:#0A0A0E; --text:#F2F0E9; --soft:rgba(242,240,233,.78); --muted:rgba(242,240,233,.55);
  --panel:rgba(242,240,233,.022); --panel-2:rgba(242,240,233,.04); --border:rgba(242,240,233,.08); --border2:rgba(242,240,233,.2);
  --serif:'Newsreader',Georgia,serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:min(1180px,100% - 48px); --bar:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 20px);-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font:400 16.5px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(to right,transparent 0 calc(12.5% - 1px),rgba(242,240,233,.035) calc(12.5% - 1px) 12.5%)}
main,footer,.preview{position:relative;z-index:1}
a{color:inherit}
img,svg{display:block}
.wrap{width:var(--wrap);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:50;padding:10px 14px;background:var(--text);color:var(--bg);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* the mark: the Seed's solid octagon, clockwise, one turn in 20 s, linear */
.spin{animation:oi-spin 20s linear infinite;transform-origin:50% 50%;transform-box:fill-box}
@keyframes oi-spin{to{transform:rotate(360deg)}}
.mk{width:34px;height:34px;flex:none;overflow:visible}

/* preview strip (until the blockers are signed off) */
.preview{border-bottom:1px solid var(--border);background:var(--panel-2);font:400 .68rem/1.5 var(--mono);letter-spacing:.06em;color:var(--muted);padding:8px 0;text-align:center}

/* header */
header.top{position:sticky;top:0;z-index:20;background:rgba(10,10,14,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.bar{display:flex;align-items:center;gap:24px;min-height:var(--bar)}
.lockup{display:flex;align-items:center;gap:14px;text-decoration:none}
.lk-rule{width:1px;height:30px;background:var(--border2)}
.lk-words b{display:block;font:400 1.3rem/1 var(--serif)}
.lk-words b em,.foot-name b em{font-style:italic;font-weight:300}
.lk-words small{display:block;margin-top:5px;font:400 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{position:relative;font:400 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 0}
.nav a:hover,.nav a[aria-current=page]{color:var(--text)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--text)}
.menu{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--border2);border-radius:4px;background:transparent;color:var(--text);cursor:pointer}
.menu span:not(.sr){display:block;width:16px;height:1px;margin:5px auto;background:currentColor;transition:transform .18s ease}
.menu[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu[aria-expanded=true] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* type */
.eyebrow,.col-label{margin:0 0 16px;font:400 .72rem/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:300}
h1{font-size:clamp(2.8rem,6.2vw,5.6rem);line-height:1.02;letter-spacing:-.015em;margin-bottom:24px}
h2{font-size:clamp(2rem,3.8vw,3.3rem);line-height:1.08;letter-spacing:-.01em}
h3{font-size:1.32rem;line-height:1.25}
p{margin:0 0 16px}
.lead{font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.7;color:var(--soft);max-width:40em}
.num{font:400 .7rem/1 var(--mono);letter-spacing:.12em;color:var(--muted)}

/* buttons and links */
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 22px;border:1px solid var(--text);border-radius:3px;font:600 .82rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border2)}
.btn-ghost:hover{border-color:var(--text)}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:6px 0;border-bottom:1px solid var(--border2);font-weight:600;font-size:.84rem;text-decoration:none}
.more:hover{border-color:var(--text)}
.btn span,.more span{transition:transform .16s ease}
.btn:hover span,.more:hover span{transform:translateX(3px)}

/* hero */
.hero{padding:clamp(64px,10vw,128px) 0 clamp(56px,8vw,104px);border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
.hero-v .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero-v h1{font-size:clamp(2.8rem,5.1vw,5rem)}
/* the hero: the mark and the five layers (15 Oct 2026) */
.lv{position:relative;margin:0;width:100%;max-width:660px;justify-self:end;display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:stretch}
.lv-pic{position:relative;aspect-ratio:420/480}
.lv-svg{width:100%;height:100%;overflow:visible}
.lv-ring{fill:none;stroke:var(--lc);stroke-opacity:.6;stroke-width:1;vector-effect:non-scaling-stroke}
.lv-lead{fill:none;stroke:var(--lc);stroke-opacity:.5;stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.lv-node{fill:var(--lc)}
.lv-pulse{fill:none;stroke:var(--text);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:190px 240px;animation:lv-pulse 6s ease-out infinite;opacity:0}
@keyframes lv-pulse{0%{transform:scale(1);opacity:.5}75%{opacity:.06}100%{transform:scale(2.35);opacity:0}}
.lv .mk-core{position:absolute;left:45.24%;top:50%;width:36%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%)}
.lv-rows{position:relative}
.lv-row{position:absolute;left:0;right:0;top:var(--y);transform:translateY(-50%);display:flex;gap:10px;align-items:center;padding-left:10px;text-decoration:none;color:var(--text)}
.lv-row:hover b{text-decoration:underline;text-underline-offset:4px}
.lv-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:#121216}
.lv-ic svg{display:block;width:24px;height:24px}
.lv-t b{display:flex;gap:8px;align-items:baseline;font:400 1.15rem/1.15 var(--serif)}
.lv-t b i{font:500 .66rem var(--mono);font-style:normal;color:var(--lc)}
.lv-t small{display:block;margin-top:2px;font:400 .58rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* sections */
.sec{padding:clamp(72px,9vw,120px) 0;border-bottom:1px solid var(--border)}
.sec-alt{background:var(--panel)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:start}
.sec-body{color:var(--soft);font-size:1.06rem;padding-top:6px}
.sec-body p{max-width:36em}
.sec-body .more{margin-top:12px}

.caps{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border2)}
.caps li{display:flex;flex-direction:column;gap:22px;padding:28px 24px 8px 0}
.caps li+li{padding-left:24px;border-left:1px solid var(--border)}
.caps b{font:400 clamp(1.5rem,2.4vw,2.1rem)/1.1 var(--serif)}

.layers{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.layers li{position:relative;padding:30px 28px 26px;border:1px solid var(--border);border-radius:4px;background:var(--panel)}
.layer-n{display:block;margin-bottom:26px;font:300 italic 3.4rem/1 var(--serif);color:var(--muted)}
.layers h3{margin-bottom:12px}
.layers p{color:var(--soft);font-size:.96rem;margin:0}
.closing{margin:40px 0 0;padding-top:24px;border-top:1px solid var(--border);font:italic 300 clamp(1.25rem,2vw,1.6rem)/1.4 var(--serif);max-width:38em}

.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:64px}
.aspects,.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--border2)}
.aspects li,.svc li{display:flex;align-items:center;gap:16px;min-height:54px;border-bottom:1px solid var(--border);font:400 1.18rem/1.2 var(--serif)}
.aspects i{width:12px;height:12px;flex:none;background:var(--c);clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.svc .num{width:22px}
.status{display:flex;gap:12px;align-items:baseline;margin:36px 0 0;font:400 .8rem/1.6 var(--mono);letter-spacing:.04em;color:var(--soft)}
.status i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--text);transform:translateY(-1px)}

.app-card{margin-top:56px;padding:36px;border:1px solid var(--border2);border-radius:4px;background:var(--panel-2);max-width:720px}
.app-card h3{font-size:2rem;margin-bottom:12px}
.app-card p:not(.eyebrow){color:var(--soft)}
.app-card .more{margin-top:12px}

.cta{text-align:center}
.cta-in{display:flex;flex-direction:column;align-items:center}
.mk-cta{width:56px;height:56px;margin-bottom:32px}
.cta h2{max-width:16em}
.cta .lead{margin:22px auto 0}
.cta .actions{justify-content:center}

.grid4{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border2)}
.grid4 li{padding:26px 22px 30px 0;border-bottom:1px solid var(--border)}
.grid4 li:not(:nth-child(4n+1)){padding-left:22px;border-left:1px solid var(--border)}
.grid4 h3{margin:18px 0 10px;font-size:1.22rem}
.grid4 p{margin:0;color:var(--soft);font-size:.94rem}

.layer-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px}
.layer-big{display:block;font:300 italic clamp(5rem,10vw,8.5rem)/.9 var(--serif);color:var(--muted);margin-bottom:12px}
.layer-sec h2{margin-bottom:22px}
.layer-sec p{color:var(--soft);font-size:1.06rem;max-width:36em}
.layer-sec .eyebrow{font-size:.72rem;color:var(--muted)}
.layer-sec .support{font-size:.82rem;color:var(--muted)}
.support{margin-top:24px;padding-left:16px;border-left:1px solid var(--border2);font:400 .82rem/1.6 var(--mono);color:var(--muted)}

.statement{max-width:820px}
.statement h2{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:24px}
.price h2{font-size:clamp(2.4rem,5vw,4.4rem)}

.svc-table{width:100%;margin-top:56px;border-collapse:collapse;font-size:1rem}
.svc-table th{padding:0 0 14px;text-align:left;font:400 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border2)}
.svc-table td{padding:16px 0;border-bottom:1px solid var(--border);font:400 1.15rem/1.3 var(--serif)}
.svc-table td:last-child,.svc-table th:last-child{text-align:right}
.pill{display:inline-block;padding:5px 10px;border-radius:999px;font:400 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pill-ok{background:var(--text);color:var(--bg)}
.pill-dev{border:1px solid var(--border2);color:var(--text)}
.pill-plan{border:1px dashed var(--border2);color:var(--muted)}

.roles{margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.roles div{padding:24px;border:1px solid var(--border);border-radius:4px}
.roles .is-us{border-color:var(--border2);background:var(--panel-2)}
.roles dt{font:400 1.3rem/1.2 var(--serif);margin-bottom:10px}
.roles dd{margin:0;color:var(--soft);font-size:.94rem}
.after{margin:40px 0 0;max-width:46em;color:var(--soft);font-size:1.06rem}

.feature{display:grid;grid-template-columns:minmax(0,1fr);max-width:760px}
.feature h2{margin-bottom:22px}
.feature p:not(.eyebrow):not(.status){color:var(--soft);font-size:1.06rem}

.list-rows{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--border2)}
.list-rows li{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--border)}
.list-rows h3{font-size:1.32rem}
.list-rows p{margin:0;color:var(--soft)}

.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{position:relative;padding:28px 24px 0 0;border-top:1px solid var(--border2)}
.steps li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--text)}
.steps h3{margin:16px 0 10px;font-size:1.5rem}
.steps p{margin:0;color:var(--soft);font-size:.95rem}

.tiers{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tiers li{display:flex;flex-direction:column;padding:28px;border:1px solid var(--border);border-radius:4px;background:var(--panel)}
.tiers li.tier-3{border-color:var(--border2)}
.tiers h3{margin-bottom:12px;font-size:1.4rem}
.tiers p:not(.eyebrow){color:var(--soft);font-size:.95rem}
.tier-bar{display:flex;gap:6px;margin-top:auto;padding-top:18px}
.tier-bar i{display:block;width:28px;height:3px;background:var(--text)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;align-items:start}
.before{position:sticky;top:calc(var(--bar) + 28px);padding:28px;border:1px solid var(--border);border-radius:4px;background:var(--panel)}
.before p:not(.eyebrow){color:var(--soft)}
.before .more{margin-top:8px}
.enquiry{display:grid;gap:26px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin:0;padding:0;border:0;min-width:0}
.field label,.field legend{display:block;margin-bottom:9px;font-weight:600;font-size:.9rem}
.opt{font-weight:400;color:var(--muted)}
.help{margin:-4px 0 10px;color:var(--muted);font-size:.86rem}
input[type=text],input[type=email],input[type=url],textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--border2);border-radius:3px;background:var(--panel-2);color:var(--text);font:400 1rem/1.5 var(--sans)}
textarea{resize:vertical;min-height:160px}
input:focus,textarea:focus{outline:none;border-color:var(--text)}
.field.bad input,.field.bad textarea{border-color:var(--text);border-style:dashed}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{position:relative;display:inline-flex;margin:0!important;font-weight:400!important;cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;border:1px solid var(--border2);border-radius:3px;font-size:.9rem;transition:background .14s ease,border-color .14s ease,color .14s ease}
.choice:hover span{border-color:var(--text)}
.choice input:checked+span{background:var(--text);color:var(--bg);border-color:var(--text)}
.choice input:focus-visible+span{outline:2px solid var(--text);outline-offset:2px}
.field.bad .choice span{border-style:dashed}
.fine{margin:0;color:var(--muted);font-size:.86rem}
.form-error{margin:0;padding:12px 14px;border:1px dashed var(--border2);border-radius:3px;color:var(--text);font-size:.9rem}
.enquiry .btn{justify-self:start}
.enquiry .btn[disabled]{opacity:.6;cursor:wait;transform:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.sent{padding:36px;border:1px solid var(--border2);border-radius:4px;background:var(--panel-2)}
.sent .lead{margin:0;font:italic 300 1.6rem/1.4 var(--serif);color:var(--text)}

/* privacy */
.read{max-width:760px}
.draft{margin-bottom:48px;padding:20px 22px;border:1px dashed var(--border2);border-radius:4px;background:var(--panel-2)}
.draft p:last-child{margin:0;color:var(--soft);font-size:.92rem}
.updated{font:400 .78rem/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.doc h2{font-size:1.7rem;margin:44px 0 14px}
.doc h2:first-child{margin-top:0}
.doc p{color:var(--soft)}
.placeholder{font-family:var(--mono);font-size:.86em;color:var(--muted)}

/* footer */
.foot{padding:48px 0 56px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.foot-name{display:flex;align-items:center;gap:14px}
.foot-name p{margin:0;color:var(--muted);font-size:.9rem}
.foot-name b{font:400 1.12rem/1 var(--serif);color:var(--text)}
.mk-foot{width:26px;height:26px}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 26px}
.foot-links a{font:400 .7rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--text)}

/* smaller screens */
@media (max-width:1000px){
  .hero-v .hero-grid{grid-template-columns:1fr}
  .lv{justify-self:center}
  .grid4{grid-template-columns:1fr 1fr}
  .grid4 li:not(:nth-child(4n+1)){padding-left:0;border-left:0}
  .grid4 li:nth-child(even){padding-left:22px;border-left:1px solid var(--border)}
  .roles{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .before{position:static}
}
@media (max-width:760px){
  :root{--wrap:calc(100% - 32px);--bar:64px}
  .menu{display:block}
  .nav{position:fixed;inset:var(--bar) 0 auto;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;background:var(--bg);border-bottom:1px solid var(--border)}
  .preview + header .nav{inset:var(--bar) 0 auto}
  .nav.open{display:flex}
  .nav a{padding:16px 2px;border-bottom:1px solid var(--border);font-size:.78rem}
  .nav a[aria-current=page]::after{display:none}
  .lk-words b{font-size:1.15rem}
  .sec-head,.layer-sec,.two-cols{grid-template-columns:1fr}
  .two-cols{gap:40px}
  .caps{grid-template-columns:1fr 1fr}
  .caps li:nth-child(3){padding-left:0;border-left:0}
  .caps li{padding-bottom:24px;border-bottom:1px solid var(--border)}
  .layers,.tiers,.roles{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .grid4 li:nth-child(even){padding-left:0;border-left:0}
  .list-rows li{grid-template-columns:40px 1fr;gap:6px 16px}
  .list-rows p{grid-column:2}
  .steps{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .app-card,.sent{padding:26px}
  .foot .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .spin{animation:none}
  .lv-pulse{animation:none}
  html{scroll-behavior:auto}
  .btn,.btn span,.more span{transition:none}
}

/* Operations (15 Oct 2026): real screens, the apps with their icons, the Octa Models example */
.shot{margin:40px 0 0}
.shot-frame{max-width:800px;border:1px solid var(--border2);border-radius:10px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.shot-frame img{display:block;width:100%;height:auto}
.shot figcaption{max-width:800px;margin-top:12px;font:400 .76rem/1.6 var(--mono);color:var(--muted)}
.ops-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:56px}
.ops-apps{list-style:none;margin:0;padding:0;border-top:1px solid var(--border2)}
.ops-apps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--border)}
.opic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#121216;border:1px solid var(--border);color:var(--ac);--oic-bg:#121216}
.opic svg{width:30px;height:30px}
.ops-apps b{display:block;font:400 1.08rem/1.25 var(--serif)}
.ops-apps p{margin:4px 0 0;color:var(--soft);font-size:.86rem;line-height:1.5}
.example{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--border2)}
.example>li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:24px;padding:32px 0;border-bottom:1px solid var(--border)}
.example h3{font-size:1.5rem;margin-bottom:10px}
.example p{color:var(--soft);max-width:44em;margin:0}
.example .shot{margin-top:26px}
.grid3{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid3 li{padding:26px;border:1px solid var(--border);border-radius:4px;background:var(--panel)}
.grid3 h3{margin-bottom:10px;font-size:1.3rem}
.grid3 p{margin:0;color:var(--soft);font-size:.95rem}
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.shots2 .shot{margin-top:48px}
@media (max-width:1000px){.ops-grid{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}.shots2{grid-template-columns:1fr}}
@media (max-width:760px){.ops-grid,.grid3{grid-template-columns:1fr}.example>li{grid-template-columns:1fr;gap:10px}.shot-frame{border-radius:8px}}

/* The five layers (15 Oct 2026): as Octa Models draws them (its css/site.css · .ly, .lyb), so the two read as one system */
.lyb-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--border2);border-left:1px solid var(--border)}
.lyb{display:flex;flex-direction:column;gap:8px;padding:24px 20px 26px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);text-decoration:none;color:var(--text);transition:background .2s;position:relative}
.lyb::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--lc);opacity:.85}
.lyb:hover{background:var(--panel-2)}
.lyb-n{font:500 .7rem var(--mono);color:var(--lc)}
.lyb-ic svg{width:40px;height:40px}
.lyb b{font:400 1.35rem/1.2 var(--serif)}
.lyb small{font:500 .64rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lyb p{margin:2px 0 0;color:var(--soft);font-size:.9rem;line-height:1.55}
.ly-list{margin-top:72px}
.ly{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(22px,4vw,48px);padding:42px 0;border-top:1px solid var(--border);scroll-margin-top:110px}
.ly-pic{position:relative;width:120px;height:120px;border:1px solid var(--border2);border-radius:24px;display:grid;place-items:center;background:#121216}
.ly-pic svg{width:64px;height:64px}
.ly-n{position:absolute;top:-12px;left:-12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--lc);color:#121319;font:600 .78rem var(--mono)}
.ly-sub{display:block;margin-bottom:6px;font:500 .7rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lc)}
.ly h3{font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.15;margin-bottom:12px}
.ly-lead{font:italic 300 1.3rem/1.4 var(--serif);color:var(--text)!important}
.ly p{color:var(--soft);max-width:46em}
.ly-where{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:5px 12px;border:1px solid var(--border2);border-radius:999px;font:500 .64rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.ly-where::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lc)}
.tier-layers{display:flex;gap:5px;margin-top:auto;padding-top:18px}
.tier-layers i{display:block;width:22px;height:4px;border-radius:2px;background:var(--lc);opacity:.16}
.tier-layers i.on{opacity:1}
@media (max-width:1000px){.lyb-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.lyb-row{grid-template-columns:1fr}.ly{grid-template-columns:1fr}.ly-pic{width:96px;height:96px}}
/* the condition under every call to talk about a project (15 Oct 2026) */
.cta-note{margin:28px auto 0;max-width:40em;text-align:center;font:400 .78rem/1.7 var(--mono);color:var(--muted)}
.cta-note i{display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--text);vertical-align:2px}
.cta-note a,.lead a,.sec-body a{color:inherit;text-underline-offset:3px}
@media (max-width:760px){.lv .mk-core{left:50%}.lv-svg{transform:translateX(4.76%)}.lv{grid-template-columns:1fr;max-width:420px}.lv-pic{max-width:340px;margin:0 auto;width:100%}.lv-svg .lv-lead,.lv-svg .lv-node{display:none}.lv-rows{display:grid;gap:14px;margin-top:20px}.lv-row{position:static;transform:none;padding-left:0}}
/* the reality layer and See. Know. Act. on truth (15 Oct 2026) */
.lyb-row{grid-template-columns:repeat(6,minmax(0,1fr))}
.ska{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border2)}
.ska li{padding:30px 28px 30px 0}
.ska li+li{padding-left:28px;border-left:1px solid var(--border)}
.ska h3{font-size:clamp(2rem,3.4vw,2.8rem);font-style:italic;font-weight:300;margin-bottom:14px}
.ska p{color:var(--soft);margin:0 0 20px;max-width:30em}
.ska-ly{display:flex;flex-wrap:wrap;gap:8px}
.ska-ly span{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border:1px solid var(--border2);border-radius:999px}
.ska-ly svg{width:20px;height:20px}
.ska-ly small{font:500 .62rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lc)}
@media (max-width:1000px){.lyb-row{grid-template-columns:repeat(2,minmax(0,1fr))}.ska{grid-template-columns:1fr}.ska li+li{padding-left:0;border-left:0;border-top:1px solid var(--border)}}
@media (max-width:760px){.lyb-row{grid-template-columns:1fr}}
/* Sign in with Octa in the bar (15 Oct 2026; the button itself: vendor/octa-signin, brand/sign-in-with-octa v1) */
.bar .osi-icon{display:none!important}
.bar .octa-signin{flex:none}
@media (max-width:860px){ .bar .osi-full{display:none!important} .bar .osi-icon{display:inline-flex!important} }