/* Guide pages: shared components. Layout lives in each page design's own stylesheet. */
@font-face{font-family:'Figtree';src:url(../fonts/Figtree-var.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Hind Siliguri';src:url(../fonts/HindSiliguri-Regular.woff2) format('woff2');font-weight:400;font-display:swap;size-adjust:106%;}
@font-face{font-family:'Hind Siliguri';src:url(../fonts/HindSiliguri-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap;size-adjust:106%;}
@font-face{font-family:'Hind Siliguri';src:url(../fonts/HindSiliguri-Bold.woff2) format('woff2');font-weight:700 900;font-display:swap;size-adjust:106%;}
@font-face{font-family:'Tiro Bangla';src:url(../fonts/TiroBangla-Regular.woff2) format('woff2');font-weight:400;font-display:swap;size-adjust:110%;}

:root{--bg:#f4f5fa;--card:#fff;--ink:#18234d;--soft:#4d5576;--line:#e1e4ef;--peri:#7c91d0;--cobalt:#27418e;--cobalt-dk:#1d3270;--peach:#efa67d;--peach-dk:#e48f60;--magenta:#b24680;--ice:#add1e7;--green:#16a34a;--red:#e0344f;
  --sans:'Figtree','Hind Siliguri','Nirmala UI',system-ui,sans-serif;--mono:Consolas,'Cascadia Mono','Noto Sans Mono',monospace;
  --shadow:0 1px 2px rgba(24,35,77,.04),0 12px 32px -12px rgba(24,35,77,.18);--ease:cubic-bezier(.16,1,.3,1);}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-color:var(--peri) var(--bg);}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased;caret-color:var(--magenta);}
::selection{background:var(--peach);color:var(--ink);}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:10px;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance;}
code{font-family:var(--mono);}
.ic{width:1.1em;height:1.1em;flex:none;}

/* inline chips */
.ui{font-weight:700;background:#eef0f8;border:1px solid #d7dbea;border-radius:7px;padding:0 6px;font-size:.92em;white-space:nowrap;}
kbd{font:700 .82em/1.6 var(--sans);background:#fff;border:1px solid #c9cfe2;border-bottom-width:3px;border-radius:7px;padding:0 7px;white-space:nowrap;}

/* instruction list */
ol.do{list-style:none;margin:0;padding:0;counter-reset:d;}
ol.do > li{counter-increment:d;position:relative;padding-left:38px;margin:0 0 14px;}
ol.do > li::before{content:counter(d);position:absolute;left:0;top:3px;width:26px;height:26px;border-radius:50%;background:var(--peach);font:800 14px/26px var(--sans);text-align:center;}

/* copy boxes */
.copy{display:flex;align-items:stretch;margin:8px 0 2px;border:1.5px solid var(--cobalt);border-radius:12px;overflow:hidden;background:#fff;min-width:0;max-width:100%;}
.copy code{flex:1;min-width:0;padding:9px 12px;font-size:15px;white-space:pre;overflow-x:auto;}
.cbtn{flex:none;border:0;background:var(--cobalt);color:#fff;font:700 15px var(--sans);padding:0 18px;cursor:pointer;transition:background-color .2s;}
.cbtn:hover{background:var(--cobalt-dk);} .cbtn.done{background:var(--green);}
.copy.small code{font-size:13px;}
.copy.block{flex-direction:column;border:0;}
.copy.block code{background:var(--ink);color:#e8ebf7;font-size:13.5px;line-height:1.6;padding:14px 16px;}
.copy.block .cbtn{padding:13px;font-size:17px;}

/* key builder */
.builder{background:#fff;border:2px solid var(--cobalt);border-radius:18px;padding:16px;margin:0 0 18px;}
.builder label{display:block;font-weight:700;margin-bottom:6px;}
#keyin{width:100%;font:16px var(--mono);padding:12px 14px;border:1.5px solid #b8bfd6;border-radius:10px;background:#fbfbfe;}
#keyin:focus{outline:3px solid var(--peach);border-color:var(--ink);}
.kmsg{min-height:1.4em;margin:6px 0;font-weight:700;font-size:15px;}
.kmsg.ok{color:var(--green);} .kmsg.bad{color:#c2410c;}
.safe{margin:8px 0 0;font-size:14px;color:var(--soft);}
.builder .field{margin-bottom:12px;}
.builder label b,.ready b{color:var(--magenta);}
.builder .opt{display:block;font-weight:400;font-size:15px;color:var(--soft);}
#existing{width:100%;font:14px/1.5 var(--mono);padding:10px 12px;border:1.5px dashed #b8bfd6;border-radius:10px;background:#fbfbfe;resize:vertical;min-height:84px;}
#existing:focus{outline:3px solid var(--peach);border-style:solid;border-color:var(--ink);}
.ready{margin:4px 0 6px;font-weight:700;}

/* screenshots with red marks */
.shots{display:grid;gap:12px;margin:6px 0 4px;}
.shots.n2{grid-template-columns:repeat(2,minmax(0,1fr));}
.shot{position:relative;margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;}
.shot img{width:100%;}
.mark{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border:3px solid var(--red);border-radius:8px;box-shadow:0 0 0 3px rgba(239,166,125,.75);}
.mark i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font:800 12px/22px var(--sans);font-style:normal;text-align:center;}

/* trust question (drawn) */
.trust{background:#1f2128;color:#d6d8e0;border-radius:14px;padding:14px;margin:4px 0 8px;font-family:'Segoe UI',var(--sans);font-size:14px;}
.t-q{margin:0 0 10px;color:#fff;font-weight:600;}
.t-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.t-btns span{border-radius:6px;padding:8px;text-align:center;}
.t-yes{background:#0e639c;color:#fff;outline:3px solid var(--red);outline-offset:2px;}
.t-no{background:#3a3d46;}

.note{margin:10px 0 0;font-size:15.5px;color:var(--soft);}
.fallback{margin:4px 0 8px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;}
.fallback summary{cursor:pointer;font-weight:700;color:var(--cobalt);}
.fallback p{margin:8px 0 0;}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:12px 0;}
.faq summary{cursor:pointer;font-weight:700;}
.faq p{margin:6px 0 0;color:var(--soft);}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120px);background:var(--green);color:#fff;font-weight:700;border-radius:999px;padding:10px 20px;transition:transform .25s;z-index:30;}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast{width:max-content;max-width:calc(100vw - 32px);text-align:center;font-size:15px;line-height:1.35;border-radius:16px;}

/* in-app browser banner (Facebook / Instagram) */
.inapp{display:flex;align-items:center;gap:8px;background:#18234d;color:#fff;padding:6px 8px 6px 14px;font-size:13.5px;line-height:1.3;}
.inapp[hidden]{display:none;}
.inapp p{margin:0;flex:1;min-width:0;}
.inapp b{color:#efa67d;}
.inapp-btn{flex:none;display:inline-flex;align-items:center;border:0;border-radius:999px;background:#efa67d;color:#18234d;font:inherit;font-weight:700;padding:5px 11px;text-decoration:none;cursor:pointer;white-space:nowrap;}
.inapp-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);}
.inapp-btn[hidden]{display:none;}
.inapp-x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;}

@media (max-width:600px){
  body{font-size:17px;}
  .shots.n2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
  .copy code{font-size:14px;}
}
/* "do it with ChatGPT / Gemini" */
.ai{margin-top:12px;}
.ai-btns{display:flex;flex-wrap:wrap;gap:10px;}
.ai-btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 220px;text-decoration:none;font-weight:700;border-radius:14px;padding:13px 16px;background:var(--ink);color:#fff;text-align:center;transition:transform .3s var(--ease);}
.ai-btn.alt{background:var(--cobalt);}
.ai-btn:hover{transform:translateY(-2px);}
.copy.prompt code{white-space:pre-wrap;max-height:320px;overflow:auto;font-size:13px;}
/* ---------- Windows / Mac ---------- */
.k-mac{display:none;}
html.os-mac .k-win{display:none;}
html.os-mac .k-mac{display:inline;}
html:not(.os-mac) .os-mac{display:none !important;}
html.os-mac .os-win{display:none !important;}
.os-switch{display:inline-flex;background:#e6e9f4;border-radius:999px;padding:3px;gap:2px;margin:0 0 16px;}
.os-switch button{border:0;background:transparent;font:700 14px var(--sans);color:var(--soft);padding:6px 14px;border-radius:999px;cursor:pointer;}
.os-switch button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(24,35,77,.15);}
.os-switch .lbl{align-self:center;font-size:13px;color:var(--soft);padding:0 6px 0 10px;}