:root{
  --bg:#F6F6F4; --card:#FFFFFF; --ink:#1C1F23; --ink-2:#444A52; --muted:#6B7178;
  --plum:#C2410C; --plum-2:#9A3412; --plum-soft:#EFEEEA; --gold:#FB923C; --gold-soft:#FFEDD5;
  --rule:#E3E3DF;
  --display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Figtree","Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171A; --card:#1D2024; --ink:#EEF0F2; --ink-2:#C9CDD2; --muted:#9AA0A7;
    --plum:#FB923C; --plum-2:#FDBA74; --plum-soft:#202327; --gold:#FDBA74; --gold-soft:#3A2A1C; --rule:#2E3237;
  }
}
:root[data-theme="dark"]{
  --bg:#15171A; --card:#1D2024; --ink:#EEF0F2; --ink-2:#C9CDD2; --muted:#9AA0A7;
  --plum:#FB923C; --plum-2:#FDBA74; --plum-soft:#202327; --gold:#FDBA74; --gold-soft:#3A2A1C; --rule:#2E3237;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px)); scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.05rem; line-height:1.6}
img{max-width:100%; display:block}
a{color:var(--plum)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display); line-height:1.08; margin:0 0 .55em; letter-spacing:-0.025em; font-weight:700}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.3rem; letter-spacing:-0.01em}
p{margin:0 0 1em; max-width:66ch}
.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.lede{font-size:1.2rem; color:var(--ink-2); max-width:58ch}
.small{font-size:.9rem; color:var(--muted)}

header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:1rem}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-0.02em}
.brand svg{width:30px; height:30px}
nav.main{display:flex; gap:1.6rem; font-weight:500; font-size:.97rem}
nav.main a{color:var(--ink-2); text-decoration:none}
nav.main a:hover{color:var(--plum)}
.btn{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--display); font-weight:600; font-size:1rem; padding:.78rem 1.3rem; border-radius:999px; text-decoration:none; border:1.5px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer}
.btn.solid{background:var(--plum); border-color:var(--plum); color:#fff}
.btn.solid:hover{background:var(--plum-2); border-color:var(--plum-2)}
:root[data-theme="dark"] .btn.solid{color:#15171A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.solid{color:#15171A}}
@media (max-width:860px){nav.main{display:none}}

/* hero: the work is the hero */
.hero{padding-bottom:0}
.hero h1{max-width:15ch}
.hero .row{display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end}
@media (max-width:860px){.hero .row{grid-template-columns:1fr}}
.hero .cta{display:flex; gap:.8rem; flex-wrap:wrap}
.frame{background:var(--card); border:1px solid var(--rule); border-radius:12px; overflow:hidden; box-shadow:0 18px 40px -24px rgba(28,31,35,.4)}
.frame .bar{display:flex; align-items:center; gap:.35rem; padding:.45rem .6rem; border-bottom:1px solid var(--rule); font-size:.74rem; color:var(--muted)}
.frame .bar i{width:7px; height:7px; border-radius:50%; background:var(--rule); display:block}
.frame .bar span{min-width:0; margin-left:.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.frame img{aspect-ratio:16/10; width:100%; height:auto; object-fit:cover; object-position:top}

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem 2rem; margin-top:2.5rem}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}
.svc h3{padding-top:1rem; border-top:3px solid var(--plum)}
.svc p{color:var(--ink-2); font-size:1rem}

.trust{list-style:none; padding:0; margin:1.8rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--ink-2)}
.trust li{display:flex; align-items:center; gap:.5rem}
.trust li::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--plum)}
.svc .num{font-family:var(--display); font-weight:700; color:var(--plum); font-size:.95rem}
.svc .from{font-family:var(--display); font-weight:600; color:var(--ink)}
.principle{background:#1C1F23; color:#EEF0F2}
.principle .lede,.principle p{color:#C9CDD2}
.principle h2{color:#fff}
.principle-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,4vw,4rem); align-items:start}
@media (max-width:860px){.principle-grid{grid-template-columns:1fr}}
.hero-video{position:relative; margin:clamp(2.2rem,5vw,3.4rem) 0 0; border-radius:18px; overflow:hidden; background:#1C1F23; box-shadow:0 30px 60px -30px rgba(28,31,35,.55); aspect-ratio:16/9}
.hero-video video{display:block; width:100%; height:100%; object-fit:cover}
.sound{position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:.45rem; font-family:var(--display); font-weight:600; font-size:.95rem; padding:.6rem 1rem; border-radius:999px; border:0; background:rgba(255,255,255,.94); color:#1C1F23; cursor:pointer}
.sound:hover{background:#fff}
.sound[hidden]{display:none}
.svc ul.get{margin:.2rem 0 1rem; padding-left:1.1rem; font-size:.97rem; color:var(--ink-2)}
.svc ul.get li{margin-bottom:.35rem}
.cc{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); margin-top:2.2rem; align-items:start}
@media (max-width:900px){.cc{grid-template-columns:1fr}}
.cc-mock{position:relative; display:grid; grid-template-columns:150px 1fr; background:var(--card); border:1px solid var(--rule); border-radius:16px; overflow:hidden; box-shadow:0 18px 40px -24px rgba(28,31,35,.4); font-size:.92rem}
@media (max-width:520px){.cc-mock{grid-template-columns:1fr}.cc-side{display:none!important}}
.cc-side{background:#1C1F23; color:#C9CDD2; padding:1.1rem .9rem; display:flex; flex-direction:column; gap:.2rem; font-family:var(--display)}
.cc-side b{color:#fff; margin-bottom:.7rem}
.cc-side span{padding:.4rem .55rem; border-radius:7px}
.cc-side .on{background:#33373C; color:#fff}
.cc-main{padding:1.1rem 1.2rem 2.2rem}
.cc-h{font-family:var(--display); font-weight:700; font-size:1.2rem; margin-bottom:.7rem}
.cc-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.8rem}
.cc-kpis div{border:1px solid var(--rule); border-radius:10px; padding:.55rem .65rem; color:var(--muted); font-size:.8rem; line-height:1.3}
.cc-kpis b{display:block; font-family:var(--display); font-size:1.1rem; color:var(--ink)}
.cc-row{display:flex; align-items:center; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--rule)}
.cc-row em{margin-left:auto; font-style:normal; font-size:.78rem; color:var(--muted)}
.cc-row .t{font-family:var(--display); font-weight:600; font-size:.74rem; padding:.12rem .5rem; border-radius:999px; background:var(--plum-soft); color:var(--ink-2); white-space:nowrap}
.cc-row .t.new{background:#FFEDD5; color:#9A3412}
.cc-row .t.warn{background:#FEE2E2; color:#991B1B}
.cc-note{position:absolute; right:12px; bottom:8px; margin:0; font-size:.75rem; color:var(--muted)}
.mods{display:grid; gap:1.3rem}
.mods h3{font-size:1.1rem; margin-bottom:.3rem; padding-left:.8rem; border-left:3px solid var(--plum)}
.mods p{margin:0; color:var(--ink-2); font-size:.98rem}
.headshot{width:160px; height:160px; border-radius:50%; object-fit:cover; border:4px solid var(--card); box-shadow:0 10px 30px -15px rgba(28,31,35,.5)}
/* work detail */
.work{background:var(--plum-soft)}
.proj{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding:2.6rem 0; border-bottom:1px solid var(--rule)}
.proj:last-child{border-bottom:0}
.proj:nth-child(even) .shot{order:2}
@media (max-width:860px){.proj{grid-template-columns:1fr}.proj:nth-child(even) .shot{order:0}}
.proj .kind{font-family:var(--display); font-weight:600; color:var(--plum); margin-bottom:.35rem}
.proj ul{margin:.4rem 0 1rem; padding-left:1.1rem; color:var(--ink-2)}
.proj li{margin-bottom:.3rem}
.proj .visit{font-family:var(--display); font-weight:600}

/* pricing */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.6rem; display:flex; flex-direction:column}
.tier.feature{background:#1C1F23; border:2px solid #FB923C; color:#fff}
.tier.feature .fit,.tier.feature li{color:#C9CDD2}
.price{font-family:var(--display); font-weight:700; font-size:2.4rem; letter-spacing:-0.03em; margin:.1rem 0}
.price span{font-size:1rem; font-weight:500; opacity:.75; letter-spacing:0}
.fit{color:var(--muted); font-size:.95rem; margin-bottom:1rem}
.tier ul{margin:0; padding-left:1.1rem; font-size:.96rem}
.tier li{margin-bottom:.35rem}
.pill{align-self:flex-start; font-family:var(--display); font-weight:600; font-size:.82rem; background:var(--gold); color:#1C1F23; padding:.2rem .7rem; border-radius:999px; margin-bottom:.7rem}
.block-title{margin-top:3.5rem}
.table-scroll{overflow-x:auto; margin-top:1.2rem; background:var(--card); border:1px solid var(--rule); border-radius:16px}
table{width:100%; border-collapse:collapse; font-size:.98rem}
th,td{text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--rule); vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:var(--display); font-weight:600; color:var(--muted)}
td:first-child{font-family:var(--display); font-weight:600; min-width:11rem}
td:nth-child(2){font-family:var(--display); font-weight:700; white-space:nowrap}
td:last-child{color:var(--ink-2); min-width:20rem}

/* care */
.care{background:var(--card); border-block:1px solid var(--rule)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--rule); border-radius:16px; padding:1.6rem; background:var(--bg)}
.plan ul{padding-left:1.1rem; font-size:.96rem; margin:.8rem 0 0}
.plan li{margin-bottom:.35rem}

/* estimator */
.est{display:grid; grid-template-columns:1.25fr .75fr; gap:2rem; margin-top:2rem; align-items:start}
@media (max-width:900px){.est{grid-template-columns:1fr}}
.est fieldset{border:1px solid var(--rule); border-radius:16px; padding:1rem 1.3rem 1.1rem; margin:0 0 1rem; background:var(--card)}
.est legend{font-family:var(--display); font-weight:700; padding:0 .4rem}
.opt{display:flex; gap:.6rem; align-items:flex-start; padding:.38rem 0; font-size:.98rem; cursor:pointer}
.opt input{margin-top:.3rem; accent-color:var(--plum); width:1.05rem; height:1.05rem; flex:none}
.opt .amt{margin-left:auto; font-family:var(--display); font-weight:600; white-space:nowrap; padding-left:1rem}
.total{position:sticky; top:calc(90px + env(safe-area-inset-top,0px)); background:#1C1F23; color:#F1ECF4; border-radius:16px; padding:1.7rem; font-family:var(--display)}
.total .row{display:flex; justify-content:space-between; align-items:baseline; padding:.65rem 0; border-bottom:1px solid #33373C}
.total .big{font-size:2rem; font-weight:700; color:var(--gold); letter-spacing:-0.02em}
.total p{font-family:var(--body); font-size:.9rem; color:#A9AFB5; margin:1rem 0 0}
.total .disc{display:flex; gap:.5rem; align-items:center; margin-top:.9rem; font-size:.94rem; cursor:pointer}
.total .disc input{accent-color:#FB923C}

/* process */
.steps{list-style:none; counter-reset:s; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s}
.steps li::before{content:counter(s); display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--gold-soft); color:var(--ink); font-family:var(--display); font-weight:700; margin-bottom:.8rem}
.steps p{font-size:.98rem; color:var(--ink-2)}

/* founder */
.founder{display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:start}
@media (max-width:700px){.founder{grid-template-columns:1fr}}

.faq details{border-bottom:1px solid var(--rule); padding:1.05rem 0}
.faq summary{font-family:var(--display); font-weight:600; font-size:1.1rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--plum); font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.7rem 0 0; color:var(--ink-2)}

.contact{background:#1C1F23; color:#fff; border-radius:28px; padding:clamp(2.2rem,5vw,3.6rem); margin-bottom:3rem}
.contact h2{color:#fff; max-width:18ch}
.contact p{color:#C9CDD2}
.contact .btn{background:#FB923C; border-color:#FB923C; color:#1C1F23}
.contact .btn:hover{background:#fff; border-color:#fff}
footer.foot{padding:1.5rem 0 2.5rem; font-size:.9rem; color:var(--muted)}
footer.foot .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem}

/* ===== multi-page additions ===== */
.skip{position:absolute; left:-999px; top:8px; background:var(--card); padding:.5rem 1rem; border-radius:8px; z-index:99}
.skip:focus{left:12px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
nav.main a[aria-current="page"]{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--plum)}
.top-cta{display:flex; align-items:center; gap:.6rem}
.mnav{display:none; position:relative}
.mnav summary{list-style:none; cursor:pointer; width:44px; height:44px; display:grid; place-content:center; gap:5px; border-radius:10px; border:1px solid var(--rule)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px}
.mnav nav{position:absolute; right:0; top:52px; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:.5rem; min-width:200px; box-shadow:0 18px 40px -20px rgba(28,31,35,.4); display:grid}
.mnav nav a{padding:.75rem 1rem; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:600; border-radius:8px}
.mnav nav a:hover{background:var(--plum-soft)}
@media (max-width:860px){.mnav{display:block} .top-cta .btn{padding:.6rem 1rem; font-size:.92rem}}
h1.pg{font-size:clamp(2.3rem,5.2vw,4rem); max-width:18ch}
.pg-hero{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.svc .more{font-family:var(--display); font-weight:600; text-decoration:none}
.svc .more::after{content:" \2192"}
footer.foot{border-top:1px solid var(--rule); padding:2.2rem 0 2.6rem}
footer.foot .wrap{display:grid; grid-template-columns:1.3fr 1fr auto; gap:1.2rem 2rem; align-items:start}
@media (max-width:760px){footer.foot .wrap{grid-template-columns:1fr}}
.foot-brand{display:grid; gap:.2rem}
.foot-brand b{font-family:var(--display); color:var(--ink); font-size:1.1rem}
footer.foot nav{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem}
footer.foot nav a{color:var(--ink-2); text-decoration:none}

/* home */
.hd{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:860px){.hd{grid-template-columns:1fr}}
.hd-tabs{display:flex; flex-wrap:wrap; gap:.5rem; padding:1.4rem; border-radius:18px; background:#1C1F23; text-decoration:none}
.hd-tabs span{font-family:var(--display); font-weight:600; font-size:.95rem; color:#C9CDD2; background:#2A2E33; padding:.5rem .85rem; border-radius:999px}
.hd-tabs span:first-child{background:#FB923C; color:#1C1F23}
.hd-tabs:hover span{color:#fff}
.hw{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2rem}
@media (max-width:860px){.hw{grid-template-columns:1fr}}
.hw a{text-decoration:none; color:var(--ink); display:grid; gap:.35rem; min-width:0}
.hw a b{font-family:var(--display); font-size:1.1rem; margin-top:.5rem}
.hw a span{color:var(--muted); font-size:.95rem}
.hw a:hover .frame{border-color:var(--plum)}

/* software demo */
.demo-sec{padding-top:0}
.app{border-radius:18px; overflow:hidden; border:1px solid var(--rule); background:var(--card); box-shadow:0 30px 60px -34px rgba(28,31,35,.5)}
.app-top{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1.2rem; background:#1C1F23; color:#C9CDD2; font-size:.85rem}
.app-name{display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:700; color:#fff; font-size:.98rem}
.app-name i{width:10px; height:10px; border-radius:3px; background:#FB923C}
@media (max-width:600px){.app-user{display:none}}
.app-tabs{display:flex; gap:.25rem; overflow-x:auto; padding:.35rem .6rem .6rem; background:#1C1F23; scrollbar-width:thin}
.app-tabs button{flex:none; font-family:var(--display); font-weight:600; font-size:.93rem; color:#C9CDD2; background:transparent; border:0; padding:.55rem .85rem; border-radius:8px; cursor:pointer}
.app-tabs button:hover{color:#fff; background:#2A2E33}
.app-tabs button[aria-selected="true"]{background:#FB923C; color:#1C1F23}
.app-panel{display:grid; grid-template-columns:1.55fr 1fr; min-height:470px}
.app-panel[hidden]{display:none}
@media (max-width:900px){.app-panel{grid-template-columns:1fr}}
.scr{padding:1.3rem 1.4rem 1.6rem; background:var(--bg); min-width:0; font-size:.92rem}
.scr-h{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; font-family:var(--display); font-weight:700; font-size:1.2rem; margin-bottom:1rem}
.scr-h .muted{font-family:var(--body); font-weight:400; font-size:.85rem}
.scr-h .acts{margin-left:auto; display:flex; gap:.4rem; flex-wrap:wrap}
.muted{color:var(--muted)}
.bx{display:inline-block; font-family:var(--display); font-weight:600; font-size:.8rem; padding:.35rem .75rem; border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--ink); white-space:nowrap}
.bx.solid{background:var(--plum); border-color:var(--plum); color:#fff}
.pl{display:inline-block; font-family:var(--display); font-weight:600; font-size:.74rem; padding:.15rem .55rem; border-radius:999px; background:var(--plum-soft); color:var(--ink-2); white-space:nowrap}
.pl.new{background:#FFEDD5; color:#9A3412}
.pl.ok{background:#DCFCE7; color:#166534}
.pl.bad{background:#FEE2E2; color:#991B1B}
.kp4{display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin-bottom:1rem}
@media (max-width:560px){.kp4{grid-template-columns:repeat(2,1fr)}}
.kp{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:.65rem .75rem; color:var(--muted); font-size:.8rem; line-height:1.3}
.kp b{display:block; font-family:var(--display); font-size:1.25rem; color:var(--ink); letter-spacing:-0.02em}
.kp.warn b{color:#B91C1C} .kp.ok b{color:#15803D}
.lst{background:var(--card); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.li{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .6rem; padding:.65rem .85rem; border-bottom:1px solid var(--rule)}
.li:last-child{border-bottom:0}
.li em{margin-left:auto; font-style:normal; font-size:.78rem; color:var(--muted)}
.mt{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); border-radius:12px; overflow:hidden; font-size:.86rem; display:table}
.mt th{font-family:var(--display); font-weight:600; font-size:.78rem; color:var(--muted); text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--rule)}
.mt td{padding:.6rem .75rem; border-bottom:1px solid var(--rule); vertical-align:middle; min-width:0}
.mt td:first-child{font-family:var(--body); font-weight:400; min-width:0}
.mt td:nth-child(2){font-family:var(--body); font-weight:400; white-space:normal}
.mt td:last-child{min-width:0; color:inherit}
.mt tr:last-child td{border-bottom:0}
.mt small{display:block; color:var(--muted); font-size:.75rem}
@media (max-width:560px){.mt th:nth-child(2),.mt td:nth-child(2){display:none}}
.note-row{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.9rem; font-size:.85rem}
.kv{display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr; gap:.3rem .7rem; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:.7rem .9rem; font-size:.86rem}
.kv span{color:var(--muted)}
@media (max-width:560px){.kv{grid-template-columns:auto 1fr}}
.box{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:.8rem .9rem}
.box-h{font-family:var(--display); font-weight:700; font-size:.92rem; margin-bottom:.55rem}
.two{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.vbars{display:flex; align-items:flex-end; gap:5px; height:130px}
.vbars i{flex:1; background:#FDBA74; border-radius:4px 4px 0 0}
.vbars i.hi{background:var(--plum)}
.hb{display:grid; grid-template-columns:90px 1fr 28px; align-items:center; gap:.5rem; font-size:.8rem; margin:.45rem 0}
.hb i{height:10px; border-radius:5px; background:var(--plum); display:block}
.hb b{font-family:var(--display); text-align:right}
.seg{display:inline-flex; gap:2px; margin-left:auto; font-family:var(--display); font-weight:600; font-size:.76rem}
.seg span{padding:.25rem .55rem; border-radius:999px; border:1px solid var(--rule); background:var(--card)}
.seg .on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.search{background:var(--card); border:1px solid var(--rule); border-radius:999px; padding:.5rem .9rem; color:var(--muted); margin-bottom:.8rem; font-size:.86rem}
.feed{display:grid; gap:.6rem}
.fi{display:grid; grid-template-columns:auto 1fr auto; gap:.15rem .7rem; align-items:center; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:.7rem .85rem}
.fi b{grid-column:2} .fi small{grid-column:2; color:var(--muted)} .fi .pl{grid-row:1/3} .fi .bx{grid-column:3; grid-row:1/3}
@media (max-width:560px){.fi{grid-template-columns:1fr}.fi b,.fi small,.fi .pl,.fi .bx{grid-column:1; grid-row:auto; justify-self:start}}
.chips{display:flex; flex-wrap:wrap; gap:.25rem}
.chips i{font-style:normal; font-size:.72rem; padding:.12rem .45rem; border-radius:6px; background:var(--plum-soft)}
.log{background:var(--card); border:1px solid var(--rule); border-radius:12px; font-size:.86rem}
.log div{padding:.65rem .85rem; border-bottom:1px solid var(--rule)}
.log div:last-child{border-bottom:0}
.log time{display:inline-block; min-width:5.5rem; color:var(--muted); font-size:.78rem}
.spark{display:flex; align-items:flex-end; gap:8px; height:110px}
.spark span{flex:1; background:#FDBA74; border-radius:6px 6px 0 0; display:flex; justify-content:center; padding-top:4px; font-family:var(--display); font-weight:700; font-size:.78rem; color:#1C1F23}
.spark span.hi{background:#15803D; color:#fff}
.about{padding:1.4rem 1.5rem 1.6rem; border-left:1px solid var(--rule); background:var(--card)}
@media (max-width:900px){.about{border-left:0; border-top:1px solid var(--rule)}}
.about h2{font-size:1.5rem; margin-bottom:.4rem}
.about p{color:var(--ink-2); font-size:.98rem}
.about ul{padding-left:1.1rem; margin:0 0 1rem; color:var(--ink-2); font-size:.96rem}
.about li{margin-bottom:.35rem}
.about .rep{background:var(--gold-soft); border-radius:10px; padding:.7rem .85rem; font-size:.92rem; color:var(--ink); margin:0}
.demo-note{margin-top:.8rem}
.build-sec{padding-top:clamp(2.5rem,6vw,4.5rem)}
.safe{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
@media (max-width:860px){.safe{grid-template-columns:1fr}}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:.8rem}
.checks li{position:relative; padding-left:1.8rem; color:var(--ink-2)}
.checks li::before{content:"\2713"; position:absolute; left:0; top:0; width:1.25rem; height:1.25rem; border-radius:50%; background:#DCFCE7; color:#166534; font-size:.8rem; display:grid; place-items:center; font-weight:700}
.checks b{color:var(--ink)}
.safe-sec{background:var(--card); border-block:1px solid var(--rule)}
.ps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.6rem}
@media (max-width:860px){.ps{grid-template-columns:1fr}}
.ps div{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.4rem}
.ps b{display:block; font-family:var(--display); font-size:2rem; letter-spacing:-0.03em}
.ps span{font-family:var(--display); font-weight:600; color:var(--plum)}
.ps p{margin:.6rem 0 0; color:var(--ink-2); font-size:.96rem}

/* websites page */
.ba{margin-top:1.8rem; border:1px solid var(--rule); border-radius:18px; overflow:hidden; background:var(--card); box-shadow:0 30px 60px -34px rgba(28,31,35,.5); container-type:inline-size}
.ba-bar{display:flex; align-items:center; gap:6px; padding:.6rem 1rem; border-bottom:1px solid var(--rule); font-size:.82rem; color:var(--muted)}
.ba-bar i{width:9px; height:9px; border-radius:50%; background:var(--rule)}
.ba-bar span{margin-left:.6rem}
.ba-view{position:relative; aspect-ratio:16/8.5; overflow:hidden}
@media (max-width:560px){.ba-view{aspect-ratio:4/3.4}}
.ba-old,.ba-new{position:absolute; inset:0}
.ba-old{background:#E9E6DF; font-family:Georgia,"Times New Roman",serif; color:#333; text-align:center; padding:3.5cqw 4cqw}
.ba-old .o1{background:#4A5A7A; color:#fff; padding:1.3cqw; font-size:2.8cqw}
.ba-old .o2{font-size:1.8cqw; margin:1.3cqw 0; color:#0000EE; text-decoration:underline}
.ba-old .o3{font-size:3.6cqw; margin:2.6cqw 0 1.3cqw}
.ba-old .o4{font-size:1.9cqw; line-height:1.5; max-width:62cqw; margin:0 auto}
.ba-old .o5{width:24cqw; height:9cqw; margin:2.3cqw auto; background:#C9C3B6; border:2px dashed #999; font-size:1.5cqw; display:grid; place-items:center}
.ba-old .o6{font-size:1.4cqw; color:#777}
.ba-new{background:#F6F6F4; color:#1C1F23; padding:0 4cqw}
.n-nav{display:flex; align-items:center; gap:2.8cqw; padding:2.2cqw 0; font-family:var(--display); font-size:1.8cqw; color:#444A52}
.n-nav b{font-size:2.4cqw; color:#1C1F23; margin-right:auto}
.n-btn{display:inline-block; font-family:var(--display); font-weight:600; font-size:1.7cqw; padding:1cqw 2cqw; border-radius:999px; background:#C2410C; color:#fff}
.n-btn.ghost{background:#fff; color:#1C1F23; border:1.5px solid #1C1F23}
.n-h{font-family:var(--display); font-weight:700; font-size:4.8cqw; line-height:1.04; letter-spacing:-0.025em; max-width:66cqw; margin-top:2cqw}
.n-p{font-size:1.9cqw; color:#444A52; margin:1.6cqw 0 2cqw; max-width:60cqw}
.n-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6cqw; margin-top:3cqw}
.n-cards div{background:#fff; border:1px solid #E3E3DF; border-radius:1.4cqw; padding:1.6cqw 1.8cqw; display:grid}
.n-cards b{font-family:var(--display); font-size:1.9cqw}
.n-cards span{font-size:1.5cqw; color:#6B7178}
.ba-line{position:absolute; top:0; bottom:0; width:3px; background:var(--plum); transform:translateX(-50%); pointer-events:none}
.ba-line span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--plum); color:#fff; display:grid; place-items:center; font-size:1.2rem; box-shadow:0 6px 16px rgba(0,0,0,.25)}
.ba-tag{position:absolute; bottom:12px; font-family:var(--display); font-weight:600; font-size:.8rem; padding:.25rem .7rem; border-radius:999px; color:#fff}
.ba-tag.l{left:12px; background:#1C1F23} .ba-tag.r{right:12px; background:#C2410C}
#baRange{display:block; width:calc(100% - 2rem); margin:1rem auto 1.1rem; accent-color:var(--plum); height:28px}
.steps.six{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.steps.six{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps.six{grid-template-columns:1fr}}
.smap{margin-top:2rem; background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:1.6rem}
.smap-home{width:max-content; margin:0 auto 1.4rem; background:#1C1F23; color:#fff; font-family:var(--display); font-weight:700; padding:.55rem 1.6rem; border-radius:10px}
.smap-cols{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
@media (max-width:900px){.smap-cols{grid-template-columns:repeat(2,1fr)}}
.smap-cols div{display:grid; gap:.4rem; align-content:start}
.smap-cols b{font-family:var(--display); text-align:center; padding:.5rem; border-radius:10px; border:1.5px solid var(--plum); color:var(--ink)}
.smap-cols span{font-size:.85rem; padding:.4rem .6rem; border-radius:8px; background:var(--bg); border:1px solid var(--rule); color:var(--ink-2)}
.move{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem}
@media (max-width:860px){.move{grid-template-columns:1fr}}
.card-x{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.3rem 1.4rem; min-width:0}
.cx-h{font-family:var(--display); font-weight:700; font-size:1.1rem; margin-bottom:.6rem}
.card-x .rd{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:.7rem 0; border-bottom:1px solid var(--rule); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem}
.card-x .rd:last-child{border-bottom:0}
.card-x .rd s{color:var(--muted)} .card-x .rd span{grid-column:1; overflow-wrap:anywhere}
.card-x .rd em{grid-column:2; grid-row:1/3; align-self:center; font-style:normal; font-family:var(--display); font-weight:600; font-size:.75rem; background:#DCFCE7; color:#166534; padding:.15rem .6rem; border-radius:999px}
.big{font-family:var(--display); font-weight:700; font-size:2.6rem; letter-spacing:-0.03em; color:var(--plum)}
.big span{color:var(--muted); font-size:1.6rem}
.ichart{width:100%; height:auto; margin:.4rem 0 .6rem}
.pills{display:flex; flex-wrap:wrap; gap:.4rem}
.pills span{font-family:var(--display); font-weight:600; font-size:.8rem; padding:.25rem .7rem; border-radius:999px; background:var(--plum-soft)}
.pills .okp{background:#DCFCE7; color:#166534}
.seo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:860px){.seo{grid-template-columns:1fr}}
.seo-kp{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:1rem}
.seo-kp div{border:1px solid var(--rule); border-radius:10px; padding:.5rem .6rem; font-size:.78rem; color:var(--muted)}
.seo-kp b{display:block; font-family:var(--display); font-size:1.3rem; color:var(--ink)}
.seo-kp .ok b{color:#15803D}
.every{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media (max-width:900px){.every{grid-template-columns:1fr}}
.ev-n{display:block; font-family:var(--display); font-size:1.05rem}
.map{height:120px; border-radius:10px; background:repeating-linear-gradient(45deg,var(--bg) 0 12px,var(--plum-soft) 12px 24px); position:relative; margin-bottom:.8rem}
.map i{position:absolute; left:46%; top:30%; width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--plum)}
.li-banner{height:70px; border-radius:10px; background:linear-gradient(120deg,#1C1F23,#C2410C)}
.li-logo{width:54px; height:54px; border-radius:12px; background:#fff; border:3px solid var(--card); margin:-27px 0 .5rem 14px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.4rem; color:#C2410C; box-shadow:0 4px 12px rgba(0,0,0,.15)}
.vid{position:relative; aspect-ratio:16/9; border-radius:10px; background:#1C1F23; display:grid; place-items:center; margin-bottom:.8rem}
.vid .play{width:56px; height:56px; border-radius:50%; background:#C2410C; position:relative}
.vid .play::after{content:""; position:absolute; left:22px; top:16px; border-left:18px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent}
.vid small{position:absolute; left:10px; bottom:8px; color:#C9CDD2; font-size:.78rem}
.res{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.6rem}
@media (max-width:860px){.res{grid-template-columns:1fr}}
.res div{border-top:3px solid var(--plum); padding-top:1rem}
.res b{display:block; font-family:var(--display); font-weight:700; font-size:2.4rem; letter-spacing:-0.03em}
.res span{color:var(--ink-2)}
.res-sec,.seo-sec{background:var(--card); border-block:1px solid var(--rule)}