/* Two visual chapters, scoped away from the rest of the landing page. */
.friction-section,.process-section { padding:88px 0 80px; scroll-margin-top:64px; }
.friction-section { background:#f3f4f4; color:#181a1d; }
.process-section { padding-top:72px; background:#101113; color:#f6f7f4; }
.story-heading { display:grid; grid-template-columns:200px minmax(0,1fr); align-items:start; gap:48px; }
.story-heading h2 { margin:0; font-size:58px; font-weight:700; line-height:1.04; letter-spacing:0; }
.story-heading h2 em { color:inherit; font-style:normal; }
.friction-section .story-heading em { background:linear-gradient(transparent 68%,#c7ff3d 68%); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.process-title em { color:var(--landing-lime); font-style:normal; }
.proof-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:48px; }
.visual-proof { min-width:0; }
.proof-visual { position:relative; height:256px; overflow:hidden; border-radius:8px; background:#e3e6e8; }
.proof-pain { display:block; margin-top:23px; color:#767b83; font-size:13px; line-height:1.4; }
.visual-proof h3 { margin:9px 0 10px; font-size:25px; font-weight:650; line-height:1.14; }
.visual-proof p { max-width:340px; margin:0; color:#646a72; font-size:15px; line-height:1.5; }
.proof-price { padding:22px 24px; background:#e6e9ea; }
.proof-price-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.proof-price-head>span { max-width:92px; padding-top:8px; font-size:14px; line-height:1.35; }
.proof-price-head>b { display:flex; align-items:flex-start; font-size:64px; line-height:1; font-weight:650; }
.proof-price-head>b>span { margin-top:8px; font-size:26px; }
.proof-price-row { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:9px; margin-top:16px; font-size:13px; }
.proof-price-row strong { font-size:18px; font-weight:650; }
.proof-price-row strong small { font-size:12px; font-weight:500; }
.proof-price-row>i { grid-column:1/-1; display:block; height:14px; overflow:hidden; border-radius:3px; background:#d3d7da; }
.proof-price-row>i>b { display:block; height:100%; background:#2d3137; transform-origin:left; }
.proof-price-row.is-edit>i>b { width:50%; background:#c7ff3d; }
.proof-price.is-visible .proof-price-row>i>b { animation:proof-bar-in .85s cubic-bezier(.22,1,.36,1) both; }
.proof-price.is-visible .proof-price-row.is-edit>i>b { animation-delay:.12s; }
@keyframes proof-bar-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.proof-identity { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#f3f4f4; }
.proof-identity figure { position:relative; min-width:0; height:100%; overflow:hidden; margin:0; background:#d4d2d5; }
.proof-identity img { width:100%; height:100%; display:block; padding-top:34px; object-fit:contain; }
.proof-identity figcaption { position:absolute; left:10px; top:10px; padding:6px 8px; border-radius:4px; background:#ffffffe8; color:#373b42; font-size:11px; }
.proof-face-lock { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #d7ff80; border-radius:5px; background:#c7ff3d; color:#192011; font-size:12px; font-weight:650; white-space:nowrap; }
.proof-face-lock svg { width:18px; height:18px; }
.proof-context { display:flex; flex-direction:column; gap:20px; padding:22px; background:#1b1e22; color:#f0f2f3; }
.proof-project-name { display:grid; grid-template-columns:22px minmax(0,1fr); gap:5px 10px; }
.proof-project-name svg { grid-row:1/3; align-self:center; width:22px; height:22px; color:#c7ff3d; }
.proof-project-name strong { font-size:15px; font-weight:600; }
.proof-project-name small { color:#9299a3; font-size:11px; }
.proof-project-assets { min-height:0; flex:1; display:grid; grid-template-columns:1.15fr .85fr 38px; gap:9px; }
.story-bag { position:relative; min-width:0; width:100%; aspect-ratio:2208/2135; overflow:hidden; }
.story-bag>img { position:absolute; top:calc(var(--bag-frame,0) * -100%); left:0; display:block; width:100%; height:300%; max-width:none; object-fit:fill; }
.proof-project-assets>.story-bag { height:100%; aspect-ratio:auto; border-radius:4px; background:#dedede; }
.proof-project-assets>.story-bag>img { width:auto; left:50%; transform:translateX(-50%); object-fit:fill; }
.proof-project-person { display:block; width:100%; height:100%; min-height:0; object-fit:cover; object-position:center top; border-radius:4px; }
.proof-palette { display:flex; flex-direction:column; gap:6px; }
.proof-palette>i { flex:1; min-height:0; border-radius:3px; background:#c7ff3d; }
.proof-palette>i:nth-child(2) { background:#636970; }
.proof-palette>i:nth-child(3) { background:#eef0f2; }
.proof-project-saved { display:flex; align-items:center; gap:8px; padding-top:13px; border-top:1px solid #3c424a; font-size:11px; color:#c3c9d2; }
.proof-project-saved svg { width:16px; height:16px; color:#c7ff3d; flex-shrink:0; }
.proof-project-saved svg:last-child { margin-left:auto; color:#929ba8; }
.proof-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:30px; margin-top:30px; border-top:1px solid #d2d6d9; }
.story-trust { display:flex; flex-wrap:wrap; gap:16px 28px; }
.story-trust>span { display:flex; align-items:center; gap:8px; color:#555d66; font-size:12px; line-height:1.3; }
.story-trust svg { width:17px; height:17px; flex-shrink:0; }
.proof-controls { display:none; }
.proof-grid:focus-visible { outline:2px solid #35411c; outline-offset:5px; }

.process-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); align-items:center; gap:80px; margin-top:28px; }
.process-navigation { min-width:0; }
.process-title { margin:0 0 34px; font-size:52px; line-height:1.04; font-weight:700; }
.process-tabs { display:flex; flex-direction:column; }
.process-tab { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) 24px; align-items:start; gap:20px; width:100%; min-height:108px; padding:22px 0; border:0; border-top:1px solid #3c4046; border-radius:0; background:none; color:#959ca5; text-align:left; transition:color .25s; }
.process-tab:last-child { border-bottom:1px solid #3c4046; }
.process-tab>span:first-child { padding-top:3px; font-size:17px; font-variant-numeric:tabular-nums; }
.process-tab>span:nth-child(2) { display:grid; gap:10px; }
.process-tab strong { color:#d5d8dd; font-size:26px; line-height:1.15; font-weight:600; }
.process-tab small { max-width:310px; color:#9099a4; font-size:14px; line-height:1.5; }
.process-tab>svg { width:22px; height:22px; opacity:0; margin-top:4px; transition:opacity .25s; }
.process-tab.is-active,.process-tab.is-active strong { color:#c7ff3d; }
.process-tab.is-active>svg { opacity:1; }
.process-tab.is-active small { color:#d1d5db; }
.process-tab>b { position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:#c7ff3d; transform:scaleX(0); transform-origin:left; }
.process-tab.is-active>b { transform:scaleX(1); }
.process-tab.is-playing>b { animation:process-progress 4.5s linear both; }
@keyframes process-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.process-tab:hover strong { color:#f1f6e5; }
.process-invitation { display:grid; justify-items:start; gap:12px; margin-top:38px; }
.process-invitation button { display:flex; align-items:center; justify-content:space-between; gap:32px; min-width:270px; min-height:54px; padding:0 18px; border:1px solid #d8ff78; border-radius:5px; background:#c7ff3d; color:#18200c; font-size:15px; font-weight:750; transition:background .2s,transform .2s; }
.process-invitation button:hover { background:#dbff82; transform:translateY(-2px); }
.process-invitation svg { width:19px; height:19px; }
.process-invitation>span { color:#a4acb7; font-size:12px; }
.process-stage { min-width:0; overflow:hidden; border:1px solid #444a52; border-radius:8px; background:#1b1e22; }
.process-stage-header { display:flex; align-items:center; justify-content:space-between; gap:12px; height:54px; padding:0 10px 0 16px; }
.process-stage-header>span { display:flex; align-items:center; gap:9px; }
.process-stage-header .brand-glyph { width:25px; height:25px; flex-basis:25px; }
.process-stage-header b { font-size:12px; font-weight:550; color:#bfc6d0; }
.process-stage-header>button { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:4px; background:none; color:#cad0da; }
.process-stage-header>button:hover { color:#c7ff3d; background:#2d333b; }
.process-stage-header svg { width:18px; height:18px; }
.process-panel[hidden] { display:none!important; }
.process-panel:not([hidden]) .process-media { animation:process-image-in .4s ease-out; }
@keyframes process-image-in { from { opacity:.4; } to { opacity:1; } }
.process-media { position:relative; overflow:hidden; }
.process-media-label { position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid #ffffff70; border-radius:4px; background:#ffffffe8; color:#2c3138; font-size:12px; font-weight:600; }
.process-media-label svg { width:15px; height:15px; }
.process-media-cost { position:absolute; right:16px; bottom:16px; display:flex; align-items:baseline; gap:7px; padding:11px 15px; border:1px solid #d2ff74; border-radius:5px; background:#c7ff3d; color:#1c260e; font-size:12px; font-weight:600; }
.process-media-cost>b { font-size:32px; line-height:1; font-weight:650; }
.process-caption { min-height:100px; display:grid; grid-template-columns:19px minmax(0,1fr); align-content:center; gap:12px; padding:18px 20px; border-top:1px solid #343a43; }
.process-caption>svg { width:19px; height:19px; margin-top:2px; color:#c7ff3d; }
.process-caption p { margin:0; color:#d1d7de; font-size:14px; line-height:1.6; }
.process-section button:focus-visible,.process-panel:focus-visible { outline:2px solid #c7ff3d; outline-offset:4px; }
.proof-controls button:focus-visible { outline:2px solid #202918; outline-offset:3px; }

@media(max-width:1100px) {
  .story-heading { grid-template-columns:160px minmax(0,1fr); gap:32px; }
  .story-heading h2 { font-size:48px; }
  .proof-grid { gap:16px; }
  .proof-visual { height:230px; }
  .proof-price { padding:18px; }
  .proof-price-head>b { font-size:54px; }
  .proof-price-head>span { font-size:12px; }
  .proof-price-row { margin-top:13px; }
  .proof-context { padding:18px; gap:16px; }
  .proof-project-assets { grid-template-columns:1fr 1fr 24px; gap:6px; }
  .visual-proof h3 { font-size:22px; }
  .visual-proof p { font-size:14px; }
  .process-layout { grid-template-columns:minmax(0,1fr) minmax(0,470px); gap:40px; }
  .process-title { font-size:44px; }
  .process-tab { grid-template-columns:28px minmax(0,1fr) 18px; gap:12px; }
  .process-tab>svg { width:18px; height:18px; }
  .process-tab strong { font-size:22px; }
  .process-tab small { font-size:13px; }
  .process-invitation button { min-width:0; width:100%; }
}
@media(max-width:760px) {
  .friction-section,.process-section { padding:64px 0 58px; scroll-margin-top:60px; }
  .story-heading { grid-template-columns:1fr; gap:24px; }
  .story-heading h2 { font-size:38px; }
  .story-heading .section-index { align-items:center; }
  .story-heading .section-index small { font-size:10px; }
  .proof-grid { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none; margin-top:32px; padding-bottom:5px; }
  .proof-grid::-webkit-scrollbar { display:none; }
  .visual-proof { flex:0 0 min(88%,340px); scroll-snap-align:start; }
  .proof-visual { height:240px; }
  .proof-price { padding:20px; }
  .proof-price-head>b { font-size:60px; }
  .proof-price-head>span { font-size:14px; }
  .proof-price-row { margin-top:14px; }
  .proof-pain { margin-top:18px; font-size:12px; }
  .visual-proof h3 { margin-top:7px; font-size:23px; }
  .visual-proof p { font-size:14px; }
  .proof-context { padding:20px; }
  .proof-project-assets { grid-template-columns:1.15fr .85fr 30px; }
  .proof-bottom { flex-direction:column-reverse; align-items:stretch; gap:24px; margin-top:16px; padding-top:0; border:0; }
  .proof-controls { display:flex; align-items:center; justify-content:space-between; gap:18px; }
  .proof-controls button { width:44px; height:44px; display:grid; place-items:center; border:1px solid #c7ced3; border-radius:50%; background:transparent; color:#2a323b; }
  .proof-controls button:disabled { opacity:.3; cursor:default; }
  .proof-controls button:not(:disabled):hover { background:#c7ff3d; border-color:#a9d33e; }
  .proof-controls svg { width:19px; height:19px; }
  .proof-controls>span { color:#858c96; font-size:13px; font-variant-numeric:tabular-nums; }
  .proof-controls b { color:#252c35; font-weight:650; }
  .story-trust { gap:12px 18px; padding-top:22px; border-top:1px solid #d2d6d9; }
  .story-trust>span { font-size:11px; gap:6px; }
  .story-trust svg { width:16px; height:16px; }
  .process-layout { display:flex; flex-direction:column; gap:20px; margin-top:30px; }
  .process-navigation { display:contents; }
  .process-title { align-self:stretch; margin:0 0 4px; font-size:38px; }
  .process-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-self:stretch; gap:12px; }
  .process-tab { min-height:96px; display:flex; flex-direction:column; justify-content:flex-start; gap:10px; padding:12px 0; border:0; border-bottom:1px solid #41464f; }
  .process-tab>span:first-child { padding:0; font-size:12px; }
  .process-tab strong { font-size:14px; line-height:1.25; }
  .process-tab small,.process-tab>svg { display:none; }
  .process-tab>b { bottom:-1px; }
  .process-stage { width:100%; }
  .process-stage-header { height:50px; padding-left:12px; }
  .process-stage-header b { font-size:11px; }
  .process-caption { min-height:112px; padding:14px 12px; gap:9px; grid-template-columns:17px minmax(0,1fr); }
  .process-caption>svg { width:17px; height:17px; }
  .process-caption p { font-size:13px; }
  .process-media-label { left:12px; top:12px; padding:7px 9px; font-size:11px; }
  .process-media-cost { right:12px; bottom:12px; padding:9px 12px; font-size:11px; }
  .process-media-cost>b { font-size:28px; }
  .process-invitation { order:3; width:100%; gap:12px; margin-top:7px; justify-items:center; }
  .process-invitation button { min-height:54px; width:100%; }
  .process-invitation>span { font-size:11px; }
}
@media(min-width:761px) and (max-width:1000px) {
  .process-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
  .process-title { font-size:34px; }
  .process-caption { min-height:128px; }
}
@media(max-width:359px) {
  .story-heading h2 { font-size:32px; }
  .process-title { font-size:32px; }
  .proof-visual { height:228px; }
  .proof-price { padding:16px; }
  .proof-price-head>b { font-size:54px; }
  .proof-context { padding:16px; }
  .proof-project-saved { font-size:10px; }
  .visual-proof h3 { font-size:22px; }
  .process-tab strong { font-size:13px; }
  .process-caption { min-height:126px; }
}
@media(prefers-reduced-motion:reduce) {
  .friction-section *, .process-section * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}