/* OopsMemo — oopsmemo.com  (fonts: SIL OFL, self-hosted — no third-party requests) */
@font-face{font-family:"Familjen";src:url(f/familjen-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Familjen";src:url(f/familjen-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument";src:url(f/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument";src:url(f/instrument-sans-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Instrument";src:url(f/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument";src:url(f/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#F6F7F9;      /* cool notebook white */
  --pad:#F7E7A2;     /* legal-pad yellow (app paper) */
  --pad2:#FBF0C4;
  --ink:#1B2232;     /* blue-black ink */
  --sub:#4F5869;
  --mute:#8A92A1;
  --rule:#D5E1EE;    /* ruled line blue */
  --rule2:#A9C4DE;
  --margin:#D4605A;  /* margin line — from the app icon */
  --star:#F26B1D;
  --card:#FFFFFF;
  --line:#E3E7EE;
  --sh:0 30px 60px -30px rgba(27,34,50,.35);
  --disp:"Familjen","Instrument",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --body:"Instrument",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --mx:clamp(20px,5vw,64px);           /* margin line position */
  --gut:calc(var(--mx) + clamp(22px,3.2vw,44px));
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0E131C;--pad:#1A2331;--pad2:#202B3B;--ink:#E7ECF3;--sub:#A9B2C1;--mute:#6E7889;
  --rule:#18212F;--rule2:#2A3A4F;--margin:#C1554F;--star:#FF8A3D;--card:#151C27;--line:#222C3B;
  --sh:0 30px 70px -30px rgba(0,0,0,.8);color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E131C;--pad:#1A2331;--pad2:#202B3B;--ink:#E7ECF3;--sub:#A9B2C1;--mute:#6E7889;
    --rule:#18212F;--rule2:#2A3A4F;--margin:#C1554F;--star:#FF8A3D;--card:#151C27;--line:#222C3B;
    --sh:0 30px 70px -30px rgba(0,0,0,.8);color-scheme:dark;
  }
}
:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere}
:lang(ko){--disp:"Familjen","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;--body:"Instrument","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
:lang(hi){--disp:"Familjen","Noto Sans Devanagari","Nirmala UI",sans-serif;--body:"Instrument","Noto Sans Devanagari","Nirmala UI",sans-serif}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--margin);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== the page is a ruled sheet: drifting rules + one fixed margin line ===== */
.rules{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--rule) 35px,var(--rule) 36px);
  background-size:100% 36px;will-change:background-position}
.mline{position:fixed;top:0;bottom:0;left:var(--mx);width:0;border-left:1.5px solid var(--margin);opacity:.75;z-index:-1;pointer-events:none}
.mline::after{content:"";position:absolute;top:0;bottom:0;left:4px;border-left:1px solid var(--margin);opacity:.35}

/* ===== header ===== */
.hd{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px clamp(16px,3vw,28px) 14px var(--gut);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 19px/1 var(--disp);letter-spacing:-.03em;margin-right:auto}
.mk{flex:none;width:30px;height:30px;border-radius:9px;background:var(--pad2);border:2px solid var(--margin);display:grid;place-items:center;color:var(--margin);font:700 15px/1 var(--disp)}
.lang{position:relative}
.lang select{appearance:none;-webkit-appearance:none;font:500 14px/1 var(--body);color:var(--sub);background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 30px 9px 14px;cursor:pointer}
.lang::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border:solid var(--mute);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.lang select option{color:#1B2232}
.tg{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--sub);border:1px solid var(--line)}
.tg svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.tg .moon{display:none}
:root[data-theme="dark"] .tg .sun{display:none}:root[data-theme="dark"] .tg .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tg .sun{display:none}:root:not([data-theme="light"]) .tg .moon{display:block}}
.hd .get{display:none}

/* ===== store button ===== */
.play{display:inline-flex;align-items:center;gap:12px;padding:12px 22px 12px 16px;border-radius:14px;background:var(--ink);color:var(--bg);text-decoration:none;transition:transform .2s}
.play:hover{transform:translateY(-2px)}
.play svg{width:24px;height:24px;flex:none}
.play span{display:flex;flex-direction:column;line-height:1.15}
.play small{font-size:11px;opacity:.75;font-weight:500}
.play b{font:700 18px/1.1 var(--disp);letter-spacing:-.01em}
.play[aria-disabled="true"]{cursor:default}
.play[aria-disabled="true"]:hover{transform:none}

/* ===== layout ===== */
.wrap{padding-left:var(--gut);padding-right:clamp(16px,4vw,48px);max-width:1280px}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);column-gap:clamp(24px,6vw,96px);align-items:start}
.story > .hero{grid-column:1;grid-row:1}
.steps{grid-column:1;grid-row:2;min-width:0}
.stage{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(50vh - 330px);height:660px;display:grid;place-items:center;perspective:1400px}

/* hero (first step) */
.step{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:8vh 0;max-width:560px}
.step.hero{min-height:calc(100vh - 66px);padding-top:4vh}
h1{font:700 clamp(46px,7.4vw,96px)/.95 var(--disp);letter-spacing:-.045em;text-wrap:balance}
:lang(ko) h1,:lang(hi) h1{line-height:1.12;letter-spacing:-.03em;font-size:clamp(40px,6.4vw,82px)}
.lead{margin-top:26px;font-size:clamp(18px,1.6vw,21px);color:var(--sub);max-width:30em;text-wrap:pretty}
.cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.cta p{font-size:14px;color:var(--mute)}
h2{font:700 clamp(32px,4.2vw,54px)/1.02 var(--disp);letter-spacing:-.035em;text-wrap:balance}
:lang(ko) h2,:lang(hi) h2{line-height:1.2;letter-spacing:-.025em}
.step p.d{margin-top:20px;font-size:18px;color:var(--sub);max-width:28em;text-wrap:pretty}
.ladder{margin-top:28px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 14px/1 var(--body);color:var(--sub)}
.ladder span{padding:9px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.ladder .on{border-color:var(--star);color:var(--star)}
.ladder i{font-style:normal;color:var(--mute)}
.langs{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.langs a{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);text-decoration:none;font-weight:500;font-size:15px}
.langs a[aria-current]{border-color:var(--ink)}

/* ===== the phone ===== */
.phone{position:relative;width:300px;height:620px;border-radius:46px;padding:11px;background:linear-gradient(145deg,#2A3140,#11151D);box-shadow:var(--sh),inset 0 0 0 1.5px rgba(255,255,255,.08);transform-style:preserve-3d;will-change:transform}
.phone::before{content:"";position:absolute;top:22px;left:50%;width:74px;height:20px;margin-left:-37px;border-radius:12px;background:#0A0D12;z-index:5}
.scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#F3EFE3;color:#1F1B12;font:400 13px/1.4 var(--body);display:flex;flex-direction:column}
:root[data-theme="dark"] .scr{background:#0F141B;color:#E9EDF2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scr{background:#0F141B;color:#E9EDF2}}
.s-top{display:flex;align-items:center;gap:7px;padding:48px 16px 10px;font:700 15px/1 var(--disp);letter-spacing:-.03em}
.s-top .mk{width:22px;height:22px;border-radius:7px;font-size:11px;border-width:1.5px}
.s-chips{display:flex;gap:5px;padding:0 14px 10px}
.s-chips i{font-style:normal;font-size:10.5px;font-weight:600;padding:5px 9px;border-radius:99px;background:rgba(0,0,0,.06)}
.s-chips i:first-child{background:#1F1B12;color:#F3EFE3}
:root[data-theme="dark"] .s-chips i{background:rgba(255,255,255,.07)} :root[data-theme="dark"] .s-chips i:first-child{background:#E9EDF2;color:#0F141B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .s-chips i{background:rgba(255,255,255,.07)}:root:not([data-theme="light"]) .s-chips i:first-child{background:#E9EDF2;color:#0F141B}}
.s-paper{position:relative;flex:1;margin:0 10px;border-radius:14px 14px 0 0;overflow:hidden;
  --p:#FBF0C4;--r:#A9C4DE;--m:#D9736B;
  background:var(--p) linear-gradient(to right,transparent 30px,color-mix(in srgb,var(--m) 60%,transparent) 30px,color-mix(in srgb,var(--m) 60%,transparent) 31.5px,transparent 31.5px);
  box-shadow:0 8px 20px -14px rgba(60,45,10,.5)}
:root[data-theme="dark"] .s-paper{--p:#1B2430;--r:#2B3A4C;--m:#7A3B3B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .s-paper{--p:#1B2430;--r:#2B3A4C;--m:#7A3B3B}}
.s-paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,var(--r) 37px,var(--r) 38px)}
.s-list{list-style:none;position:relative;z-index:1}
.s-list li{position:relative;height:38px;overflow:hidden;transition:height .5s cubic-bezier(.2,.7,.2,1),opacity .4s}
.s-list .it{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 10px 0 38px;background:var(--p) linear-gradient(to right,transparent 30px,color-mix(in srgb,var(--m) 60%,transparent) 30px,color-mix(in srgb,var(--m) 60%,transparent) 31.5px,transparent 31.5px);border-bottom:1px solid var(--r);transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:1}
.s-list .tx{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;transition:color .3s}
.s-list .tx::after{content:"";position:absolute;left:38px;top:50%;height:1.5px;width:0;background:currentColor;transition:width .45s .15s}
.s-list .st{position:absolute;left:11px;top:50%;width:13px;height:13px;margin-top:-6.5px;opacity:0;transform:scale(.4);transition:.35s .2s;color:var(--star)}
.s-list .bg{position:absolute;inset:0;display:flex;align-items:center;padding:0 14px;font-weight:800;font-size:12px;color:#fff}
.s-list .bgR{background:#F26B1D}.s-list .bgL{background:#9C9481;justify-content:flex-end}
.s-list .th{flex:none;width:24px;height:24px;border-radius:5px;background:linear-gradient(160deg,#9FC3E9 0 45%,#5E9B6A 45% 70%,#3E6E4C 70%)}
.s-list li.new{height:0;opacity:0}
.s-list li.new .tx{color:#2F6FEB}
/* states */
.phone[data-s="1"] li.new,.phone[data-s="2"] li.new,.phone[data-s="3"] li.new,.phone[data-s="4"] li.new,.phone[data-s="5"] li.new,.phone[data-s="6"] li.new{height:38px;opacity:1}
.phone.s2 li.r2 .it{animation:swR 1.6s cubic-bezier(.2,.7,.2,1) both}
.phone.s2 li.r3 .it{animation:swL 1.6s .9s cubic-bezier(.2,.7,.2,1) both}
.phone.s2p li.r2 .st{opacity:1;transform:none}
.phone.s2p li.r3 .tx{color:#9C9481}.phone.s2p li.r3 .tx::after{width:calc(100% - 48px)}
@keyframes swR{0%{transform:none}45%,55%{transform:translateX(62%)}100%{transform:none}}
@keyframes swL{0%{transform:none}45%,55%{transform:translateX(-55%)}100%{transform:none}}

.s-pend{display:flex;gap:6px;align-items:center;padding:8px 12px 0;height:0;opacity:0;overflow:hidden;transition:.45s;background:#FFFDF6}
.s-pend i{width:38px;height:38px;border-radius:8px;flex:none;background:linear-gradient(160deg,#F6C28B 0 40%,#E07A5F 40% 62%,#7C4D3A 62%)}
.s-pend i+i{background:linear-gradient(160deg,#9FC3E9 0 45%,#5E9B6A 45% 70%,#3E6E4C 70%)}
.s-pend b{font-size:10.5px;color:#2F6FEB;margin-left:4px}
.s-bar{display:flex;align-items:center;gap:6px;padding:8px 10px 18px;background:#FFFDF6;border-top:1px solid #E6DFCB}
:root[data-theme="dark"] .s-bar,:root[data-theme="dark"] .s-pend{background:#161C25;border-color:#253040}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .s-bar,:root:not([data-theme="light"]) .s-pend{background:#161C25;border-color:#253040}}
.s-bar .in{flex:1;height:34px;border-radius:11px;background:rgba(0,0,0,.05);display:flex;align-items:center;padding:0 10px;font-size:12px;color:#8F8670;white-space:nowrap;overflow:hidden}
:root[data-theme="dark"] .s-bar .in{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .s-bar .in{background:rgba(255,255,255,.06)}}
.s-bar .in::after{content:"";width:1.5px;height:15px;background:#2F6FEB;margin-left:2px;animation:blink 1s steps(1) infinite}
.s-bar .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(0,0,0,.05);font-size:13px}
.s-bar .go{background:#1F1B12;color:#fff}
@keyframes blink{50%{opacity:0}}
.phone[data-s="3"] .s-pend{height:54px;opacity:1}

.ov{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity .45s}
.ov-lb{background:#000;display:grid;place-items:center}
.ov-lb .ph{width:100%;aspect-ratio:3/4;background:linear-gradient(170deg,#F6C28B 0 38%,#E07A5F 38% 58%,#7C4D3A 58% 78%,#3B2A23 78%);transform:scale(1);transition:transform 1.4s .5s cubic-bezier(.2,.7,.2,1)}
.ov-lb .n{position:absolute;bottom:26px;color:rgba(255,255,255,.8);font-size:11px;font-weight:700}
.phone.s3z .ov-lb{opacity:1}.phone.s3z .ov-lb .ph{transform:scale(1.6)}

.ov-safe{display:grid;place-items:center;background:color-mix(in srgb,#F3EFE3 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root[data-theme="dark"] .ov-safe{background:color-mix(in srgb,#0F141B 72%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ov-safe{background:color-mix(in srgb,#0F141B 72%,transparent)}}
.safe{width:228px;padding:20px 18px;border-radius:20px;background:#fff;color:#1F1B12;box-shadow:0 20px 40px -20px rgba(0,0,0,.4);transform:translateY(16px);transition:transform .5s}
:root[data-theme="dark"] .safe{background:#1B222D;color:#E9EDF2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .safe{background:#1B222D;color:#E9EDF2}}
.safe svg{width:34px;height:34px;fill:none;stroke:#D9736B;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.safe b{display:block;margin-top:10px;font:700 15px/1.25 var(--disp)}
.safe code{display:block;margin-top:10px;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.05);font:500 10.5px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#6E6553}
:root[data-theme="dark"] .safe code{background:rgba(255,255,255,.06);color:#9AA4B1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .safe code{background:rgba(255,255,255,.06);color:#9AA4B1}}
.safe .off{margin-top:10px;font-size:10.5px;color:#6E6553;display:flex;gap:6px;align-items:center}
.safe .off::before{content:"";width:7px;height:7px;border-radius:50%;background:#3BA55D}
.phone[data-s="4"] .ov-safe{opacity:1}.phone[data-s="4"] .safe{transform:none}

.ov-share{background:rgba(0,0,0,.28);display:flex;align-items:flex-end}
.sheet{width:100%;padding:16px 14px 22px;border-radius:20px 20px 0 0;background:#fff;color:#1F1B12;transform:translateY(100%);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
:root[data-theme="dark"] .sheet{background:#1B222D;color:#E9EDF2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet{background:#1B222D;color:#E9EDF2}}
.sheet .f{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(0,0,0,.05);font-size:11.5px;font-weight:600}
:root[data-theme="dark"] .sheet .f{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet .f{background:rgba(255,255,255,.06)}}
.sheet .f i{width:30px;height:36px;border-radius:5px;background:#F7E7A2;border-left:3px solid #D9736B;flex:none}
.sheet .f small{display:block;font-weight:400;color:#8F8670}
.sheet .apps{display:flex;justify-content:space-between;margin-top:14px}
.sheet .apps i{width:40px;height:40px;border-radius:12px;background:#E9E4D6}
.sheet .apps i:nth-child(1){background:#4C8BF5}.sheet .apps i:nth-child(2){background:#FEE500}.sheet .apps i:nth-child(3){background:#25D366}.sheet .apps i:nth-child(4){background:#2AABEE}
.phone[data-s="5"] .ov-share{opacity:1}.phone[data-s="5"] .sheet{transform:none}

/* ===== price band: a full sheet of legal pad ===== */
.band{position:relative;margin-top:6vh;padding:clamp(64px,10vw,120px) 0;background:var(--pad);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,color-mix(in srgb,var(--rule2) 60%,transparent) 35px,color-mix(in srgb,var(--rule2) 60%,transparent) 36px)}
.band::before{content:"";position:absolute;top:0;bottom:0;left:var(--mx);border-left:1.5px solid var(--margin)}
.band h2{max-width:14em}
.band .d{margin-top:18px;font-size:18px;color:var(--sub);max-width:32em}
.plans{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:900px}
.plan{padding:28px 28px 30px;background:var(--card);border-radius:22px;box-shadow:0 20px 40px -30px rgba(27,34,50,.4)}
.plan.pro{background:var(--ink);color:var(--bg)}
.plan h3{font:700 24px/1.1 var(--disp);letter-spacing:-.02em}
.plan .pr{margin-top:8px;font-size:15px;color:var(--mute);min-height:2.6em}
.plan.pro .pr{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.plan ul{list-style:none;margin-top:18px;display:grid;gap:10px;font-size:16px}
.plan li{display:flex;gap:10px;align-items:baseline}
.plan li::before{content:"";flex:none;width:12px;height:7px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-3px);opacity:.6}
.plan.pro li::before{border-color:var(--star);opacity:1}

/* ===== FAQ ===== */
.faq{padding-top:clamp(70px,10vw,130px);padding-bottom:40px}
.faq h2{margin-bottom:28px}
.faq details{max-width:760px;border-bottom:1px solid var(--rule2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:600 19px/1.35 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--body);color:var(--mute);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--sub);max-width:40em}

/* ===== closing + footer ===== */
.end{padding-top:40px;padding-bottom:90px}
.end h2{max-width:12em}
.end .cta{margin-top:28px}
.ft{padding-top:30px;padding-bottom:40px;border-top:1px solid var(--line);font-size:14px;color:var(--mute);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.ft nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.ft a{text-decoration:none;color:var(--sub)}
.ft a:hover{color:var(--ink)}
.ft .co{margin-left:auto}

/* ===== legal pages ===== */
.doc{max-width:740px;padding-top:56px;padding-bottom:80px}
.doc h1{font-size:clamp(38px,5vw,60px)}
.doc .eff{margin-top:14px;color:var(--mute);font-size:15px}
.doc h2{font-size:24px;margin:44px 0 12px;letter-spacing:-.02em}
.doc p,.doc li{color:var(--sub);font-size:17px}
.doc p+p{margin-top:12px}
.doc ul{margin:10px 0 0 1.2em;display:grid;gap:6px}
.doc a{color:var(--ink)}

/* ===== responsive ===== */
@media (max-width:900px){
  .story{grid-template-columns:1fr}
  .story > .hero{grid-row:1}
  .stage{grid-column:1;grid-row:2;top:64px;height:min(52vh,470px);z-index:1;pointer-events:none;margin-top:4vh}
  .steps{grid-row:3;position:relative;z-index:2}
  .step{min-height:92vh;justify-content:flex-end;padding:0 0 6vh;max-width:none}
  .step .card{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-left:calc(-1 * clamp(14px,3vw,22px));padding:20px clamp(14px,3vw,22px) 22px;border-radius:20px;box-shadow:0 10px 30px -20px rgba(27,34,50,.4)}
  .step.hero{min-height:auto;padding:6vh 0 0;justify-content:flex-start}
  .step.hero .card{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:0;margin:0}
  .plans{grid-template-columns:1fr}
  .ft .co{margin-left:0}
}
@media (max-width:560px){
  .hd{gap:8px}
  .lang select{padding:8px 26px 8px 11px;font-size:13px}
  .tg{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}