/* Back pages (product, modules, pricing, security, company, film). Layout A, 2026-10-12.
   Unlinked from the landing page; built for readers who arrive from search and AI answers. */
:root{--page:#f5f0e4;--ink:#14201b;--muted:#4a5a53;--faint:#7d8a83;--pine:#1f6a4e;--mint:#8ff0bb;--amber:#e8a23a;--card:#fffdf7;--disp:"Big Shoulders Display",Impact,sans-serif;--body:"Instrument Sans",system-ui,sans-serif;--mono:"Spline Sans Mono",monospace;--gut:40px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.back{margin:0;background:var(--page);font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased}
.back a{color:inherit}
.back img{max-width:100%}
.back .skip{position:absolute;left:-999px}.back .skip:focus{left:16px;top:16px;z-index:9;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px}
.back .w{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.back .bn{display:flex;justify-content:space-between;align-items:center;padding:18px var(--gut)}
.back .bn .home{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 22px var(--disp);letter-spacing:.04em;text-transform:uppercase}
.back .bn .home img{width:44px;height:44px;border-radius:50%}
.back .e2{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border-radius:8px;background:var(--ink);color:#f5f0e4;font:800 18px var(--disp);letter-spacing:.14em;text-transform:uppercase;outline:1px solid rgba(232,162,58,.75);outline-offset:-5px;text-decoration:none;white-space:nowrap}
.back .e2.sm{height:42px;padding:0 20px;font-size:16px;outline-offset:-4px}
.back .e2.am{background:var(--amber);color:var(--ink);outline-color:rgba(20,32,27,.55)}
.back h1{font:800 clamp(56px,7vw,104px)/.88 var(--disp);text-transform:uppercase;margin:0}
.back h1 em,.back h2 em{font-style:normal;color:var(--pine)}
.back h2{font:800 clamp(40px,4.6vw,64px)/.9 var(--disp);text-transform:uppercase;margin:0 0 28px}
.back h3{font:800 24px/.95 var(--disp);text-transform:uppercase;margin:10px 0 8px}
.back .lede{font-size:20px;line-height:1.5;max-width:46ch;margin:22px 0 28px;font-weight:500}
.back .sec{padding:88px 0 0}
.back .sec:last-of-type{padding-bottom:88px}
.back .intro{max-width:62ch;font-size:18px;line-height:1.6;color:var(--muted);margin:-12px 0 28px}
/* painted hero */
.back .hero{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;margin:0 24px;color:#f5f0e4;min-height:560px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;padding:72px max(56px,calc(50vw - 640px))}
.back .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.back .hero .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,14,11,.84),rgba(8,14,11,.5) 55%,rgba(8,14,11,.3))}
.back .hero h1 em{color:var(--mint)}
.back .hero .lede{color:#e7efe9}
.back .hero.solo{grid-template-columns:1fr;min-height:460px}
/* readout */
.back .ro{max-width:440px;width:100%;justify-self:center;text-align:center;position:relative;text-shadow:0 1px 12px rgba(0,0,0,.55);color:#f5f0e4}
.back .ro:before{content:"";position:absolute;inset:-56px -72px;background:radial-gradient(closest-side,rgba(6,12,9,.86),rgba(6,12,9,.6) 55%,rgba(6,12,9,0));z-index:-1}
.back .ro .k{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#d6e4dc}
.back .ro .big{display:block;font:800 72px/.85 var(--disp);color:#fff;margin-top:18px}
.back .ro .sub{display:block;margin-top:10px;font-size:14px;color:#dfe8e2}
.back .ro .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2)}
.back .ro .stats div{font-size:13px;line-height:1.3;color:#dfe8e2}
.back .ro .stats b{display:block;font:800 34px/1 var(--disp);margin-bottom:4px;color:#fff}
.back .ro .stats .w b{color:var(--amber)}
/* cards, steps, roles */
.back .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0}
.back .cards.c3{grid-template-columns:repeat(3,1fr)}.back .cards.c2{grid-template-columns:repeat(2,1fr)}
.back .cards li{background:var(--card);border:1px solid rgba(20,32,27,.12);border-radius:8px;padding:22px 20px;box-shadow:0 14px 28px -18px rgba(20,32,27,.35)}
.back .cards li .n{font:500 11px var(--mono);letter-spacing:.1em;color:var(--faint)}
.back .cards li p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.back .cards li a.more{display:inline-block;margin-top:14px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pine);text-decoration:none}
.back .cards li .ic{width:40px;height:40px;border-radius:50%;image-rendering:pixelated;display:block}
.back .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.back .steps li{padding:24px 28px 0 0}
.back .steps li .n{font:800 56px/.9 var(--disp);color:var(--amber)}
.back .steps li p{margin:0;color:var(--muted);line-height:1.5}
.back .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.back .roles .r{border-radius:8px;padding:24px;background:var(--ink);color:#f5f0e4;outline:1px solid rgba(232,162,58,.6);outline-offset:-5px}
.back .roles .r .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.back .roles .r p{margin:12px 0 0;font-size:16px;line-height:1.5;color:#dfe8e2}
/* two-column lists */
.back .swap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.back .swap .col{border-radius:8px;padding:24px;background:var(--card);border:1px solid rgba(20,32,27,.12)}
.back .swap .col.dk{background:var(--ink);color:#f5f0e4;border-color:var(--ink)}
.back .swap ul{list-style:none;margin:14px 0 0;padding:0}
.back .swap li{padding:12px 0;border-top:1px solid rgba(20,32,27,.12);font-size:16px}
.back .swap .dk li{border-color:rgba(255,255,255,.14)}
.back .swap li b{font-weight:600}.back .swap li span{display:block;color:var(--muted);font-size:14px;margin-top:2px}.back .swap .dk li span{color:#b9c9c0}
.back .swap .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.back .swap .dk .k{color:var(--amber)}
/* questions */
.back .qa{display:grid;grid-template-columns:1fr 1.4fr;gap:56px}
.back .qa dl{margin:0}
.back .qa dt{font:800 22px/1.05 var(--disp);text-transform:uppercase;padding-top:20px;border-top:1px solid rgba(20,32,27,.16)}
.back .qa dd{margin:10px 0 22px;color:var(--muted);line-height:1.6;font-size:16px}
/* chips */
.back .rel{display:flex;gap:12px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.back .rel a{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:999px;background:var(--card);border:1px solid rgba(20,32,27,.14);text-decoration:none;font:800 18px var(--disp);text-transform:uppercase}
.back .rel a img{width:32px;height:32px;border-radius:50%;image-rendering:pixelated}
.back .tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.back .tags li{padding:8px 12px;border-radius:999px;border:1px solid rgba(20,32,27,.18);font-size:14px}
/* price */
.back .price{font:800 160px/.8 var(--disp);margin:0}.back .price sup{font-size:.4em;vertical-align:top;color:var(--amber);margin-right:4px}
.back .per{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-top:14px}
.back .no{display:flex;gap:16px;margin-top:16px;font-size:16px;color:#cfdcd4}.back .no s{text-decoration-color:var(--amber)}
.back .fine{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#b9c9c0;margin-top:18px}
/* people */
.back .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.back .duo .p{display:grid;grid-template-columns:160px 1fr;gap:22px;background:var(--card);border:1px solid rgba(20,32,27,.12);border-radius:8px;padding:22px}
.back .duo .p img{width:160px;height:200px;object-fit:cover;border-radius:6px}
.back .duo .p .role{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pine);margin:6px 0 10px}
.back .duo .p p{margin:0 0 12px;color:var(--muted);line-height:1.55}
/* film */
.back .film{margin:0 24px;border-radius:24px;overflow:hidden;background:#0d1612}
.back .film video{display:block;width:100%;aspect-ratio:16/9;background:#000}
/* ending + footer */
.back .cta{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;margin:88px 24px 12px;color:#f5f0e4;text-align:center;padding:96px 24px}
.back .cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.back .cta .veil{position:absolute;inset:0;z-index:-1;background:rgba(8,14,11,.6)}
.back .cta h2{margin-bottom:14px}.back .cta h2 em{color:var(--mint)}
.back .cta p{margin:0 auto 26px;max-width:44ch;font-size:18px;color:#dfe8e2}
.back .foot{margin:0 24px 24px;padding:40px 40px 26px;background:#0d1612;color:#b9c6bf;border-radius:0 0 24px 24px}
.back .foot .g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.back .foot .brand{display:flex;align-items:center;gap:10px;color:#f5f0e4;font:800 22px var(--disp);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.back .foot .brand img{width:30px;border-radius:50%}
.back .foot p{font-size:14px;line-height:1.5;margin:12px 0 0;max-width:30ch}
.back .foot h4{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:4px 0 12px}
.back .foot ul{list-style:none;margin:0;padding:0}.back .foot li{margin:0 0 8px}.back .foot li a{text-decoration:none;font-size:14px;color:#dfe8e2}
.back .foot .base{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:900px){.back .cards{grid-template-columns:1fr 1fr}.back .foot .g{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
 :root{--gut:16px}
 .back .hero{margin:0 10px;border-radius:18px;grid-template-columns:1fr;padding:44px 18px 52px;min-height:0}
 .back h1{font-size:58px}.back .lede{font-size:17px}.back .ro .big{font-size:56px}
 .back .sec{padding-top:56px}.back .sec:last-of-type{padding-bottom:56px}
 .back .cards,.back .cards.c3,.back .cards.c2,.back .steps,.back .roles,.back .swap,.back .duo{grid-template-columns:1fr}
 .back .qa{grid-template-columns:1fr;gap:8px}
 .back .duo .p{grid-template-columns:110px 1fr}.back .duo .p img{width:110px;height:140px}
 .back .price{font-size:120px}
 .back .film{margin:0 10px;border-radius:18px}
 .back .cta{margin:56px 10px 10px;border-radius:18px;padding:64px 18px}
 .back .foot{margin:0 10px 10px;padding:28px 20px 20px}
}