/* Capitrel homepage. Loaded after styles.css, which still styles the application form and dialogs.
   Tokens come from styles.css (:root); the few added here are for the homepage only. */
:root{
  --panel:#f6f1ec;        /* warm light ground for cards */
  --cream:#fff4e8;
  --amber:#ffc56e;        /* the lamp colour in the photograph: supporting shapes only */
  --deep:#1f1512;         /* a shade under the ink, for the dark panel */
  --on-deep:#d9cbc2;
  --page:max(24px,calc((100% - 1280px)/2));
  --r-card:20px;
  --shadow:0 18px 40px #3a1d1022,0 2px 6px #3a1d1014;
}
html{scroll-padding-top:92px}
body{overflow-x:clip}

/* Header: white and sticky */
.site-header{position:sticky;top:0;z-index:20;background:#fff;padding:14px var(--page);transition:box-shadow .2s var(--ease)}
.site-header.is-stuck{box-shadow:0 1px 0 var(--rule),0 8px 24px #281b170d}
.site-header nav{gap:36px;font-size:15px;font-weight:550}
.site-header .brand>svg{width:150px;height:36px;margin-left:-8px}

/* Shared pieces */
.button.go::after{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:12px;transition:transform .2s var(--ease)}
.button.go:hover::after{transform:translateX(4px) rotate(45deg)}
.shape{position:absolute;display:block;pointer-events:none}
#main h2{font-size:clamp(32px,3.5vw,50px);line-height:1.05;letter-spacing:-.03em;font-weight:680}

/* 1. Lead: centred statement over a collage */
.lead{position:relative;background:var(--orange);text-align:center;padding:76px var(--page) 0;overflow:hidden;border-radius:0 0 50% 50%/0 0 64px 64px;isolation:isolate}
.lead-copy{max-width:880px;margin:0 auto}
.lead h1{font-size:clamp(46px,6.6vw,96px);line-height:.98;letter-spacing:-.04em;font-weight:700}
.lead-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:35em;margin:26px auto 30px}
.lead-note{font-size:15px;margin:16px 0 0}
.collage{position:relative;height:440px;max-width:1280px;margin:44px auto 0}
.collage-photo{position:absolute;left:50%;bottom:0;width:430px;height:420px;margin:0 0 0 -215px;border-radius:215px 215px 0 0;overflow:hidden;background:var(--ink)}
.collage-photo img{width:100%;height:100%;object-fit:cover;object-position:56% center;display:block}
.s1{left:3%;bottom:0;width:230px;height:230px;border-radius:100% 0 0 0;background:var(--ink)}
.s2{left:21%;bottom:150px;width:150px;height:150px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--soft) 0 9px,#ffd0b5 9px 18px)}
.s3{left:17%;bottom:0;width:190px;height:120px;background:var(--cream)}
.s4{right:5%;bottom:0;width:270px;height:135px;border-radius:270px 270px 0 0;background:var(--amber)}
.s5{right:22%;bottom:170px;width:170px;height:170px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 100%,var(--cream) 0 3px,transparent 3px 13px)}
.s6{right:0;bottom:135px;width:150px;height:150px;background:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/50px 50px}
.collage .funding-start{position:absolute;left:calc(50% - 470px);right:auto;bottom:86px;width:330px;text-align:left;box-shadow:var(--shadow);z-index:2}
.chip{position:absolute;z-index:2;margin:0;background:#fff;color:var(--ink);box-shadow:var(--shadow);text-align:left}
.chip-keep{right:calc(50% - 400px);bottom:236px;display:flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;border-radius:999px;font-size:15px;font-weight:650}
.chip-keep i{width:24px;height:24px;border-radius:50%;background:var(--orange);position:relative}
.chip-keep i::after{content:"";position:absolute;left:8px;top:5px;width:6px;height:10px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(40deg)}
.chip-term{right:calc(50% - 470px);bottom:96px;padding:14px 20px 15px;border-radius:14px}
.chip-term span{display:block;font-size:13px;color:var(--muted)}
.chip-term strong{display:block;font-size:26px;line-height:1.15;letter-spacing:-.03em;font-weight:680;font-variant-numeric:tabular-nums}

/* 2. Equipment marquee */
.kit{padding:72px 0 30px;text-align:center}
.kit-title{font-size:14px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;padding:0 var(--page)}
.kit-link{font-size:15px;padding:6px 0}
/* Still by default (no script, or reduced motion): the examples wrap so every one can be read. */
.kit-rows{margin-top:34px;display:grid;gap:16px}
.kit-rows.is-live{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.kit-row{list-style:none;margin:0;padding:0 var(--page);display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.kit-row.is-moving{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding:0}
.kit-row li{display:flex;align-items:center;gap:12px;white-space:nowrap;background:var(--panel);border:1px solid transparent;border-radius:14px;padding:16px 26px 16px 16px;font-size:clamp(20px,2vw,27px);font-weight:680;letter-spacing:-.025em}
.kit-row li span{font-size:13px;font-weight:600;letter-spacing:0;background:var(--ink);color:#fff;border-radius:5px;padding:4px 9px}
.kit-row.rev li:nth-child(odd){background:var(--soft)}
.kit-row li:nth-child(3n){background:var(--soft)}
.kit-fine{font-size:15px;color:var(--muted);margin:26px 0 0;padding:0 var(--page)}

/* 3. What assets can I use */
.assets{padding:96px var(--page) 40px}
.assets-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px}
.assets-head p{margin:0;color:var(--muted);font-size:17px;line-height:1.55;max-width:26em}
.assets-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:28px;align-items:stretch}
.assets .finance-tabs{display:flex;flex-direction:column;gap:10px}
.assets .finance-tabs button{position:relative;display:block;text-align:left;background:var(--panel);border:1px solid transparent;border-radius:14px;padding:20px 22px 21px 26px;font-size:21px;font-weight:650;letter-spacing:-.02em;line-height:1.25;color:var(--muted);overflow:hidden;flex:1 0 auto;transition:background .2s var(--ease),color .2s var(--ease)}
.assets .finance-tabs button:last-child{border-bottom:1px solid transparent}
.assets .finance-tabs button small{display:block;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.45;margin-top:5px;color:var(--muted)}
.assets .finance-tabs button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rule)}
.assets .finance-tabs button::after{content:"";position:absolute;left:0;top:0;width:5px;height:0;background:var(--orange)}
.assets .finance-tabs button:hover{background:#f0e8e1}
.assets .finance-tabs button[aria-selected=true]{background:var(--soft);color:var(--ink);border-top:1px solid transparent;font-weight:650}
.assets .finance-tabs button[aria-selected=true] small{color:var(--ink)}
.assets .finance-tabs button[aria-selected=true]::after{height:100%}
.assets-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-card);overflow:hidden;background:var(--panel);min-height:470px}
.assets .finance-panel{background:transparent;border-radius:0;padding:44px 40px;min-height:0;display:flex;flex-direction:column;align-items:flex-start}
.assets .finance-panel h3{font-size:clamp(27px,2.5vw,36px);line-height:1.1;letter-spacing:-.03em}
.assets .finance-panel .text-link{margin-top:4px}
.assets .finance-panel:focus-visible{outline-offset:-5px}
.assets .finance-panel .fine{margin-top:auto;padding-top:24px;font-size:15px;line-height:1.55}
.assets-stage{position:relative;display:grid;place-items:center;padding:32px;background-color:var(--orange);background-image:conic-gradient(#ff8a63 25%,transparent 0 50%,#ff8a63 0 75%,transparent 0);background-size:44px 44px;transition:background-color .4s var(--ease)}
.assets-stage[data-kind=catering]{background-color:var(--amber);background-image:conic-gradient(#ffd391 25%,transparent 0 50%,#ffd391 0 75%,transparent 0)}
.assets-stage[data-kind=vehicles]{background-color:var(--ink);background-image:conic-gradient(#3a2a24 25%,transparent 0 50%,#3a2a24 0 75%,transparent 0)}
.assets-stage[data-kind=other]{background-color:#f2c9b2;background-image:conic-gradient(#f7d8c6 25%,transparent 0 50%,#f7d8c6 0 75%,transparent 0)}
.record{width:min(330px,100%);background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:20px 22px 12px;text-align:left}
.record-tag{display:inline-block;font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;background:var(--soft);border-radius:5px;padding:4px 8px;margin:0 0 8px}
.record dl{margin:0}
.record dl div{padding:10px 0;border-top:1px solid #ece6e1}
.record dt{font-size:13px;color:var(--muted);line-height:1.3}
.record dd{margin:2px 0 0;font-size:16px;font-weight:600;line-height:1.35}

/* 4. How it works: a dark panel with a pinned picture of who owns the asset */
.how{padding:56px var(--page) 40px}
.how-panel{background:var(--deep);color:#fff4e8;border-radius:28px;padding:72px clamp(24px,5vw,72px) 56px}
.how-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.how-head p{margin:0;color:var(--on-deep);font-size:17px;line-height:1.55;max-width:24em}
.how-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);margin-top:28px}
.how-steps{list-style:none;margin:0;padding:0}
.how-steps li{min-height:46vh;display:flex;flex-direction:column;justify-content:center;padding:26px 0;transition:opacity .35s var(--ease)}
.how-steps.is-live li{opacity:.38}
.how-steps.is-live li.is-on{opacity:1}
.how-n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#3a2a24;color:var(--orange);font-size:18px;font-weight:680;margin-bottom:22px;transition:background .35s var(--ease),color .35s var(--ease)}
.how-steps li.is-on .how-n{background:var(--orange);color:var(--ink)}
.how-steps h3{font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em;margin-bottom:14px}
.how-steps p{font-size:17px;line-height:1.6;color:var(--on-deep);max-width:25em;margin:0}
.how-visual{position:sticky;top:112px;align-self:start;height:min(520px,calc(100vh - 150px));border-radius:var(--r-card);display:grid;place-items:center;padding:28px;background-color:var(--orange);background-image:repeating-radial-gradient(circle at 100% 100%,#ff8a63 0 3px,transparent 3px 16px);transition:background-color .5s var(--ease)}
.how-visual[data-step="1"]{background-color:var(--amber);background-image:repeating-radial-gradient(circle at 100% 100%,#ffd391 0 3px,transparent 3px 16px)}
.own-card{width:min(400px,100%);background:#fff;color:var(--ink);border-radius:18px;box-shadow:var(--shadow);padding:26px 28px 24px}
.own-label{font-size:13px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.own-who{position:relative;height:50px;margin:0;font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:-.035em;line-height:50px;overflow:hidden}
.own-who span{position:absolute;left:0;top:0;white-space:nowrap;transition:transform .5s var(--ease),opacity .35s var(--ease);transform:translateY(100%);opacity:0}
.how-visual[data-step="0"] .own-who span:nth-child(1),.how-visual[data-step="1"] .own-who span:nth-child(2),.how-visual[data-step="2"] .own-who span:nth-child(3){transform:none;opacity:1}
.how-visual[data-step="1"] .own-who span:nth-child(1),.how-visual[data-step="2"] .own-who span:nth-child(-n+2){transform:translateY(-100%)}
.own-who span:nth-child(2){color:#c2410c}
.own-use{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:18px 0 0;padding:14px 16px;background:var(--panel);border-radius:10px;font-size:16px}
.own-use span{color:var(--muted)}
.own-use strong{font-weight:680}
.own-use em{font-style:normal;margin-left:auto;font-size:13px;font-weight:650;background:var(--ink);color:#fff;border-radius:5px;padding:3px 8px}
.own-rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;padding-top:22px}
.own-rail::before{content:"";position:absolute;left:0;right:0;top:4px;height:6px;border-radius:3px;background:#ece6e1}
.own-rail i{position:absolute;left:0;top:4px;height:6px;border-radius:3px;background:var(--orange);width:calc(var(--fill,0) * 100%);min-width:6px}
.own-rail b{font-size:14px;font-weight:600;color:var(--muted);transition:color .3s var(--ease)}
.own-rail b:nth-of-type(2){text-align:center}
.own-rail b:nth-of-type(3){text-align:right}
.how-visual[data-step="0"] .own-rail b:nth-of-type(1),.how-visual[data-step="1"] .own-rail b:nth-of-type(2),.how-visual[data-step="2"] .own-rail b:nth-of-type(3){color:var(--ink)}
.how-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:40px 0 0;padding:36px 0;border-top:1px solid #4a372e;border-bottom:1px solid #4a372e}
.how-facts dt{font-size:13px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--on-deep)}
.how-facts dd{margin:8px 0 0;font-size:clamp(28px,3.3vw,46px);font-weight:680;letter-spacing:-.035em;line-height:1.05;color:var(--orange);font-variant-numeric:tabular-nums}
.how-foot{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:32px}
.how-foot p{margin:0;font-size:15px;line-height:1.6;color:var(--on-deep);max-width:38em}
.how-foot .button{flex-shrink:0;white-space:nowrap}
.how-panel :focus-visible{outline-color:#fff4e8}

/* 5. The application, shown working */
.tour{padding:72px var(--page) 40px}
.tour-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:36px}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bento-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--panel);border-radius:var(--r-card);overflow:hidden;min-height:340px}
.bento-card.wide{grid-column:1/-1;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:400px}
.bento-copy{padding:38px 34px;display:flex;flex-direction:column;align-items:flex-start}
.bento-label{font-size:12px;font-weight:650;letter-spacing:.07em;color:var(--muted);margin-bottom:auto;padding-bottom:28px}
.bento-copy h3{font-size:clamp(25px,2.3vw,34px);line-height:1.1;letter-spacing:-.03em;margin-bottom:14px}
.bento-copy p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.bento-visual{position:relative;display:grid;place-items:center;padding:28px;overflow:hidden}
.v-steps{background-color:var(--soft);background-image:conic-gradient(#ffdcc8 25%,transparent 0 50%,#ffdcc8 0 75%,transparent 0);background-size:40px 40px}
.v-save{background-color:var(--amber);background-image:repeating-linear-gradient(135deg,#ffd391 0 10px,transparent 10px 20px)}
.v-ready{background-color:var(--orange);background-image:repeating-radial-gradient(circle at 0 100%,#ff8a63 0 3px,transparent 3px 15px)}
.mock{width:min(360px,100%);background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;text-align:left;font-size:15px}
.mock-top{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:13px;color:var(--muted)}
.mock-top b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.mock-top i{font-style:normal}
.mock-bar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:14px}
.mock-bar i{height:6px;background:#ece6e1;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.mock ol,.mock ul{list-style:none;margin:0;padding:0}
.mock ol{counter-reset:s}
.mock ol li{counter-increment:s;display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:8px;color:var(--muted);font-size:15px}
.mock ol li::before{content:counter(s);display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px solid #b9aea6;font-size:12px;font-weight:600;flex-shrink:0}
.mock-bar i.on{background:var(--orange)}
.mock ol li.done::before{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.mock ol li.now{background:var(--soft);color:var(--ink);font-weight:650}
.mock ol li.now::before{background:var(--ink);border-color:var(--ink);color:#fff}
.mock-field{margin:0}
.mock-field span{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.mock-field b{display:block;height:46px;border:1px solid #9c918a;border-radius:6px;font-weight:500;font-size:16px;line-height:44px;padding:0 12px;white-space:nowrap;overflow:hidden}
.mock-saved{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
.mock-saved::before{content:"";width:10px;height:10px;border-radius:50%;background:#2f8f5b}
.mock ul li{position:relative;padding:11px 0 11px 34px;border-top:1px solid #ece6e1;font-weight:600}
.mock ul li:first-child{border-top:0}
.mock ul li::before{content:"";position:absolute;left:2px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--soft)}
.mock ul li::after{content:"";position:absolute;left:9px;top:15px;width:5px;height:10px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(40deg)}

/* 6. Questions */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,7vw,110px);padding:96px var(--page) 72px}
.faq-intro h2{margin-bottom:22px}
.faq-intro p{font-size:16px;color:var(--muted);margin-bottom:4px}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{font-size:19px;font-weight:600;letter-spacing:-.01em;padding:24px 44px 24px 0}
.faq summary::after{top:22px;right:4px;width:28px;height:28px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:20px;line-height:1;transition:background .2s var(--ease),transform .3s var(--ease)}
.faq details[open] summary::after{background:var(--orange);transform:rotate(180deg)}
.faq details p{font-size:16px;line-height:1.7;max-width:36em;padding-bottom:12px}

/* 7. Closing panel */
.closing{padding:24px var(--page) 88px}
.closing-panel{position:relative;overflow:hidden;background:var(--orange);border-radius:28px;padding:84px clamp(24px,6vw,88px);isolation:isolate}
.closing-panel h2{max-width:10em}
.closing-panel p{font-size:18px;line-height:1.55;max-width:26em;margin:22px 0 30px}
.c1{right:-60px;bottom:-60px;width:340px;height:340px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,var(--cream) 0 3px,transparent 3px 15px);z-index:-1}
.c2{right:230px;top:0;width:170px;height:170px;border-radius:0 0 170px 170px;background:var(--ink);z-index:-1}

/* 8. Footer */
.foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,2fr);gap:40px;padding:64px var(--page) 28px;background:var(--panel)}
.foot .brand>svg{width:160px;height:38px;margin-left:-9px}
.foot-brand p{font-size:15px;line-height:1.7;color:var(--muted);margin:18px 0 0}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.foot-col h2{font-size:13px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;margin:0 0 10px}
.foot-col a,.foot-col .plain{font-size:15px;padding:7px 0;text-decoration:none}
.foot-col a:hover,.foot-col .plain:hover{text-decoration:underline;text-underline-offset:4px}
.foot .credit{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:20px;margin:16px 0 0;font-size:13px;color:var(--muted)}
.foot .credit a{text-decoration:underline}

/* Motion. Everything is visible without it; these classes are only added by home.js. */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .rv.in{opacity:1;transform:none}
  .bento-card.rv:nth-child(3){transition-delay:.12s}
  .kit-row.is-moving{animation:kit-slide 46s linear infinite}
  .kit-row.rev.is-moving{animation-direction:reverse}
  .kit-rows:hover .kit-row,.kit-rows.is-paused .kit-row{animation-play-state:paused}
  @keyframes kit-slide{to{transform:translateX(-50%)}}
  .collage .shape{translate:0 calc(var(--scroll,0) * var(--depth,0) * 1px);animation:drift 9s ease-in-out infinite alternate}
  .s1{--depth:-30}.s2{--depth:-90;animation-duration:7s}.s3{--depth:-50}.s4{--depth:-40}.s5{--depth:-110;animation-duration:8s}.s6{--depth:-70;animation-duration:11s}
  @keyframes drift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-9px) rotate(2.5deg)}}
  .chip{animation:bob 6s ease-in-out infinite alternate}
  .chip-term{animation-duration:7.5s;animation-delay:-2s}
  @keyframes bob{from{transform:translateY(0)}to{transform:translateY(-8px)}}
  .lead.is-paused .shape,.lead.is-paused .chip{animation-play-state:paused}
  .assets.is-auto .finance-tabs button[aria-selected=true]::after{animation:tab-fill 7s linear forwards}
  .assets.is-auto .finance-tabs:hover button::after,.assets.is-auto .finance-tabs:focus-within button::after,.assets.is-paused .finance-tabs button::after{animation-play-state:paused}
  @keyframes tab-fill{from{height:0}to{height:100%}}
  .record.swap{animation:record-in .45s var(--ease)}
  @keyframes record-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  .mock-saved.pulse{animation:saved .5s var(--ease)}
  @keyframes saved{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .faq details[open] p{animation:answer .3s var(--ease)}
  @keyframes answer{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* Narrower screens */
@media (max-width:1100px){
  .collage .funding-start{left:2%}
  .chip-term{right:2%}
  .chip-keep{right:6%}
  .s2,.s5{display:none}
}
@media (max-width:960px){
  .site-header nav{display:none}
  .assets-grid{grid-template-columns:1fr}
  .assets .finance-tabs{display:grid;grid-template-columns:1fr 1fr}
  .assets .finance-tabs button small{display:none}
  .how-body{grid-template-columns:1fr;gap:0}
  .how-visual{position:sticky;top:76px;order:-1;height:auto;z-index:1;padding:18px}
  .how-steps li,.how-steps.is-live li{min-height:0;padding:34px 0 10px;opacity:1}
  .bento{grid-template-columns:1fr}
  .bento-card,.bento-card.wide{grid-column:auto;grid-template-columns:1fr 1fr}
  .faq{grid-template-columns:1fr;gap:28px}
  .foot{grid-template-columns:1fr 1fr;gap:32px 24px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--page:20px}
  html{scroll-padding-top:76px}
  .site-header{padding:12px var(--page)}
  .site-header .brand>svg{width:128px;height:31px;margin-left:-7px}
  #main h2{font-size:33px}
  .lead{padding-top:44px;border-radius:0 0 50% 50%/0 0 28px 28px}
  .lead h1{font-size:clamp(42px,12.4vw,58px)}
  .lead-sub{font-size:16.5px;margin:18px auto 22px}
  .collage{height:auto;margin-top:34px;padding-bottom:210px}
  .collage-photo{position:relative;left:auto;margin:0 auto;width:78vw;max-width:340px;height:270px;border-radius:170px 170px 0 0}
  .collage .funding-start{left:50%;margin-left:calc(min(86vw,340px) / -2);bottom:28px;width:min(86vw,340px);max-width:none}
  .s1{left:-40px;bottom:200px;width:120px;height:120px}
  .s3{display:none}
  .s4{right:-50px;bottom:200px;width:170px;height:85px}
  .s6{right:-20px;bottom:330px;width:100px;height:100px}
  .chip-keep{right:auto;left:8px;bottom:420px;font-size:14px;padding:9px 14px 9px 10px}
  .chip-term{display:none}
  .kit{padding-top:52px}
  .kit-row li{padding:12px 18px 12px 12px;border-radius:12px}
  .assets{padding-top:64px}
  .assets-head{display:block;margin-bottom:26px}
  .assets-head p{margin-top:14px;font-size:16px}
  .assets .finance-tabs{gap:8px}
  .assets .finance-tabs button{font-size:16px;padding:14px 12px 14px 18px;min-height:0}
  .assets-card{grid-template-columns:1fr;min-height:0}
  .assets .finance-panel{padding:28px 22px}
  .assets-stage{padding:26px 18px}
  .how{padding-left:0;padding-right:0;padding-top:40px}
  .how-panel{border-radius:22px;padding:48px 20px 40px}
  .how-head{display:block}
  .how-head p{margin-top:14px;font-size:16px}
  .how-visual{top:66px;margin:24px -6px 0;padding:12px}
  .own-card{padding:18px 18px 16px}
  .own-who{height:40px;line-height:40px;font-size:30px}
  .own-use{margin-top:12px;padding:10px 12px;font-size:15px}
  .own-rail{margin-top:16px}
  .how-steps li{padding:30px 0 6px}
  .how-steps p{font-size:16px}
  .how-facts{grid-template-columns:1fr;gap:20px;padding:28px 0;margin-top:34px}
  .how-foot{display:block}
  .how-foot .button{margin-top:22px;width:100%}
  .tour{padding-top:56px}
  .tour-head{display:block}
  .tour-head .button{margin-top:22px}
  .tour-head h2 br{display:none}
  .bento{gap:16px}
  .bento-card,.bento-card.wide{grid-template-columns:1fr;min-height:0}
  .bento-copy{padding:26px 22px}
  .bento-label{padding-bottom:18px}
  .bento-visual{padding:24px 18px}
  .faq{padding:64px var(--page) 48px}
  .faq summary{font-size:17px;padding:20px 40px 20px 0}
  .faq summary::after{top:18px}
  .closing{padding:8px var(--page) 56px}
  .closing-panel{padding:52px 24px 150px;border-radius:22px}
  .closing-panel p{font-size:16.5px}
  .closing-panel .button{width:100%}
  .c1{right:-90px;bottom:-150px;width:300px;height:300px}
  .c2{right:30px;width:96px;height:96px;border-radius:0 0 96px 96px}
  .foot{grid-template-columns:1fr 1fr;gap:32px 20px;padding:44px var(--page) 22px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:420px){
  .assets .finance-tabs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .how-steps.is-live li{opacity:1}
}
@media (forced-colors:active){
  .kit-row li,.assets .finance-tabs button,.assets-card,.bento-card,.record,.mock,.own-card,.chip,.how-panel,.closing-panel{border:1px solid CanvasText}
  .assets .finance-tabs button[aria-selected=true]{outline:2px solid Highlight}
  .shape{display:none}
  .how-steps.is-live li{opacity:1}
}

/* The application view keeps its own layout: undo the homepage header behaviour there. */
.application-mode .site-header{position:static;box-shadow:none}