*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f5f0;font-family:'Montserrat',Arial,sans-serif;color:#0f2d26;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#96733c;text-decoration:none} a:hover{color:#0f2d26}
.page{background:#f7f5f0;min-height:100dvh;display:flex;flex-direction:column}
.wrap{max-width:1320px;margin:0 auto;padding:0 56px;width:100%}
.k{display:block;color:#96733c;font-size:.72rem;font-weight:800;letter-spacing:.19em;line-height:1.4;text-transform:uppercase}
h1,h2,h3{text-transform:uppercase;overflow-wrap:normal}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:#dcc9a3;color:#081d18;font-size:.82rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:18px 30px;border-radius:999px;min-height:48px}
.btn svg{width:16px;height:16px;stroke:#081d18;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.btn.sm{padding:11px 24px;font-size:.78rem;min-height:44px}
.btn.ghost{background:transparent;color:#0f2d26;border:2px solid #cfc5b0}
.btn.ghost svg{stroke:#0f2d26}
.dark .btn.ghost{color:#f7f5f0;border-color:rgba(220,201,163,.45)} .dark .btn.ghost svg{stroke:#f7f5f0}
button.btn{border:0;cursor:pointer;font-family:inherit}
button.btn.ghost{background:transparent}
button.btn[disabled]{opacity:.6;cursor:default}
header{height:72px;background:rgba(247,245,240,.9);border-bottom:1px solid rgba(15,45,38,.12);flex:none;position:sticky;top:0;z-index:50;backdrop-filter:blur(6px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{display:block}
.logo .tile{width:40px;height:40px;border-radius:10px;background:#0f2a1f;display:grid;place-items:center;flex:none}.logo .tile svg{width:28px;height:28px;display:block}
.logo .wm{display:flex;flex-direction:column;line-height:1}.logo .wm b{white-space:nowrap;font-weight:800;font-size:18px;letter-spacing:.22em;color:#0f2d26}.logo .wm small{font-weight:500;font-size:9px;letter-spacing:.04em;color:#5f6b65;margin-top:4px}
.hdr-right{display:flex;align-items:center;gap:22px} .hdr-right .btn{white-space:nowrap}
section{scroll-margin-top:80px}
/* hero */
.hero{background:#0f2d26;color:#f7f5f0;padding:72px 0 64px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center;gap:64px}
.hero .k{color:#dcc9a3}
.hero h1{margin-top:18px;color:#f7f5f0;font-size:4.4rem;font-weight:900;letter-spacing:-.07em;line-height:.88}
.hero h1 span{display:block}
.hero h1 .accent{color:#dcc9a3}
.hero .sub{margin-top:22px;color:#dcc9a3;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.hero p.lead{max-width:46ch;margin-top:20px;color:#e4e1d8;font-size:1.12rem;font-weight:500;line-height:1.55}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:34px}
.hero .beta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:8px 14px;border:1px solid rgba(220,201,163,.4);border-radius:999px;color:#dcc9a3;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero .beta i{width:8px;height:8px;border-radius:50%;background:#dcc9a3;display:block}
.hero-phones{position:relative;height:600px}
.hero-phones .phone{position:absolute}
.hero-phones .hp-main{left:14%;top:0;width:52%;transform:rotate(1.5deg);z-index:1}
.hero-phones .hp-side{right:0;bottom:0;width:44%;transform:rotate(-4deg);z-index:2}
/* phone frame */
.phone{position:relative;width:100%;max-width:250px;margin:0 auto;aspect-ratio:430/900;padding:9px;border-radius:34px;background:#081d18;box-shadow:0 30px 60px rgba(8,29,24,.24),inset 0 0 0 1px rgba(220,201,163,.28)}
.phone .scr{position:relative;height:100%;padding-top:26px;border-radius:26px;overflow:hidden;background:#f5f3ee}
.phone .scr::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:34%;height:13px;border-radius:999px;background:#081d18;z-index:2}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:#f5f3ee}
/* sections */
.step{padding:80px 0 0}
.h2{margin-top:16px;font-size:2.9rem;font-weight:900;letter-spacing:-.05em;line-height:.96;color:#0f2d26;max-width:22ch}
.dark .h2{color:#f7f5f0}
.lead{max-width:52ch;margin-top:24px;color:#3f5249;font-size:1.04rem;line-height:1.6}
.dark .lead{color:#c7cecb}
.two{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start;gap:64px}
.answer{margin-top:28px;background:#0f2d26;color:#f7f5f0;padding:24px 28px;font-size:1.08rem;font-weight:600;line-height:1.5}
.answer b{color:#dcc9a3;font-weight:800}
.rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid #cfc5b0;background:#cfc5b0;margin-top:40px}
.rows article{background:#f7f5f0;padding:26px 30px 30px}
.rows small{display:block;color:#96733c;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.rows h3{margin-top:8px;font-size:1.15rem;font-weight:900;letter-spacing:-.04em;line-height:1.08;color:#0f2d26}
.rows p{margin-top:12px;color:#52645b;font-size:.94rem;line-height:1.55}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid #cfc5b0;background:#cfc5b0;margin-top:40px}
.feat article{background:#f7f5f0;padding:34px 30px 32px;display:flex;flex-direction:column}
.feat .phone{margin:0 auto 26px}
.feat small{display:block;color:#96733c;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.feat h3{margin-top:8px;font-size:1.15rem;font-weight:900;letter-spacing:-.04em;line-height:1.08;color:#0f2d26}
.feat p{margin-top:12px;color:#52645b;font-size:.94rem;line-height:1.55}
.shot-cap{display:block;margin-top:auto;padding-top:18px;color:#6f7f73;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* fees */
.fees{background:#0f2d26;color:#f7f5f0;padding:56px 48px;margin-top:64px}
.fees .k{color:#dcc9a3}
.fees .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(220,201,163,.28);border:1px solid rgba(220,201,163,.28)}
.rates div{background:#0f2d26;padding:24px 22px}
.rates span{display:block;color:#dcc9a3;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.rates strong{display:block;margin-top:10px;color:#f7f5f0;font-size:1.9rem;font-weight:900;letter-spacing:-.04em;line-height:1}
.rates em{display:block;margin-top:8px;color:#c7cecb;font-size:.82rem;font-style:normal;line-height:1.45}
.maths{margin-top:22px;border-top:1px solid rgba(220,201,163,.28);padding-top:20px;color:#e4e1d8;font-size:1.02rem;line-height:1.6}
.maths b{color:#dcc9a3;font-weight:800}
.fees .src{margin-top:20px;color:#9fb0a8;font-size:.78rem;line-height:1.5}
.fees .src a{color:#dcc9a3;text-decoration:underline;text-underline-offset:3px}
/* switching */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px;list-style:none;gap:24px}
.steps::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;background:#dcc9a3}
.steps li{position:relative;padding-right:24px}
.steps li > span{position:relative;z-index:2;display:grid;width:46px;height:46px;border:2px solid #dcc9a3;border-radius:50%;place-items:center;background:#f7f5f0;color:#96733c;font-size:.72rem;font-weight:800}
.steps h3{margin-top:22px;color:#0f2d26;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.steps p{margin-top:10px;max-width:30ch;color:#3f5249;font-size:.92rem;line-height:1.55}
/* who */
.founders{display:grid;grid-template-columns:1.18fr .82fr;gap:80px;align-items:center;margin-top:80px;padding-top:64px;border-top:1px solid #cfc5b0}
.founders p{max-width:46ch;margin-top:22px;color:#52645b;font-size:1.02rem;line-height:1.6}
.founders p a{text-decoration:underline;text-underline-offset:3px}
.portrait{position:relative;overflow:hidden;max-width:420px;justify-self:end;width:100%}
.portrait img{display:block;width:100%;height:440px;object-fit:cover}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;background:#0f2d26;color:#f7f5f0}
.portrait figcaption strong{display:block;font-size:.86rem;font-weight:800;text-transform:uppercase}
.portrait figcaption span{display:block;color:#dcc9a3;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
/* form */
.cta{position:relative;overflow:hidden;background:#081d18;padding:88px 0;margin-top:80px}
.cta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,29,24,.97) 0%,rgba(8,29,24,.9) 55%,rgba(8,29,24,.6) 100%)}
.cta .wrap{position:relative;z-index:2;color:#f7f5f0}
.cta .k{color:#dcc9a3}
.cta .h2{color:#f7f5f0;max-width:14ch}
.cta p.lead{color:#e4e1d8}
.cta .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.card{background:#f7f5f0;color:#0f2d26;padding:36px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{color:#96733c;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.field input,.field select{width:100%;font:inherit;font-size:16px;font-weight:500;color:#0f2d26;background:#fff;border:1px solid #cfc5b0;border-radius:6px;padding:14px 16px;min-height:50px;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2d26' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:44px}
.field input:focus,.field select:focus{outline:3px solid #dcc9a3;outline-offset:2px;border-color:#96733c}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.card .btn{width:100%;margin-top:24px}
.honest{margin-top:14px;text-align:center;color:#6f7f73;font-size:.82rem;line-height:1.5}
.state{display:none;padding:12px 0 0}
.state.show{display:block}
.state h3{font-size:1.6rem;font-weight:900;letter-spacing:-.05em;line-height:1.02;color:#0f2d26}
.state p{margin-top:14px;color:#3f5249;font-size:1rem;line-height:1.6}
.state p a{text-decoration:underline;text-underline-offset:3px}
.err{display:none;margin-top:16px;padding:14px 16px;background:#fff;border:1px solid #b2472d;color:#8a341f;font-size:.9rem;line-height:1.5}
.err.show{display:block}
footer{background:#081d18;color:#f7f5f0;padding:28px 0;flex:none}
footer .wrap{display:flex;justify-content:space-between;align-items:center}
footer .tag{color:#dcc9a3;font-size:1rem;font-weight:800;letter-spacing:-.02em}
footer small{color:#9fb0a8;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
:focus-visible{outline:3px solid #dcc9a3;outline-offset:3px}
@media (max-width: 1080px){
.feat{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero h1{font-size:3.8rem}
}
@media (max-width: 760px) {
.wrap{padding:0 22px}
header .wrap{height:64px} .logo .wm b{font-size:16px}
.hdr-right{gap:12px} .hdr-right .btn.sm{padding:9px 16px;font-size:.7rem;min-height:44px}
.hero{padding:44px 0 48px;min-height:0}
.hero .grid{display:block}
.hero h1{font-size:2.4rem;line-height:.92}
.hero .sub{font-size:1.05rem}
.hero p.lead{font-size:1rem;max-width:none}
.hero .actions .btn{width:100%}
.hero-phones{height:420px;margin-top:40px}
.hero-phones .hp-main{left:0;width:56%;transform:rotate(0)}
.hero-phones .hp-side{width:48%;right:0;bottom:0}
.step{padding:56px 0 0}
.two{grid-template-columns:1fr;gap:30px}
.h2{font-size:2rem;max-width:none}
.lead{font-size:.98rem}
.answer{font-size:1rem;padding:18px 20px}
.rows,.feat{grid-template-columns:1fr}
.feat article{padding:30px 22px}
.fees{padding:40px 22px;margin-top:44px}
.fees .grid{grid-template-columns:1fr;gap:28px}
.rates strong{font-size:1.6rem}
.steps{grid-template-columns:1fr;padding-left:46px;margin-top:36px;gap:0}
.steps::before{left:15px;right:auto;top:7px;bottom:7px;width:2px;height:auto}
.steps li{padding:0 0 26px} .steps li > span{position:absolute;left:-46px;top:-4px;width:32px;height:32px;font-size:.62rem} .steps h3{margin-top:0} .steps p{max-width:none}
.founders{grid-template-columns:1fr;gap:30px;margin-top:56px;padding-top:44px}
.portrait{max-width:none;justify-self:stretch} .portrait img{height:300px}
.cta{padding:56px 0;margin-top:56px}
.cta .grid{grid-template-columns:1fr;gap:36px}
.cta .h2{max-width:none}
.card{padding:26px 20px}
.fields{grid-template-columns:1fr;gap:16px}
}
@media (max-width: 400px){.logo .wm small{display:none}}

/* ===== nav (shared across /gym-os pages) ===== */
header .wrap{gap:24px}
.navlinks{display:flex;align-items:center;gap:26px;margin-left:auto}
.hdr-cta{white-space:nowrap}
.navlinks a{color:#0f2d26;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a.active{color:#96733c;border-bottom-color:#dcc9a3}
.navlinks .btn{border-bottom:0;letter-spacing:.05em}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:#0f2d26;margin-right:-8px}
.navtoggle svg{width:26px;height:26px;display:block}
.mobnav{display:none;max-height:calc(100dvh - 72px);overflow:auto;position:absolute;left:0;right:0;top:100%;background:#f7f5f0;border-bottom:1px solid rgba(15,45,38,.12);box-shadow:0 24px 40px rgba(8,29,24,.12)}
.mobnav.open{display:block}
.mobnav .wrap{display:grid;gap:0;padding-top:8px;padding-bottom:18px;height:auto}
.mobnav a{display:block;padding:14px 4px;border-bottom:1px solid rgba(15,45,38,.1);color:#0f2d26;font-size:.86rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mobnav a.sub{padding-left:18px;font-size:.78rem;font-weight:700;color:#52645b;text-transform:none;letter-spacing:0}
.mobnav .btn{display:flex;padding:14px 24px;margin-top:16px;border-bottom:0;text-align:center;font-size:.8rem}
@media (max-width: 900px){.navlinks{display:none}.navtoggle{display:block}.hdr-cta{margin-left:auto;padding:9px 14px;font-size:.66rem;min-height:40px}}
@media (max-width: 480px){header .wrap{gap:10px}.logo{gap:8px}.logo .wm b{font-size:14px;letter-spacing:.14em}.hdr-cta{padding:8px 11px;font-size:.6rem;letter-spacing:.03em;min-height:36px}.navtoggle{flex:none;padding:6px}}
@media (max-width: 400px){.logo{min-width:0}.logo .wm{min-width:0}.logo .wm b{font-size:13px;letter-spacing:.08em}.logo .tile{width:34px;height:34px}.logo .tile svg{width:24px;height:24px}.hdr-cta{padding:8px 10px;font-size:.56rem}.navtoggle{padding:4px;margin-right:-4px}}

/* ===== features overview ===== */
.fhero{background:#0f2d26;color:#f7f5f0;padding:64px 0 56px}
.fhero .k{color:#dcc9a3}
.fhero h1{margin-top:16px;color:#f7f5f0;font-size:3.6rem;font-weight:900;letter-spacing:-.06em;line-height:.92;max-width:16ch}
.fhero h1 .accent{color:#dcc9a3}
.fhero p.lead{color:#e4e1d8;font-size:1.1rem;max-width:56ch}
.fhero .actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid #cfc5b0;background:#cfc5b0;margin-top:40px}
.fcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:18px;background:#f7f5f0;padding:28px 26px 26px;color:#0f2d26;overflow:hidden;transition:background .18s}
.fcard:hover{background:#fffdf8;color:#0f2d26}
.fcard .ico{width:46px;height:46px;border-radius:12px;background:#0f2d26;display:grid;place-items:center;margin-bottom:16px}
.fcard .ico svg{width:24px;height:24px;stroke:#dcc9a3;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcard small{display:block;color:#96733c;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fcard h3{margin-top:6px;font-size:1.1rem;font-weight:900;letter-spacing:-.04em;line-height:1.08;text-transform:uppercase}
.fcard p{margin-top:10px;color:#52645b;font-size:.9rem;line-height:1.55}
.fcard .more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#96733c;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.fcard .more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.fcard:hover .more svg{transform:translateX(4px)}
.fcard .mini{align-self:end;width:112px;margin-right:-12px;margin-bottom:-60px;aspect-ratio:430/900;padding:5px;border-radius:18px;background:#081d18;box-shadow:0 18px 36px rgba(8,29,24,.22),inset 0 0 0 1px rgba(220,201,163,.3);transform:rotate(-4deg);transition:transform .25s}
.fcard:hover .mini{transform:rotate(-2deg) translateY(-6px)}
.fcard .mini div{height:100%;border-radius:14px;overflow:hidden;background:#f5f3ee}
.fcard .mini img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.fcard .mini.blank{background:#0f2d26;display:grid;place-items:center}
.fcard .mini.blank div{display:grid;place-items:center;background:#0f2d26}
.fcard .mini.blank svg{width:40px;height:40px;stroke:#dcc9a3;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgroup{margin-top:64px}
.fgroup .h2{font-size:2.2rem}
.fgroup .lead{margin-top:14px}

/* notification mock, used where there is no screen to show */
.phone .scr.notif{background:linear-gradient(180deg,#1b4a3f 0%,#0f2d26 100%);padding:70px 12px 0}
.notif time{display:block;text-align:center;color:#f7f5f0;font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.notif time small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#dcc9a3;margin-top:8px}
.notif .card-n{margin-top:14px;background:rgba(247,245,240,.94);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;text-align:left;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.notif .card-n:first-of-type{margin-top:26px}
.notif .card-n i{width:28px;height:28px;border-radius:7px;background:#0f2d26;display:grid;place-items:center}
.notif .card-n i svg{width:15px;height:15px;stroke:#dcc9a3;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.notif .card-n b{display:flex;justify-content:space-between;color:#0f2d26;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.notif .card-n b span{font-weight:600;color:#6f7f73;letter-spacing:0;text-transform:none}
.notif .card-n p{margin-top:3px;color:#0f2d26;font-size:.68rem;line-height:1.35;font-weight:500}
/* layers stack (security hero) */
.layers{width:100%;max-width:360px;display:grid;gap:10px}
.layers div{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;background:rgba(247,245,240,.06);border:1px solid rgba(220,201,163,.35);border-radius:14px;padding:14px 16px}
.layers div:nth-child(2){margin-left:18px} .layers div:nth-child(3){margin-left:36px} .layers div:nth-child(4){margin-left:54px}
.layers i{grid-row:1/3;width:44px;height:44px;border-radius:11px;background:#dcc9a3;display:grid;place-items:center}
.layers i svg{width:22px;height:22px;stroke:#081d18;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.layers b{color:#f7f5f0;font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.layers span{color:#c7cecb;font-size:.8rem}
.mock.hero-mock{margin-top:0;width:100%;max-width:520px;font-size:.78rem;transform:rotate(-1.5deg)}
.mock.hero-mock .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .mock.hero-mock .stats div{padding:10px 12px} .mock.hero-mock .stats strong{font-size:1.2rem}
.mock.hero-mock .body{padding:16px 18px 18px} .mock.hero-mock td{padding:8px 8px 8px 0}
/* ===== feature page ===== */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;white-space:nowrap;color:#dcc9a3;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.crumb a{color:#dcc9a3} .crumb a:hover{color:#f7f5f0}
.crumb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.phero{background:#0f2d26;color:#f7f5f0;padding:56px 0 64px;overflow:hidden}
.phero .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:center;gap:64px}
.phero .k{color:#dcc9a3;margin-top:22px}
.phero h1{margin-top:14px;color:#f7f5f0;font-size:3.4rem;font-weight:900;letter-spacing:-.06em;line-height:.94}
.phero h1 .accent{color:#dcc9a3}
.phero p.lead{color:#e4e1d8;font-size:1.1rem;max-width:50ch}
.phero .actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.phero .ico{width:60px;height:60px;border-radius:16px;background:rgba(220,201,163,.12);border:1px solid rgba(220,201,163,.35);display:grid;place-items:center}
.phero .ico svg{width:30px;height:30px;stroke:#dcc9a3;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.phero .shots{position:relative;height:560px}
.phero .shots:has(.figure){height:auto;min-height:420px}
.phero .shots .phone{position:absolute}
.phero .shots .s1{left:8%;top:0;width:54%;transform:rotate(1.5deg);z-index:1}
.phero .shots .s2{right:0;bottom:0;width:46%;transform:rotate(-4deg);z-index:2}
.phero .shots.one .s1{left:50%;transform:translateX(-50%);width:56%;max-width:290px}
.phero .shots .figure{position:absolute;inset:0;display:grid;place-items:center}
.does{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid #cfc5b0;background:#cfc5b0;margin-top:40px}
.does article{background:#f7f5f0;padding:26px 28px 28px;display:flex;gap:18px;align-items:flex-start}
.does .n{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid #dcc9a3;display:grid;place-items:center;color:#96733c;font-size:.68rem;font-weight:800}
.does h3{font-size:1.08rem;font-weight:900;letter-spacing:-.04em;line-height:1.1;color:#0f2d26}
.does p{margin-top:10px;color:#52645b;font-size:.92rem;line-height:1.55}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
.gallery figure{display:flex;flex-direction:column;align-items:center;text-align:center}
.gallery .phone{max-width:270px}
.gallery figcaption{margin-top:18px;color:#3f5249;font-size:.9rem;line-height:1.5;max-width:30ch}
.gallery figcaption b{display:block;color:#0f2d26;font-weight:800;text-transform:uppercase;font-size:.72rem;letter-spacing:.12em;margin-bottom:6px}
.gallery.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.gallery.one{grid-template-columns:1fr;max-width:420px}
.wide{margin-top:40px;border:1px solid #cfc5b0;background:#fff;padding:10px;box-shadow:0 30px 60px rgba(8,29,24,.14)}
.wide img{display:block;width:100%;height:auto}
/* flow diagram (used where there is no screen to show) */
.flow{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid #cfc5b0;background:#cfc5b0}
.flow div{background:#f7f5f0;padding:24px 22px 26px;position:relative}
.flow div::after{content:"";position:absolute;right:-9px;top:34px;width:16px;height:16px;border-top:2px solid #96733c;border-right:2px solid #96733c;transform:rotate(45deg);background:transparent;z-index:2}
.flow div:last-child::after{display:none}
.flow span{display:block;color:#96733c;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.flow strong{display:block;margin-top:10px;font-size:1.05rem;font-weight:900;letter-spacing:-.03em;line-height:1.1;color:#0f2d26;text-transform:uppercase}
.flow p{margin-top:10px;color:#52645b;font-size:.88rem;line-height:1.5}
.flow.dark{border-color:rgba(220,201,163,.3);background:rgba(220,201,163,.3)}
.flow.dark div{background:#0f2d26} .flow.dark strong{color:#f7f5f0} .flow.dark p{color:#c7cecb} .flow.dark span{color:#dcc9a3}
/* mock table (migration preview) */
.mock{margin-top:40px;background:#fff;border:1px solid #cfc5b0;box-shadow:0 30px 60px rgba(8,29,24,.12);font-size:.86rem}
.mock .bar{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid #e6dfd0;background:#f7f5f0}
.mock .bar i{width:10px;height:10px;border-radius:50%;background:#cfc5b0;display:block}
.mock .body{padding:22px 24px 26px}
.mock .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mock .stats div{border:1px solid #e6dfd0;padding:14px 16px}
.mock .stats span{display:block;color:#6f7f73;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mock .stats strong{display:block;margin-top:6px;font-size:1.5rem;font-weight:900;letter-spacing:-.04em;color:#0f2d26}
.mock table{width:100%;border-collapse:collapse;margin-top:20px}
.mock th{text-align:left;color:#6f7f73;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:0 10px 10px 0;border-bottom:1px solid #e6dfd0}
.mock td{padding:11px 10px 11px 0;border-bottom:1px solid #f0ebe0;color:#0f2d26}
.mock .tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#e7efe9;color:#1d5c46}
.mock .tag.warn{background:#fbead9;color:#9a4a12}
.mock .tag.grey{background:#ece8df;color:#52645b}
/* outcomes band */
.outcomes{background:#0f2d26;color:#f7f5f0;padding:56px 48px;margin-top:64px}
.outcomes .k{color:#dcc9a3}
.outcomes .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(220,201,163,.28);border:1px solid rgba(220,201,163,.28);margin-top:28px}
.outcomes .grid div{background:#0f2d26;padding:26px 24px}
.outcomes .grid strong{display:block;color:#dcc9a3;font-size:1.25rem;font-weight:900;letter-spacing:-.04em;line-height:1.1;text-transform:uppercase}
.outcomes .grid p{margin-top:10px;color:#c7cecb;font-size:.92rem;line-height:1.55}
/* faq */
.faq{margin-top:40px;border-top:1px solid #cfc5b0}
.faq details{border-bottom:1px solid #cfc5b0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:#0f2d26}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:#96733c;font-size:1.4rem;font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 22px;color:#3f5249;font-size:.98rem;line-height:1.6;max-width:70ch}
/* next / prev */
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid #cfc5b0;background:#cfc5b0;margin-top:64px}
.nextprev a{background:#f7f5f0;padding:26px 28px;color:#0f2d26;display:flex;flex-direction:column;gap:6px}
.nextprev a:hover{background:#fffdf8}
.nextprev a.next{text-align:right;align-items:flex-end}
.nextprev small{color:#96733c;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.nextprev strong{font-size:1.1rem;font-weight:900;letter-spacing:-.04em;text-transform:uppercase;line-height:1.1}
/* small cta */
.ctaband{background:#081d18;color:#f7f5f0;padding:64px 0;margin-top:80px}
.ctaband .grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
.ctaband .k{color:#dcc9a3}
.ctaband .h2{color:#f7f5f0;font-size:2.4rem;max-width:20ch}
.ctaband p.lead{color:#c7cecb;margin-top:14px}
.ctaband .actions{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width: 1080px){
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fhero h1{font-size:3rem}
.phero h1{font-size:2.8rem}
.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow div:nth-child(2)::after{display:none}
.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
.fhero{padding:44px 0 40px} .fhero h1{font-size:2.3rem;max-width:none}
.fgrid,.fgrid.two{grid-template-columns:1fr}
.fcard{grid-template-columns:minmax(0,1fr) 96px;padding:24px 20px}
.fcard .mini{width:96px;margin-bottom:-50px}
.fgroup{margin-top:48px} .fgroup .h2{font-size:1.8rem}
.phero{padding:36px 0 48px} .phero .grid{display:block} .phero h1{font-size:2.2rem}
.phero .shots{height:400px;margin-top:36px}
.phero .shots .figure{position:static;height:auto} .layers div:nth-child(n){margin-left:0}
.mock.hero-mock{transform:none} .mock.hero-mock .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.phero .shots .s1{left:0;width:56%;transform:rotate(0)} .phero .shots .s2{width:48%}
.phero .shots.one .s1{width:60%}
.does{grid-template-columns:1fr} .does article{padding:22px 20px}
.gallery,.gallery.two{grid-template-columns:1fr;gap:36px} .gallery .phone{max-width:240px}
.flow{grid-template-columns:1fr} .flow div::after{display:none}
.mock .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.mock .body{padding:16px} .mock table{font-size:.8rem}
.mock th:nth-child(3),.mock td:nth-child(3){display:none}
.outcomes{padding:40px 22px;margin-top:48px} .outcomes .grid{grid-template-columns:1fr}
.nextprev{grid-template-columns:1fr} .nextprev a.next{text-align:left;align-items:flex-start}
.ctaband{padding:48px 0;margin-top:56px} .ctaband .grid{grid-template-columns:1fr;gap:24px} .ctaband .h2{font-size:1.9rem;max-width:none}
.ctaband .actions .btn{width:100%}
}