/* OryzaPay website — scenes: the animated tool samples, the scrolling gallery and explorer, and each page's own effects.
   Loaded after site.css on every page. Everything animated is switched on by scenes.js; without it (or with reduced motion)
   each sample simply shows its finished state. */

/* ================= TOOL SAMPLES (small pretend app windows) ================= */
.tool-host{position:relative;}
.tw-body{padding:20px 20px 18px; position:relative;}
.tw-h{font-family:'Baloo 2',sans-serif; font-size:19px; font-weight:700; letter-spacing:-0.01em; margin-bottom:12px; line-height:1.2;}
.tw-sub{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 10px;}
.tw-note{margin-top:14px; font-size:12.5px; color:var(--ink-muted); display:flex; gap:8px; align-items:flex-start; line-height:1.5;}
.tw-note svg{flex-shrink:0; margin-top:2px; color:var(--ink-dim);}
.tw-pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:100px; border:1px solid var(--line); color:var(--ink-dim); white-space:nowrap;}
.tw-pill.good{color:var(--good); border-color:rgba(111,207,151,.4); background:rgba(111,207,151,.09);}
.tw-pill.warn{color:var(--warn); border-color:rgba(240,181,74,.4); background:rgba(240,181,74,.09);}

@keyframes popIn{from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;}}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes fadeOut{from{opacity:1;} to{opacity:0;}}
@keyframes grow{from{transform:scaleX(0);} to{transform:none;}}
@keyframes blink{50%{opacity:0;}}

/* --- 1. bills found in the inbox --- */
.mail-list{position:relative; display:flex; flex-direction:column; gap:6px; padding:9px; border:1px solid var(--line); border-radius:14px; background:var(--bg-panel-2); overflow:hidden;}
.mail{display:flex; align-items:center; gap:11px; padding:8px 10px; border:1px solid transparent; border-radius:10px; font-size:13.5px; line-height:1.3;}
.mail b{display:block; font-size:13.5px; font-weight:600;}
.mail small{display:block; color:var(--ink-muted); font-size:12px;}
.mail em{margin-left:auto; font-style:normal; font-size:11.5px; color:var(--ink-muted);}
.mail .m-ico{width:28px; height:28px; border-radius:9px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink-dim);}
.mail.bill{border-color:rgba(111,207,151,.5); background:rgba(111,207,151,.09);}
.mail.skip b, .mail.skip small, .mail.skip em{color:var(--ink-muted);}
.mail.skip .m-ico{opacity:.5;}
.scanbar{position:absolute; left:0; right:0; top:-46px; height:46px; opacity:0; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(111,207,151,.3)); border-bottom:2px solid var(--good);}
.play .scanbar{animation:scan 1.4s .2s ease-in-out both;}
@keyframes scan{0%{opacity:1; top:-46px;} 92%{opacity:1;} 100%{opacity:0; top:100%;}}
.play .mail.bill{animation:hit .5s var(--t) both;}
@keyframes hit{from{border-color:transparent; background:transparent;} to{border-color:rgba(111,207,151,.5); background:rgba(111,207,151,.09);}}
.found{margin-top:14px;}
.found-row{display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-panel-2); margin-bottom:7px; font-size:14px;}
.found-row span{flex:1; min-width:0; font-weight:600;}
.found-row small{display:block; color:var(--ink-muted); font-weight:500; font-size:12px;}
.found-row b{font-family:'Baloo 2',sans-serif; font-size:16px; font-variant-numeric:tabular-nums;}
.play .found-row{animation:popIn .5s var(--t) both;}
.ap{position:relative; display:block; width:86px; height:28px; flex-shrink:0; border:1px solid rgba(111,207,151,.5); border-radius:100px; background:rgba(111,207,151,.16); color:var(--good); font-size:12px; font-weight:700; overflow:hidden; cursor:default;}
.ap span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.ap .a-idle{opacity:0; color:var(--ink);}
.play .ap{animation:apPress .5s var(--a) both;}
.play .ap .a-idle{animation:fadeOut .2s var(--a) both;}
.play .ap .a-done{animation:fadeIn .2s calc(var(--a) + .2s) both;}
@keyframes apPress{from{background:transparent; border-color:var(--line-strong); color:var(--ink); transform:none;} 45%{background:#fff; color:#0A0A0A; border-color:#fff; transform:scale(.93);} to{background:rgba(111,207,151,.16); border-color:rgba(111,207,151,.5); color:var(--good); transform:none;}}

/* --- 2. a contract, read --- */
.ct{display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; align-items:start;}
.doc{position:relative; background:#ECECEC; color:#2a2a2a; border-radius:12px; padding:14px 14px 12px; box-shadow:0 14px 30px rgba(0,0,0,.4); overflow:hidden;}
.doc b{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#555; margin-bottom:8px;}
.doc i{display:block; height:6px; border-radius:3px; background:#cfcfcf; margin:8px 0;}
.doc i.hl{background:linear-gradient(#ffe38a,#ffe38a) 0 0/100% 100% no-repeat, #cfcfcf;}
.doc i.s{width:70%;} .doc i.m{width:86%;}
.play .doc i.hl{animation:mark .5s var(--t) both;}
@keyframes mark{from{background-size:0% 100%;} to{background-size:100% 100%;}}
.doc .scanbar{background:linear-gradient(180deg,transparent,rgba(255,200,60,.35)); border-bottom-color:#e1a82b;}
.fact{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.35;}
.fact span{color:var(--ink-muted);}
.fact b{font-weight:600; text-align:right;}
.play .fact{animation:popIn .5s var(--t) both;}
.flag{margin-top:12px; padding:12px 14px; border-radius:12px; background:rgba(240,181,74,.1); border:1px solid rgba(240,181,74,.4); color:#f6d58f; font-size:13.5px; line-height:1.5;}
.play .flag{animation:popIn .6s var(--t) both;}

/* --- 3. spending --- */
.sp-top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 10px; margin-bottom:10px;}
.sp-total{font-family:'Baloo 2',sans-serif; font-size:34px; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.1;}
.bar-row{display:grid; grid-template-columns:92px 1fr 74px; gap:10px; align-items:center; font-size:13px; margin:8px 0; color:var(--ink-dim);}
.bar-row b{text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600;}
.bar{height:10px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden;}
.bar i{display:block; height:100%; width:var(--w); background:linear-gradient(90deg,#fff,#bdbdbd); border-radius:6px; transform-origin:left;}
.play .bar i{animation:grow .9s var(--t) var(--ease) both;}
.rep{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.rep span{font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink-dim);}
.rep span b{color:var(--ink); font-weight:700;}
.play .rep span{animation:popIn .4s var(--t) both;}

/* --- 4. a message to a company --- */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;}
.chips span{font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:100px; border:1px solid var(--line); color:var(--ink-dim);}
.chips span.on{background:#fff; color:#0A0A0A; border-color:#fff;}
.draft{background:var(--bg-panel-2); border:1px solid var(--line); border-radius:14px; padding:14px; font-size:14px; line-height:1.6; min-height:128px; color:var(--ink);}
.draft .caret{display:inline-block; width:2px; height:1.05em; background:#fff; vertical-align:-0.15em; margin-left:1px; opacity:0;}
.play .draft .caret{animation:blink 1s steps(2) infinite; opacity:1;}
.draft small{display:block; margin-top:8px; color:var(--ink-muted); font-size:12px;}
.consent{display:flex; gap:10px; align-items:center; margin-top:12px; font-size:13px; color:var(--ink-dim);}
.cb{width:18px; height:18px; flex-shrink:0; border:1.5px solid #fff; background:#fff; color:#0A0A0A; border-radius:5px; display:flex; align-items:center; justify-content:center;}
.play .cb{animation:cbOn .3s var(--t) both;}
@keyframes cbOn{from{background:transparent; color:transparent; border-color:var(--line-strong);} to{background:#fff; color:#0A0A0A; border-color:#fff;}}
.send-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap;}
.send{display:inline-block; border:none; border-radius:100px; padding:10px 20px; font-weight:700; font-size:13.5px; background:#fff; color:#0A0A0A;}
.play .send{animation:sendPress .5s var(--a) both;}
@keyframes sendPress{from{transform:none; opacity:1;} 45%{transform:scale(.93);} to{transform:none; background:rgba(111,207,151,.16); color:var(--good);}}
.sent{font-size:12.5px; color:var(--good); font-weight:600;}
.play .sent{animation:popIn .5s var(--s) both;}

/* --- 5. savings: spotted is not saved --- */
.sv{display:grid; grid-template-columns:1.1fr .9fr; gap:14px;}
.sv-card{background:var(--bg-panel-2); border:1px solid var(--line); border-radius:14px; padding:14px;}
.spot{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.35;}
.spot:last-of-type{border-bottom:none;}
.spot i{width:8px; height:8px; border-radius:50%; background:var(--warn); flex-shrink:0;}
.play .spot{animation:popIn .45s var(--t) both;}
.big{font-family:'Baloo 2',sans-serif; font-size:40px; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.1; color:var(--good);}
.said{margin-top:10px; border:1px dashed var(--line-strong); border-radius:10px; padding:9px 11px; font-size:13px; color:var(--ink); min-height:38px;}
.play .said{animation:popIn .4s var(--t) both;}

/* --- 6. reminders: a phone and an email --- */
.rm{display:grid; grid-template-columns:230px 1fr; gap:18px; align-items:center;}
.phone{border:1px solid var(--line-strong); border-radius:32px; background:linear-gradient(180deg,#1c1c1c,#0b0b0b); padding:16px 12px 18px; box-shadow:0 20px 40px rgba(0,0,0,.5);}
.clock{text-align:center; font-family:'Baloo 2',sans-serif; font-size:50px; font-weight:700; line-height:1; letter-spacing:-0.02em;}
.cdate{text-align:center; font-size:12px; color:var(--ink-muted); margin:4px 0 8px;}
.notif{display:flex; gap:9px; background:rgba(242,242,242,.95); color:#0A0A0A; border-radius:15px; padding:9px 11px; margin-top:8px; font-size:12px; line-height:1.35;}
.notif .ni{width:28px; height:28px; border-radius:8px; background:#0A0A0A; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.notif b{display:flex; justify-content:space-between; gap:6px; font-size:11px; margin-bottom:1px;}
.notif b em{font-style:normal; font-weight:500; color:#666;}
.play .notif{animation:notifIn .6s var(--t) var(--ease) both;}
@keyframes notifIn{from{opacity:0; transform:translateY(-26px) scale(.95);} to{opacity:1; transform:none;}}
.mailcard{background:var(--bg-panel-2); border:1px solid var(--line); border-radius:14px; padding:14px; font-size:13.5px; line-height:1.5;}
.mailcard .mh{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-muted); margin-bottom:8px;}
.mailcard strong{display:block; font-family:'Baloo 2',sans-serif; font-size:16px; margin-bottom:6px;}
.mailcard li{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:13px;}
.play .mailcard{animation:popIn .6s var(--t) both;}

@media (max-width:560px){
  .ct, .sv, .rm{grid-template-columns:minmax(0,1fr);}
  .bar-row{grid-template-columns:80px 1fr 64px;}
  .tw-body{padding:16px 14px 14px;}
  .phone{max-width:240px; margin:0 auto;}
}

/* ================= THE TOOLBOX (home): panels slide sideways as you scroll down ================= */
.toolbox{position:relative; padding:0; --pw:min(1080px, 88vw);}
.toolbox{padding-top:96px;}
.toolbox-pin{padding:0 0 40px;}
.tb-head{margin-bottom:44px;}
.tb-head h2{font-size:clamp(30px,3.8vw,46px); letter-spacing:-0.028em; color:var(--paper); max-width:720px;}
.tb-track{display:block;}
.tb-panel{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:44px; align-items:center; margin-bottom:72px;}
.tb-copy .kicker{margin-bottom:12px;}
.tb-copy h3{font-size:clamp(26px,3vw,38px); letter-spacing:-0.025em; color:var(--paper); margin-bottom:14px;}
.tb-copy p{color:var(--ink-dim); font-size:17.5px;}
.tb-copy .text-link{margin-top:20px;}
.tb-nav{display:none;}
.toolbox.pinned{padding-bottom:0;}
.toolbox.pinned .tb-scroll{height:calc(var(--n, 6) * 92vh);}
.toolbox.pinned .toolbox-pin{position:sticky; top:0; height:100vh; height:100svh; padding:calc(var(--header-h) + 8px) 0 14px; overflow:hidden; display:flex; flex-direction:column; justify-content:center;}
.toolbox.pinned .tb-track{display:flex; gap:56px; width:max-content; padding-left:max(28px, calc((100vw - var(--pw)) / 2)); will-change:transform;}
.toolbox.pinned .tb-panel{width:var(--pw); flex-shrink:0; margin-bottom:0; opacity:calc(1 - var(--dist, 0) * .72); transform:scale(calc(1 - var(--dist, 0) * .06)); transform-origin:50% 50%;}
.toolbox.pinned .tb-nav{display:flex; justify-content:center; gap:8px; margin-top:22px; flex-wrap:wrap;}
.tb-nav button{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-muted); background:transparent; border:1px solid var(--line); border-radius:100px; padding:7px 14px; transition:color .2s, background .2s, border-color .2s;}
.tb-nav button i{display:block; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5;}
.tb-nav button[aria-current="true"]{color:var(--accent-ink); background:#fff; border-color:#fff;}
.tb-nav button:hover{color:var(--ink); border-color:var(--line-strong);}
.tb-nav button[aria-current="true"]:hover{color:var(--accent-ink);}
@media (max-width:980px){
  .tb-panel{grid-template-columns:minmax(0,1fr); gap:22px; margin-bottom:56px;}
}
@media (max-height:760px) and (min-width:981px){
  .toolbox .tw-body{padding:14px 16px 12px;}
  .toolbox .tw-h{margin-bottom:8px;}
}
/* the small print of each sample sits under the text on the left in the gallery, so the windows stay short */
.toolbox .tw-note{display:none;}
.tb-fine{margin-top:18px; font-size:13.5px; color:var(--ink-muted); display:flex; gap:9px; line-height:1.5; max-width:420px;}
.tb-fine svg{flex-shrink:0; margin-top:3px;}

/* ================= THE EXPLORER (features): a list on the left, the tool on the right ================= */
.explorer{position:relative; padding:0;}
.ex-pin{padding:96px 0;}
.ex-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:center;}
.ex-list{display:flex; flex-direction:column; gap:4px;}
.ex-item{border:1px solid transparent; border-radius:18px; padding:14px 18px; cursor:pointer; transition:background .3s, border-color .3s, opacity .3s;}
.ex-item h3{font-family:'Baloo 2',sans-serif; font-size:22px; letter-spacing:-0.015em; color:var(--paper); display:flex; align-items:center; gap:12px;}
.ex-item h3 .n{width:30px; height:30px; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink-dim); flex-shrink:0; transition:background .3s, color .3s;}
.ex-item p{color:var(--ink-dim); font-size:16px; margin-top:8px; padding-left:42px;}
.ex-item ul{margin-top:10px; padding-left:42px; display:flex; flex-direction:column; gap:6px;}
.ex-item li{color:var(--ink-muted); font-size:14.5px; position:relative; padding-left:16px;}
.ex-item li::before{content:""; position:absolute; left:0; top:.7em; width:7px; height:7px; border-radius:2px; background:var(--ink-muted);}
.ex-visual{position:relative;}
.ex-visual .tool-host{transition:opacity .35s, transform .35s var(--ease);}
.ex-visual .tool-host.swap{opacity:0; transform:translateY(10px) scale(.98);}
.ex-inline{display:none;}
.explorer.pinned{height:calc(var(--n, 6) * 78vh);}
.explorer.pinned .ex-pin{position:sticky; top:0; height:100vh; height:100svh; padding:calc(var(--header-h) + 8px) 0 20px; display:flex; align-items:center;}
.explorer.pinned .ex-grid{width:100%;}
.explorer.pinned .ex-item{opacity:.42;}
.explorer.pinned .ex-item .more{display:none;}
.explorer.pinned .ex-item.on{opacity:1; background:rgba(255,255,255,.045); border-color:var(--line);}
.explorer.pinned .ex-item.on .more{display:block; animation:fadeIn .5s both;}
.explorer.pinned .ex-item.on h3 .n{background:#fff; color:#0A0A0A; border-color:#fff;}
.explorer:not(.pinned) .ex-visual{display:none;}
.explorer:not(.pinned) .ex-grid{display:block;}
.explorer:not(.pinned) .ex-item{margin-bottom:40px; padding:0; cursor:default;}
.explorer:not(.pinned) .ex-inline{display:block; margin-top:18px;}
@media (max-height:760px){ .explorer.pinned .ex-item p, .explorer.pinned .tw-note{display:none;} .explorer.pinned .ex-item.on p{display:block;} .explorer.pinned .ex-item ul{display:none;} }

/* in the normal (not sideways) layout the gallery sits inside the usual page width */
.toolbox:not(.pinned) .tb-track{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.tb-copy .tb-fine{font-size:13.5px; color:var(--ink-muted);}

/* ================= THE RICE STALK: the brand's own progress line (replaces the plain white line) ================= */
.story-steps{padding-left:50px; list-style:none;}
.story-steps::before{left:12px; width:2px; background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05));}
.story-steps::after{left:12px; width:2px; background:linear-gradient(180deg,#fff,rgba(255,255,255,.45)); box-shadow:none;}
.story-steps li{position:relative;}
.story-steps li::before{
  content:""; position:absolute; left:-37px; top:50%; width:22px; height:11px; margin-top:-8px;
  background:#fff; border-radius:0 100% 0 100%; transform-origin:0 100%; transform:rotate(-32deg) scale(0); opacity:0;
  transition:transform .6s var(--ease), opacity .4s; filter:drop-shadow(0 0 8px rgba(255,255,255,.55));
}
.story-steps li.on::before, .story-steps li.done::before{transform:rotate(-32deg) scale(1); opacity:1;}
.story-steps li.done::before{opacity:.55; filter:none;}
.story-steps li::after{content:""; position:absolute; left:-42px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:#0A0A0A; border:2px solid rgba(255,255,255,.35); transition:background .4s, border-color .4s;}
.story-steps li.on::after, .story-steps li.done::after{background:#fff; border-color:#fff;}
@media (max-width:980px){ .js .story:not(.static) .story-steps li::before, .js .story:not(.static) .story-steps li::after{display:none;} }

/* steps (home, about): the line becomes a stem, and a leaf sprouts at each step */
.fx .steps::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,.5)); box-shadow:none;}
.step-num{position:relative;}
.step-num::after{
  content:""; position:absolute; left:calc(100% - 4px); top:-4px; width:20px; height:10px; background:#fff; border-radius:0 100% 0 100%;
  transform-origin:0 100%; transform:rotate(-34deg) scale(0); transition:transform .7s var(--ease) .15s; filter:drop-shadow(0 0 7px rgba(255,255,255,.5));
}
.fx .step.lit .step-num::after{transform:rotate(-34deg) scale(1);}

/* ================= HOW IT WORKS: a journey that grows as you scroll ================= */
.journey{position:relative; max-width:1000px; margin:0 auto; padding:6px 0;}
.j-stem{position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--line); border-radius:2px;}
.j-stem i{position:absolute; left:0; top:0; width:100%; height:calc(var(--jp, 0) * 100%); background:linear-gradient(180deg,#fff,rgba(255,255,255,.5)); border-radius:2px; box-shadow:0 0 16px rgba(255,255,255,.5);}
.j-list{list-style:none; position:relative;}
.j-item{position:relative; display:flex; padding:30px 0;}
.j-node{
  position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; z-index:2;
  background:#0A0A0A; border:2px solid var(--line-strong); color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:19px;
  transition:background .4s, color .4s, border-color .4s, box-shadow .5s;
}
.j-node::after{content:""; position:absolute; left:calc(100% - 6px); top:-4px; width:22px; height:11px; background:#fff; border-radius:0 100% 0 100%; transform-origin:0 100%; transform:rotate(-34deg) scale(0); transition:transform .7s var(--ease) .2s;}
.j-item.lit .j-node{background:#fff; color:#0A0A0A; border-color:#fff; box-shadow:0 0 0 8px rgba(255,255,255,.1), 0 0 40px rgba(255,255,255,.35);}
.j-item.lit .j-node::after{transform:rotate(-34deg) scale(1);}
.j-card{
  width:calc(50% - 60px); padding:26px 28px; border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)), var(--bg-panel);
  opacity:.3; transform:translateX(-40px); transition:opacity .6s, transform .8s var(--ease), border-color .5s;
}
.j-item:nth-child(even){justify-content:flex-end;}
.j-item:nth-child(even) .j-card{transform:translateX(40px);}
.j-item.lit .j-card{opacity:1; transform:none; border-color:var(--line-strong);}
.j-card h3{font-size:23px; color:var(--paper); margin-bottom:8px;}
.j-card p{color:var(--ink-dim); font-size:16.5px;}
@media (max-width:820px){
  .j-stem{left:24px;}
  .j-node{left:24px;}
  .j-item, .j-item:nth-child(even){justify-content:flex-start; padding:20px 0;}
  .j-card, .j-item:nth-child(even) .j-card{width:auto; margin-left:68px; transform:translateX(24px);}
  .j-item.lit .j-card, .j-item:nth-child(even).lit .j-card{transform:none;}
}

/* ================= SECURITY: watch a password get scrambled, and what we can and cannot do ================= */
.pw{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)), var(--bg-panel); border:1px solid var(--line); border-radius:28px; padding:44px;}
.pw-grid{display:grid; grid-template-columns:1fr; gap:22px;}
.pw label{display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px;}
.pw input{width:100%; background:var(--bg-panel-2); border:1.5px solid var(--line); border-radius:14px; padding:15px 18px; color:var(--ink); font-family:inherit; font-size:18px; transition:border-color .15s, box-shadow .15s;}
.pw input:focus{outline:none; border-color:rgba(255,255,255,.55); box-shadow:0 0 0 4px rgba(255,255,255,.08);}
.pw-flow{display:grid; grid-template-columns:1fr auto 1.6fr; gap:18px; align-items:stretch;}
.pw-box{background:var(--bg-panel-2); border:1px solid var(--line); border-radius:16px; padding:16px 18px; min-width:0;}
.pw-box small{display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px;}
.pw-box code{display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14.5px; word-break:break-all; line-height:1.5; color:var(--ink);}
.pw-box.out code{color:#cfeedd;}
.pw-arrow{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--ink-muted); font-size:12px; font-weight:600; text-align:center; max-width:130px;}
.pw-arrow svg{color:var(--ink);}
.pw-fine{font-size:14.5px; color:var(--ink-muted); max-width:760px;}
.pw-fine strong{color:var(--ink-dim);}
.cc{margin-top:0;}
.cc-tabs{display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:100px; background:var(--bg-panel); margin-bottom:22px;}
.cc-tabs button{border:none; background:transparent; color:var(--ink-dim); font-weight:700; font-size:15px; padding:11px 24px; border-radius:100px; transition:background .25s, color .25s;}
.cc-tabs button[aria-selected="true"]{background:#fff; color:#0A0A0A;}
.cc-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.cc-item{display:flex; gap:14px; align-items:flex-start; background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:18px 20px; animation:popIn .45s var(--ease) both; animation-delay:calc(var(--i, 0) * 70ms);}
.cc-item .mk{flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.cc-item .mk.yes{background:rgba(111,207,151,.14); color:var(--good);}
.cc-item .mk.no{background:rgba(255,107,94,.12); color:var(--danger);}
.cc-item strong{display:block; font-size:16px; color:var(--ink); margin-bottom:2px;}
.cc-item span.d{color:var(--ink-muted); font-size:14.5px; line-height:1.5;}
@media (max-width:820px){ .pw{padding:26px 20px;} .pw-flow{grid-template-columns:1fr;} .pw-arrow{flex-direction:row; max-width:none;} .pw-arrow svg{transform:rotate(90deg);} .cc-list{grid-template-columns:1fr;} }

/* ================= ABOUT: each value gets the whole screen for a moment ================= */
.values-scene{position:relative; padding:0;}
.vs-pin{padding:96px 0;}
.vs-stage{max-width:1000px; margin:0 auto; text-align:center; position:relative; min-height:320px; display:flex; align-items:center; justify-content:center;}
.vs-item{position:absolute; left:0; right:0; opacity:0; transform:translateY(24px) scale(.98); transition:opacity .6s, transform .8s var(--ease); pointer-events:none;}
.vs-item.on{opacity:1; transform:none; pointer-events:auto; position:relative;}
.vs-item .vs-n{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:16px; display:block;}
.vs-item h3{font-size:clamp(40px,8vw,104px); line-height:1; letter-spacing:-0.04em; margin-bottom:24px; background:linear-gradient(180deg,#fff 30%,#9a9a9a 130%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-bottom:.08em;}
.vs-item p{max-width:640px; margin:0 auto; font-size:clamp(17px,1.6vw,21px); color:var(--ink-dim);}
.vs-dots{display:flex; justify-content:center; gap:10px; margin-top:34px;}
.vs-dots button{width:34px; height:5px; border-radius:5px; border:none; background:var(--line-strong); padding:0; transition:background .3s, width .3s;}
.vs-dots button[aria-current="true"]{background:#fff; width:54px;}
.values-scene.pinned{height:calc(var(--n, 4) * 70vh);}
.values-scene.pinned .vs-pin{position:sticky; top:0; height:100vh; height:100svh; padding:calc(var(--header-h) + 10px) 0 20px; display:flex; flex-direction:column; justify-content:center;}
.values-scene.pinned .vs-glow{position:absolute; left:50%; top:50%; width:70vmin; height:70vmin; margin:-35vmin 0 0 -35vmin; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.13),transparent 65%); filter:blur(30px); pointer-events:none; transform:translate(calc(var(--vp,0) * 24vw - 12vw), 0);}
.values-scene:not(.pinned) .vs-item{position:relative; opacity:1; transform:none; margin-bottom:60px;}
.values-scene:not(.pinned) .vs-dots, .values-scene:not(.pinned) .vs-glow{display:none;}
.values-scene:not(.pinned) .vs-stage{display:block; min-height:0;}

/* ================= FAQ: search the questions ================= */
.faq-tools{max-width:780px; margin:0 0 36px;}
.faq-search{position:relative;}
.faq-search svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--ink-muted); pointer-events:none;}
.faq-search input{width:100%; background:var(--bg-panel); border:1.5px solid var(--line); border-radius:100px; padding:16px 22px 16px 52px; font-size:17px; color:var(--ink); font-family:inherit; transition:border-color .15s, box-shadow .15s;}
.faq-search input:focus{outline:none; border-color:rgba(255,255,255,.55); box-shadow:0 0 0 4px rgba(255,255,255,.08);}
.faq-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; align-items:center;}
.faq-chips button{font-size:14px; font-weight:600; color:var(--ink-dim); background:transparent; border:1px solid var(--line); border-radius:100px; padding:8px 16px; transition:background .2s, color .2s, border-color .2s;}
.faq-chips button:hover{border-color:var(--line-strong); color:var(--ink);}
.faq-chips button[aria-pressed="true"]{background:#fff; color:#0A0A0A; border-color:#fff;}
.faq-chips .faq-all{margin-left:auto; border-style:dashed;}
.faq-count{margin-top:14px; font-size:14px; color:var(--ink-muted); min-height:22px;}
.faq-count a{text-decoration:underline; text-underline-offset:3px; color:var(--ink);}
.faq-group[hidden], details[hidden]{display:none;}
mark.hit{background:rgba(255,255,255,.22); color:#fff; border-radius:4px; padding:0 2px;}

/* ================= GUIDES: little tools that do the sum for you ================= */
.gtool{margin:30px 0; padding:26px 28px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)), var(--bg-panel);}
.gtool h2.gt{font-size:22px !important; margin:0 0 6px !important;}
.gtool .gt-sub{color:var(--ink-muted) !important; font-size:15px !important; margin:0 0 18px !important;}
.gt-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:6px;}
.gt-row label{display:block; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px;}
.gt-row input, .gt-row select{width:100%; background:var(--bg-panel-2); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--ink); font-family:inherit; font-size:16px; color-scheme:dark;}
.gt-row input:focus, .gt-row select:focus{outline:none; border-color:rgba(255,255,255,.55);}
.gt-out{margin-top:18px; padding:18px 20px; border-radius:16px; border:1px solid var(--line); background:var(--bg-panel-2); min-height:70px; transition:border-color .3s, background .3s;}
.gt-out.good{border-color:rgba(111,207,151,.45); background:rgba(111,207,151,.07);}
.gt-out.warn{border-color:rgba(240,181,74,.45); background:rgba(240,181,74,.07);}
.gt-big{font-family:'Baloo 2',sans-serif; font-size:34px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums;}
.gt-out p{margin:6px 0 0 !important; font-size:15.5px !important;}
.gt-meter{height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:12px;}
.gt-meter i{display:block; height:100%; width:var(--w,0%); background:linear-gradient(90deg,#fff,#bdbdbd); border-radius:6px; transition:width .6s var(--ease);}
.guide-filter{max-width:560px; margin:0 0 28px; position:relative;}
.guide-filter svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--ink-muted); pointer-events:none;}
.guide-filter input{width:100%; background:var(--bg-panel); border:1.5px solid var(--line); border-radius:100px; padding:15px 22px 15px 50px; font-size:16.5px; color:var(--ink); font-family:inherit;}
.guide-filter input:focus{outline:none; border-color:rgba(255,255,255,.55); box-shadow:0 0 0 4px rgba(255,255,255,.08);}

/* ================= PRICING: cards that follow the pointer; the checks tick in ================= */
.price-card{will-change:transform;}
.price-card.reveal.in .price-features li{animation:popIn .5s var(--ease) both; animation-delay:calc(var(--i, 0) * 80ms + 250ms);}
.price-card .shine{position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .3s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.12), transparent 60%);}
.price-card.featured .shine{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(0,0,0,.07), transparent 60%);}
.price-card:hover .shine{opacity:1;}

/* ================= CONTACT: a small celebration when the message is sent ================= */
.contact-card.sent-ok{border-color:rgba(111,207,151,.5);}
.plane{position:absolute; left:20px; bottom:30px; z-index:5; color:#fff; opacity:0; pointer-events:none;}
.contact-card.sent-ok .plane{animation:fly 1.6s var(--ease) both;}
@keyframes fly{0%{opacity:1; transform:translate(0,0) rotate(-8deg) scale(.8);} 60%{opacity:1;} 100%{opacity:0; transform:translate(420px,-300px) rotate(-18deg) scale(1.2);}}
.grain{position:absolute; width:16px; height:8px; border-radius:0 100% 0 100%; background:#fff; opacity:0; pointer-events:none; z-index:5;}
.contact-card.sent-ok .grain{animation:rise 1.8s var(--ease) var(--gd, 0s) both;}
@keyframes rise{0%{opacity:0; transform:translate(0,0) rotate(var(--gr, -30deg)) scale(.5);} 15%{opacity:1;} 100%{opacity:0; transform:translate(var(--gx, 0px), -170px) rotate(calc(var(--gr, -30deg) + 120deg)) scale(1);}}
.char-count{font-size:12.5px; color:var(--ink-muted); text-align:right; margin-top:-6px; margin-bottom:12px;}
.char-count.near{color:var(--warn);}

/* ================= PROVIDERS: find a company ================= */
.prov-tools{margin:6px 0 24px; max-width:560px; position:relative;}
.prov-tools svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--ink-muted); pointer-events:none;}
.prov-tools input{width:100%; background:var(--bg-panel); border:1.5px solid var(--line); border-radius:100px; padding:15px 22px 15px 50px; font-size:16.5px; color:var(--ink); font-family:inherit;}
.prov-tools input:focus{outline:none; border-color:rgba(255,255,255,.55); box-shadow:0 0 0 4px rgba(255,255,255,.08);}
.provider-card[hidden], .provider-section[hidden]{display:none;}
.prov-empty{color:var(--ink-muted); font-size:15px; margin:10px 0;}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.ex-list{list-style:none; margin:0; padding:0;}

/* ================= PHONES: fixes found on a real iPhone ================= */
/* Old inline grid styles on a few pages beat the phone layout; these win. */
@media (max-width:820px){ .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }
@media (max-width:560px){ .cat-grid{grid-template-columns:minmax(0,1fr) !important;} }
.cat-card, .cat-card h3, .cat-card p{overflow-wrap:break-word; min-width:0;}
/* The scroll fade, drift and tilt of the page headers is for large screens. On a phone it made the buttons look washed out and the
   rice branch tilt while you were still reading, so it is off there. */
@media (max-width:820px){
  .fx .hero-grid{transform:none; opacity:1; will-change:auto;}
  .fx .hero .branch-card{transform:none;}
  .fx .hero::before, .fx .page-hero::before{transform:none;}
  .fx .page-hero-inner{transform:none; opacity:1; will-change:auto;}
  .scroll-cue{display:none;}
}

/* ---- touch screens: bigger tap areas, no hover effects that stick after a tap, iOS-friendly fields ---- */
html{-webkit-tap-highlight-color:transparent;}
a, button, summary{-webkit-tap-highlight-color:transparent; touch-action:manipulation;}
.brand{min-height:44px; display:flex; align-items:center;}
.text-link{padding:10px 0 4px; margin-top:12px;}
.foot-col a{padding:9px 0; margin-bottom:0;}
.info-row a{display:inline-block; padding:8px 0;}
.aw-badge{font-size:11.5px;}
input[type="search"], input[type="date"], input[type="text"], input[type="email"], textarea{-webkit-appearance:none; appearance:none;}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
.gt-row input[type="date"]{min-height:48px;}
@media (hover:none){
  .cat-card:hover{transform:none; border-color:var(--line);}
  .cat-card:hover .icon{background:rgba(255,255,255,.07); color:var(--ink); transform:none;}
  .cat-card:hover::before, .price-card:hover::before, .promise-item:hover::before, .info-card:hover::before, .contact-card:hover::before, .provider-card:hover::before{opacity:0;}
  .btn-primary:hover, .nav-cta:hover, .price-cta:hover, .waitlist-form button:hover, .contact-submit:hover{transform:none;}
  .price-card:hover{transform:none;}
  .foot-col a:hover{transform:none;}
  .promise-item:hover, .provider-card:hover{border-color:var(--line);}
}
@media (max-width:640px){
  .to-top{width:40px; height:40px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); opacity:0;}
  .to-top.show{opacity:.85;}
}

/* short phones: the story keeps just the step title above the sample so the sample can stay readable */
@media (max-width:980px) and (max-height:740px){
  .js .story:not(.static) .story-copy .kicker, .js .story:not(.static) .story-title, .js .story:not(.static) .story-steps span{display:none;}
  .js .story:not(.static) .story-steps{min-height:0;}
}

/* ================= THE AIR BEHIND THE HEADERS: slow light only (no particles); fades in below the header and out at the bottom ================= */
.hero-fx{
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 160px,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 160px,#000 62%,transparent 100%);
}
.hero-fx .orb{position:absolute; border-radius:50%; will-change:transform; background:radial-gradient(circle, rgba(255,255,255,.11), rgba(255,255,255,0) 66%);}
.hero-fx .o1{width:64vmax; height:64vmax; left:-18vmax; top:-34vmax; animation:orbA 28s ease-in-out infinite alternate;}
.hero-fx .o2{width:46vmax; height:46vmax; right:-14vmax; top:-10vmax; background:radial-gradient(circle, rgba(255,255,255,.075), rgba(255,255,255,0) 66%); animation:orbB 34s ease-in-out infinite alternate;}
.hero-fx .o3{width:38vmax; height:38vmax; left:28%; bottom:-30vmax; background:radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,0) 66%); animation:orbC 40s ease-in-out infinite alternate;}
@keyframes orbA{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(12vmax,7vmax,0) scale(1.18);}}
@keyframes orbB{from{transform:translate3d(0,0,0) scale(1.1);} to{transform:translate3d(-9vmax,10vmax,0) scale(.9);}}
@keyframes orbC{from{transform:translate3d(0,0,0) scale(.9);} to{transform:translate3d(-14vmax,-5vmax,0) scale(1.2);}}
.page-hero .hero-fx .orb{opacity:.7;}