/* ============================================================================
   how-to.css — SHARED design system for all how-to-* guide pages (light-2026 · orange)
   ----------------------------------------------------------------------------
   ONE central file for the 15 support/pages/how-to-*.html pages. Each page ships
   only its own CONTENT markup; all look/feel + responsive layout lives here.
   Chrome (sidebar/topbar) = real app-shell (appshell.js/appshell.css).
   Load AFTER shared/css/* and appshell.css, as a plain (non-media) stylesheet.
   ============================================================================ */
:root{
  --canvas:#F4F5F7; --surface:#FFFFFF; --surface-2:#FBFBFC;
  --line:#E8EAEF; --line-2:#EDEFF3;
  --ink:#181A1D; --ink-2:#565C64; --muted:#98A0A8;
  --accent:#EF5F06; --accent-2:#FF7A1A; --accent-ink:#B4560B;
  --accent-soft:#FFF1E8; --accent-border:#FFD8BE;
  --ok:#158A5B; --ok-soft:#E3F4EC;
  --shadow-sm:0 10px 24px -18px rgba(20,25,35,.28);
  --shadow:0 22px 48px -30px rgba(20,25,35,.30);
  --shadow-lg:0 34px 70px -36px rgba(20,25,35,.36);
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  /* fonts = site standard (fonts.css / tokens.css): Mitr headings · Prompt body · Space Grotesk numbers */
  --font: var(--font-body, 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --fdisp: var(--font-display, 'Mitr', sans-serif);
  --num: var(--font-numeric, 'Space Grotesk', 'Mitr', sans-serif);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#121418; --surface:#1B1E24; --surface-2:#20242B; --line:#2A2F38; --line-2:#252A32;
  --ink:#F1F3F6; --ink-2:#AEB6C1; --muted:#79828D;
  --accent:#FF7A1A; --accent-2:#FF9A4D; --accent-ink:#FFB47A;
  --accent-soft:rgba(255,122,26,.13); --accent-border:rgba(255,122,26,.34);
  --ok:#3FBF88; --ok-soft:rgba(63,191,136,.14);
  --shadow-sm:0 10px 24px -18px rgba(0,0,0,.6); --shadow:0 22px 48px -28px rgba(0,0,0,.7); --shadow-lg:0 34px 70px -34px rgba(0,0,0,.75);
}}
:root[data-theme="dark"]{
  --canvas:#121418; --surface:#1B1E24; --surface-2:#20242B; --line:#2A2F38; --line-2:#252A32;
  --ink:#F1F3F6; --ink-2:#AEB6C1; --muted:#79828D;
  --accent:#FF7A1A; --accent-2:#FF9A4D; --accent-ink:#FFB47A;
  --accent-soft:rgba(255,122,26,.13); --accent-border:rgba(255,122,26,.34); --ok:#3FBF88; --ok-soft:rgba(63,191,136,.14);
  --shadow-sm:0 10px 24px -18px rgba(0,0,0,.6); --shadow:0 22px 48px -28px rgba(0,0,0,.7); --shadow-lg:0 34px 70px -34px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.18;letter-spacing:-.01em;font-weight:600;font-family:var(--fdisp)}
p{margin:0}
svg{display:block}
.tnum{font-family:var(--num);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- mobile header (shell hides it on desktop) ---------- */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:10px;padding:11px 12px}
.ib{width:38px;height:38px;border:none;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none}.ib svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.htitle{font-family:var(--fdisp);font-weight:600;font-size:17px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- content shell ---------- */
main.page{padding:16px 16px 40px;max-width:1220px}
.crumb{display:none;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin:6px 2px 18px}
.crumb a:hover{color:var(--ink-2)}
.crumb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.crumb b{color:var(--ink-2);font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--num);font-size:11.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--accent)}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--accent-2) 12%,transparent), transparent 55%),linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);display:grid;gap:20px;padding:26px 22px}
.hero-l{align-self:center}
.hero h1{font-size:clamp(25px,7vw,42px);margin:14px 0 12px}
.hero h1 .hl{color:var(--accent)}
.hero .lead{color:var(--ink-2);font-size:15px;line-height:1.65}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 22px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.chip svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.9}
.cta-row{display:flex;flex-wrap:wrap;gap:11px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;border-radius:13px;font-family:var(--fdisp);font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;transition:transform .14s,box-shadow .14s,background .14s}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.btn.primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;box-shadow:0 16px 30px -14px var(--accent)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px var(--accent)}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent-border);color:var(--accent-ink)}
.hero-r{align-self:stretch;display:flex}

/* ---------- illustration slot (placeholder for real art) ---------- */
.ill{margin:0;position:relative;width:100%;min-height:200px;border-radius:var(--r-md);border:1.5px dashed var(--accent-border);
  background:repeating-linear-gradient(-45deg,transparent,transparent 12px,color-mix(in srgb,var(--accent) 5%,transparent) 12px,color-mix(in srgb,var(--accent) 5%,transparent) 13px),var(--accent-soft);
  display:grid;place-items:center;text-align:center;padding:20px;overflow:hidden}
.ill-badge{position:absolute;top:12px;left:12px;font-family:var(--num);font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--accent-ink);background:var(--surface);border:1px solid var(--accent-border);padding:4px 9px;border-radius:999px}
.ill .ic{width:52px;height:52px;border-radius:15px;background:var(--surface);border:1px solid var(--accent-border);display:grid;place-items:center;margin:0 auto 12px;box-shadow:var(--shadow-sm)}
.ill .ic svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.7}
.ill .t{font-weight:700;font-size:14px;color:var(--ink)}
.ill .d{margin-top:5px;font-family:var(--num);font-size:11.5px;color:var(--accent-ink);letter-spacing:.3px}
.ill .note{margin-top:8px;font-size:11.5px;color:var(--ink-2);max-width:30ch}
/* drop a real image straight in: <figure class="ill"><img ...></figure> hides the placeholder scaffold.
   Transparent illustrations float on the card (no frame) and never crop the subject. */
.ill:has(> img){border:0;background:none;padding:0;min-height:0;aspect-ratio:auto!important}
.ill > img{width:100%;height:auto;display:block;border-radius:inherit}
.ill:has(> img) .ill-badge{display:none}

/* ---------- sections ---------- */
.section{margin-top:28px}
.sec-head{margin-bottom:16px}
.sec-head h2{font-size:clamp(20px,5vw,26px);margin-top:9px}
.sec-head p{color:var(--ink-2);margin-top:7px}
.steps-grid{display:grid;gap:16px;align-items:start}

/* steps timeline */
.timeline{position:relative;display:flex;flex-direction:column;gap:12px}
.step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s}
.step:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-border)}
.step .num{width:48px;height:48px;border-radius:14px;background:linear-gradient(140deg,var(--accent-2),var(--accent));color:#fff;display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:19px;flex:none;box-shadow:0 10px 20px -10px var(--accent);z-index:1}
.step .b{min-width:0}
.step .st-t{display:flex;align-items:center;gap:9px;font-family:var(--fdisp);font-weight:600;font-size:15.5px}
.step .st-t .si{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center;flex:none}
.step .st-t .si svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.9}
.step .st-d{margin-top:6px;color:var(--ink-2);font-size:13.5px}

/* aside */
.aside{display:flex;flex-direction:column;gap:16px}
.aside .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-sm)}
.aside .panel h3{font-size:16px}
.aside .panel p{color:var(--ink-2);font-size:13.5px;margin-top:6px}
.aside .panel .btn{width:100%;margin-top:14px;height:44px}
.mini-ill{aspect-ratio:1/1}

/* features */
.features{display:grid;grid-template-columns:1fr;gap:14px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}
.feat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.feat .fi{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:13px}
.feat .fi svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.8}
.feat b{font-family:var(--fdisp);font-weight:600;font-size:15.5px}
.feat p{color:var(--ink-2);font-size:13.5px;margin-top:6px}

/* CTA */
.cta{margin-top:28px;display:grid;gap:0;align-items:center;border-radius:var(--r-lg);border:1px solid var(--accent-border);overflow:hidden;
  background:linear-gradient(120deg, color-mix(in srgb,var(--accent) 10%,var(--surface)), var(--surface) 70%);box-shadow:var(--shadow)}
.cta-l{padding:28px 22px}
.cta h2{font-size:clamp(21px,5.5vw,28px)}
.cta p{color:var(--ink-2);margin:10px 0 20px;font-size:15px}
.cta-ill.ill{border-radius:0;border:0;border-top:1.5px dashed var(--accent-border);aspect-ratio:16/7}

.foot{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ============================================================================
   DESKTOP — real app-shell active (body.ptshell). Chrome supplies sidebar/topbar;
   here we lay out the content grids to match the mockup. Mobile base untouched.
   ============================================================================ */
@media (min-width:768px){
  body.ptshell header{display:none}
  body.ptshell main.page{margin-inline:auto;padding:10px 24px 46px;max-width:1220px}
  body.ptshell .crumb{display:flex}
  body.ptshell .hero{padding:32px 30px}
  body.ptshell .hero .lead{font-size:16px}
  body.ptshell .hero-r{min-height:240px}
  body.ptshell .section{margin-top:34px}
  body.ptshell .sec-head p{max-width:60ch}
  body.ptshell .cta{margin-top:34px}
}
/* features strip → 3 across once there is room */
@media (min-width:900px){
  body.ptshell .features{grid-template-columns:repeat(3,1fr);gap:16px}
}
/* wide desktop → full two-column mockup layout */
@media (min-width:1040px){
  body.ptshell .hero{grid-template-columns:1.15fr .85fr;gap:20px;padding:38px 40px}
  body.ptshell .hero h1{margin:16px 0 14px}
  body.ptshell .steps-grid{grid-template-columns:1.55fr .95fr;gap:22px}
  body.ptshell .timeline::before{content:"";position:absolute;left:23px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--accent-border),var(--line))}
  body.ptshell .aside{position:sticky;top:88px}
  body.ptshell .cta{grid-template-columns:1.2fr .8fr;gap:24px}
  body.ptshell .cta-l{padding:36px 40px}
  body.ptshell .cta p{max-width:44ch}
  body.ptshell .cta-ill.ill{border-top:0;border-left:1.5px dashed var(--accent-border);aspect-ratio:4/3}
}
@media (min-width:1280px){
  body.ptshell main.page{max-width:1240px}
}