/* automemory.ai — shared page components (used by every page except the home runtime bits) */

/* nav dropdowns + mobile menu */
.dd{position:relative}
.dd .menu{position:absolute;top:50px;left:4px;min-width:250px;padding:8px;border-radius:16px;background:rgba(28,28,28,.97);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.dd .menu:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd:hover .menu,.dd.open .menu,.dd:focus-within .menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:10px;font-size:12px;color:#C8C8C8;letter-spacing:.02em}
.menu a:hover{background:rgba(255,255,255,.06);color:#F0F0F8}
.menu a small{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#6A6A6A}
.menu .sep{height:1px;background:rgba(255,255,255,.07);margin:6px 8px}
.nav-link.cur{color:#F0F0F8}
.nav-link.cur:after{content:"";width:4px;height:4px;border-radius:50%;background:var(--acc)}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;color:#F0F0F8;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .25s,opacity .25s}
.mnav{position:fixed;inset:0;z-index:49;background:#171717;padding:110px 32px 40px;display:none;flex-direction:column;gap:6px;overflow:auto}
.mnav.open{display:flex}
.mnav a{font-size:28px;font-weight:800;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.mnav a small{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#6A6A6A;font-weight:400;margin-bottom:4px}
.mnav .mn-sub{display:flex;flex-wrap:wrap;gap:2px 22px;padding:8px 0 14px}
.mnav .mn-sub a{font-size:15px;font-weight:400;color:#B0B0B0;padding:6px 0;border:0}
.mnav .mn-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;padding-top:30px}
body.menu-open{overflow:hidden}
@media (max-width:900px){.burger{display:inline-flex}.nav .btn-pill{display:none}}

/* page scaffolding */
main{position:relative}
.phero{position:relative;padding:190px 0 70px}
.phero .lbl{margin-bottom:26px}
.phero .h1{font-size:clamp(40px,7vw,104px);line-height:.98;max-width:1100px}
.phero .h1 .w{display:inline-block}
.lede{font-size:16px;line-height:1.7;color:#C0C0C0;max-width:640px;margin:36px 0 0}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#B0B0B0}
.pill b{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.sec{position:relative;padding:110px 0}
.sec .lbl{margin-bottom:22px}
.sec .h2{font-size:clamp(36px,5.6vw,80px)}
.sec .h2 .acc{color:var(--acc)}
.light{background:var(--cream);color:#171717}
.light .lbl{color:#7A7A7A}
.light .p,.light .lede{color:#3A3A3A}
.light .pill{border-color:rgba(0,0,0,.14);color:#4A4A4A}
.hd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end;margin-bottom:64px}
.hd .p{font-size:15px;max-width:520px}
.rule{height:1px;background:rgba(255,255,255,.08)}
.light .rule{background:rgba(0,0,0,.1)}
.big{font-size:clamp(26px,3.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.12;max-width:980px}
.big .acc{color:var(--acc)}
.light .big .acc{color:var(--acc-l)}

/* numbered rows (services, principles) */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:90px minmax(0,1.05fr) minmax(0,1fr);gap:40px;padding:48px 0;border-top:1px solid rgba(255,255,255,.08)}
.rows .row:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.light .row,.light .rows .row:last-child{border-color:rgba(0,0,0,.1)}
.row .n{font-size:12px;letter-spacing:.3em;color:var(--acc);padding-top:10px}
.row h3{font-size:clamp(24px,2.6vw,36px);line-height:1.05}
.row h3 b{color:var(--acc)}
.row .one{font-size:15px;line-height:1.6;color:#C0C0C0;margin:16px 0 0;max-width:460px}
.light .row .one{color:#3A3A3A}
.row ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.row li{font-size:13px;line-height:1.6;color:#A0A0A0;display:flex;gap:14px}
.row li:before{content:"—";color:var(--acc);flex:none}
.light .row li{color:#4A4A4A}
.kv{display:flex;flex-direction:column;gap:8px;margin-top:26px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.12)}
.light .kv{border-color:rgba(0,0,0,.14)}
.kv div{display:grid;grid-template-columns:110px 1fr;gap:16px;font-size:12px;line-height:1.5}
.kv span{letter-spacing:.24em;text-transform:uppercase;font-size:9px;color:#6A6A6A;padding-top:3px}
.kv b{font-weight:400;color:#E0E0E0}
.light .kv b{color:#171717}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{position:relative;padding:28px 28px 30px;border-radius:16px;background:#1E1E1E;border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:14px;min-height:220px;transition:border-color .2s,transform .2s}
.tile:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.light .tile{background:#fff;border-color:rgba(0,0,0,.08)}
.light .tile:hover{border-color:rgba(0,0,0,.25)}
.tile .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--acc)}
.tile h3{font-size:22px;line-height:1.1}
.tile .p{font-size:13px}
.tile .ft{margin-top:auto;padding-top:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6A6A6A}
.tile.ghost{background:transparent;border-style:dashed;justify-content:center;align-items:flex-start}
.tile.ghost h3{color:#8A8A8A}

/* status chips */
.st{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:999px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;border:1px solid rgba(255,255,255,.12);color:#B0B0B0}
.st i{width:6px;height:6px;border-radius:50%;background:#5A5A5A}
.st.s-live i{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.st.s-done i{background:#F0F0F8}
.st.s-next i{background:transparent;border:1px solid #8A8A8A}
.light .st{border-color:rgba(0,0,0,.14);color:#4A4A4A}
.light .st.s-done i{background:#171717}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(0,0,0,.1)}
.step{padding:34px 28px 34px 0;border-right:1px solid rgba(0,0,0,.1);display:flex;flex-direction:column;gap:14px}
.step+.step{padding-left:28px}
.step:last-child{border-right:0}
.step .n{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#171717}
.step .n:after{content:"";display:block;width:28px;height:3px;background:var(--acc);margin-top:14px}
.step h3{font-size:18px}
.step .p{font-size:13px}
.step .t{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#7A7A7A}
.sec:not(.light) .steps{border-color:rgba(255,255,255,.08)}
.sec:not(.light) .step{border-color:rgba(255,255,255,.08)}
.sec:not(.light) .step .n{color:#F0F0F8}

/* case study */
.case{padding:56px 0;border-top:1px solid rgba(255,255,255,.08)}
.case:last-of-type{border-bottom:1px solid rgba(255,255,255,.08)}
.case .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.case h3{font-size:clamp(30px,4vw,56px);line-height:1}
.case .sub{font-size:14px;color:#A0A0A0;margin-top:12px;max-width:560px;line-height:1.6}
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.phase{padding:22px;border-radius:14px;background:#1E1E1E;border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:12px;min-height:200px}
.phase .k{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8A8A8A}
.phase .k b{color:var(--acc);font-weight:700}
.phase p{margin:0;font-size:12.5px;line-height:1.6;color:#C0C0C0}
.phase .q{font-style:italic;color:#F0F0F8;border-left:2px solid var(--acc);padding-left:12px}
.phase .ft{margin-top:auto}

/* quotes */
.sig{display:flex;flex-direction:column;gap:14px;padding:26px 28px;border-radius:14px;background:#1E1E1E;border:1px solid rgba(255,255,255,.07)}
.sig .q{font-size:15px;line-height:1.55;color:#F0F0F8;margin:0}
.sig .w{font-size:11px;color:#8A8A8A;letter-spacing:.06em}
.sig .w b{color:#C8C8C8;font-weight:700}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08)}
.faq details{border-bottom:1px solid rgba(255,255,255,.08)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:60px 1fr 40px;gap:20px;align-items:center;padding:24px 0;font-size:17px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-size:11px;letter-spacing:.3em;color:var(--acc);font-weight:400}
.faq summary .x{font-size:20px;color:#8A8A8A;text-align:right;transition:transform .2s}
.faq details[open] summary .x{transform:rotate(45deg)}
.faq .a{padding:0 0 26px 80px;font-size:13.5px;line-height:1.7;color:#A0A0A0;max-width:760px}
.light .faq,.light .faq details{border-color:rgba(0,0,0,.1)}
.light .faq .a{color:#3A3A3A}

/* forms */
.form{display:flex;flex-direction:column;gap:12px}
.form .f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#7A7A7A}
.form input,.form textarea,.form select{height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#171717;color:#F0F0F8;font-size:13px;outline:none;width:100%}
.form textarea{height:140px;padding:14px;resize:vertical;line-height:1.5}
.form input:focus,.form textarea:focus{border-color:var(--acc)}
.form .btn-pill{align-self:flex-start;margin-top:8px;height:46px;padding:0 24px 0 18px}
.form .ok{display:none;font-size:12px;color:var(--acc);letter-spacing:.1em}
.form.sent .ok{display:block}
.form small{font-size:10px;color:#6A6A6A;line-height:1.5}
.light .form input,.light .form textarea{background:#fff;color:#171717;border-color:rgba(0,0,0,.14)}
.light .form label{color:#6A6A6A}

/* contact side */
.side{display:flex;flex-direction:column;gap:12px}
.cc.sm{min-height:76px;padding:18px 22px;gap:16px}
.cc.sm .ic{width:40px;height:40px}
.cc.sm .ttl{font-size:15px}

/* CTA band */
.band{position:relative;padding:120px 0;text-align:center;overflow:hidden}
.band .h2{font-size:clamp(40px,7vw,104px);line-height:.98}
.band .p{max-width:560px;margin:28px auto 0;font-size:15px;color:#C0C0C0}
.band .acts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:40px}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#F0F0F8;font-size:13px;font-weight:700}
.btn-ghost:hover{border-color:#F0F0F8}
.light .btn-ghost{border-color:rgba(0,0,0,.25);color:#171717}
.light .btn-pill{background:#171717;color:#F0F0F8}
.light .btn-pill:hover{background:#000}

/* prose (legal, blog) */
.prose{max-width:760px}
.prose h2{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin:52px 0 16px;font-weight:700}
.prose h2:first-child{margin-top:0}
.prose p{font-size:14px;line-height:1.8;color:#B0B0B0;margin:0 0 16px}
.prose ul{margin:0 0 18px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.prose li{font-size:13.5px;line-height:1.7;color:#A0A0A0;display:flex;gap:14px}
.prose li:before{content:"—";color:var(--acc);flex:none}
.prose strong{color:#F0F0F8;font-weight:700}
.prose a{color:#F0F0F8;border-bottom:1px solid rgba(255,255,255,.25)}
.toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:8px}
.toc a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7A7A7A;padding:6px 0}
.toc a:hover{color:#F0F0F8}
.legal-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:60px}
.legal-meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#6A6A6A;display:flex;flex-wrap:wrap;gap:20px;margin-top:30px}

/* journal */
.post{display:grid;grid-template-columns:140px minmax(0,1fr) 160px;gap:32px;padding:34px 0;border-top:1px solid rgba(255,255,255,.08);align-items:baseline}
.post:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.post .no{font-size:11px;letter-spacing:.3em;color:var(--acc)}
.post h3{font-size:clamp(20px,2.4vw,30px);line-height:1.15}
.post p{margin:10px 0 0;font-size:13px;line-height:1.6;color:#A0A0A0;max-width:600px}
.post .d{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#6A6A6A;text-align:right}

/* reveal */
.rv{opacity:0;transform:translateY(18px)}
html.no-js .rv{opacity:1;transform:none}

/* marquee reuse */
.mq-sm .src{font-size:12px;padding:0 32px;color:#6A6A6A}
.mq-sm{padding:18px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}

/* 404 */
.nf{min-height:80vh;display:flex;align-items:center}

@media (max-width:900px){
  .phero{padding:140px 0 50px}
  .hd,.row,.legal-grid,.post{grid-template-columns:1fr;gap:18px}
  .row .n{padding-top:0}
  .tiles,.tiles.two,.tiles.four,.phases{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;border-top:0}
  .step,.step+.step{padding:26px 0;border-right:0;border-top:1px solid rgba(0,0,0,.1)}
  .sec:not(.light) .step{border-top-color:rgba(255,255,255,.08)}
  .faq summary{grid-template-columns:40px 1fr 30px;font-size:15px}
  .faq .a{padding-left:0}
  .form .f2{grid-template-columns:1fr}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 16px}
  .post .d{text-align:left}
  .sec{padding:80px 0}
}

/* ---- live visual panels ---- */
.vz{position:relative;overflow:hidden;border-radius:16px;background:#1A1A1A;border:1px solid rgba(255,255,255,.08);min-height:260px}
.light .vz{background:#FFFDF9;border-color:rgba(0,0,0,.1)}
.vz.tall{min-height:420px}
.vz.map{min-height:380px}
.vz.auto{min-height:0}
.vz canvas{border-radius:16px}
.vlog{position:absolute;inset:0;padding:22px 24px;display:flex;flex-direction:column;gap:9px;overflow:hidden;font-size:11px;line-height:1.5}
.vlog .vl{display:grid;grid-template-columns:62px 118px 1fr;gap:12px;align-items:baseline;animation:vlin .35s ease both}
.vlog .vl span{color:#5A5A5A}.vlog .vl b{color:#F0F0F8;font-weight:700}.vlog .vl i{font-style:normal;color:#A0A0A0}
.vlog .vl.rv-h b{color:var(--acc)}.vlog .vl.rv-r{border-top:1px dashed rgba(255,255,255,.14);padding-top:9px;margin-top:2px}.vlog .vl.rv-r b{color:var(--acc)}
@keyframes vlin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vz .cap{position:absolute;left:16px;top:14px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#6A6A6A;pointer-events:none}

/* hero split */
.phero.split .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.phero.split .lede{max-width:560px}

/* services v2 */
.svc{padding:64px 0;border-top:1px solid rgba(255,255,255,.08)}
.svc:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.svc-hd{display:flex;align-items:baseline;gap:28px;margin-bottom:28px}
.svc-hd .n{font-size:12px;letter-spacing:.3em;color:var(--acc)}
.svc-hd h3{font-size:clamp(28px,3.6vw,52px);line-height:1}
.svc-hd h3 b{color:var(--acc)}
.svc-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:stretch}
.svc .one{font-size:16px;line-height:1.6;color:#D0D0D0;margin:0;max-width:440px}
.svc .kv{margin-top:28px}
.svc .kv div{grid-template-columns:90px 1fr}

/* principles as tiles */
.pr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pr .t{padding:26px 22px 24px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:18px;min-height:250px;transition:transform .2s,border-color .2s}
.pr .t:hover{transform:translateY(-3px);border-color:rgba(0,0,0,.3)}
.pr .n{font-size:40px;font-weight:800;letter-spacing:-.05em;line-height:1;color:#171717}
.pr .n:after{content:"";display:block;width:24px;height:3px;background:var(--acc);margin-top:12px}
.pr h3{font-size:17px;line-height:1.2}
.pr p{margin:0;font-size:12px;line-height:1.6;color:#4A4A4A}
.pr .g{margin-top:auto;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#8A8A8A}

.founder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mono-av{width:56px;height:56px;border-radius:14px;background:#262626;border:1px solid rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--acc)}

@media (max-width:900px){
  .phero.split .wrap{grid-template-columns:1fr}
  .svc-body{grid-template-columns:1fr}
  .svc-hd{flex-direction:column;gap:8px}
  .pr{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr}
  .vz.tall{min-height:340px}
  .vlog .vl{grid-template-columns:50px 1fr;gap:6px 12px}.vlog .vl i{grid-column:1/-1}
}

/* v5 */
.nav .btn-pill{background:#171717;color:#F0F0F8;border-color:rgba(255,255,255,.18);transition:background .2s,color .2s}
.nav .btn-pill:hover{background:#F0F0F8;color:#171717}
.phero .h1{font-size:clamp(44px,8vw,108px);line-height:.96}
.phero.split .h1{font-size:clamp(40px,5.6vw,84px)}
.h1 .w.acc,.chero .h1 .w.acc,.phero .h1 .w.acc{color:var(--acc)}
.vz.tall .vlog{padding-top:44px}