/* Start Here v2: the tab's sheet. Every class is sh2- prefixed; the root is .sh2 inside #panel-starthere.
   Tokens = the frame's (app_frame.css --af-*), the same card, edge, shadow and ease as Market, Supply,
   Whales and News, so the app reads as one product. Depth stays (card gradient, shadow, tone washes, a glow
   on the lit thing); no caps-tracked micro labels, no side stripes, no browser tooltips. */
#panel-starthere .sh2,#panel-starthere .sh2 *,#panel-starthere .sh2 *::before,#panel-starthere .sh2 *::after{box-sizing:border-box}
#panel-starthere .sh2{
  --ink:#fff;--txt:#e9f1f7;--mut:#8ba0b3;--dim:#71879a;
  --teal:#1FD8C4;--teal2:#0FB5A8;--up:#2fe0a0;--dn:#ff6b5e;--amber:#f6c143;--blue:#7ab8e8;--violet:#b4a8ff;
  --up-rgb:47,224,160;--teal-rgb:31,216,196;
  --line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.06);
  --card:linear-gradient(180deg,#0c0d10,#090a0c);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 26px 60px -30px rgba(0,0,0,1);
  --ease:cubic-bezier(.22,.92,.28,1);
  --acc:var(--af-a,#1FD8C4);--acc-rgb:var(--af-a-rgb,31,216,196);--serif:'Instrument Serif',Georgia,serif;
  --r1:8px;--r2:12px;--r3:16px;--rp:999px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;
  color:var(--txt);font-size:13px;line-height:1.4;max-width:1180px;margin:0 auto;padding:4px 0 56px;
  container-type:inline-size;container-name:sh2;position:relative;display:flex;flex-direction:column;gap:18px
}
#panel-starthere .sh2 button{font-family:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
#panel-starthere .sh2 a{color:inherit;text-decoration:none}
#panel-starthere .sh2 .sh2-n{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
#panel-starthere .sh2 kbd{font:700 10.5px/1 Inter,sans-serif;padding:3px 5px;border-radius:5px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--mut)}
#panel-starthere .sh2 .sh2-hit{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--ease),background .15s,border-color .15s,box-shadow .18s,color .15s}
#panel-starthere .sh2 .sh2-hit:active{transform:translateY(1px) scale(.992)}
#panel-starthere .sh2 :is(button,a,input,[tabindex]):focus-visible{outline:2px solid rgba(var(--acc-rgb),.75);outline-offset:2px;border-radius:var(--r1)}
#panel-starthere .sh2 .sh2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#panel-starthere .sh2 svg{display:block}

/* ── card ── */
#panel-starthere .sh2 .sh2-c{position:relative;background:radial-gradient(120% 90% at 0% 0%,rgba(var(--acc-rgb),.06),transparent 55%),var(--card);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--shadow);padding:18px 20px;transition:border-color .2s}
#panel-starthere .sh2 .sh2-ch{display:flex;align-items:center;gap:10px;margin:0 0 12px;min-width:0}
#panel-starthere .sh2 .sh2-ch h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
#panel-starthere .sh2 .sh2-ch .sh2-ch-r{margin-left:auto;display:flex;align-items:center;gap:8px}
#panel-starthere .sh2 .sh2-h2{margin:6px 2px 0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:10px}
#panel-starthere .sh2 .sh2-h2 small{font-size:12px;font-weight:600;color:var(--mut)}

/* ── buttons ── */
#panel-starthere .sh2 .sh2-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:var(--rp);border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035);color:var(--txt);font-size:12.5px;font-weight:700;white-space:nowrap;position:relative;flex:none}
#panel-starthere .sh2 .sh2-btn svg{width:14px;height:14px;flex:none}
#panel-starthere .sh2 .sh2-btn:hover:not(:disabled){background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.45);color:var(--ink);box-shadow:0 0 16px -8px rgba(var(--acc-rgb),.7)}
#panel-starthere .sh2 .sh2-btn.is-pri{background:linear-gradient(180deg,var(--teal),var(--teal2));border-color:transparent;color:#03201c;box-shadow:0 0 22px -8px rgba(var(--teal-rgb),.9),0 1px 0 rgba(255,255,255,.25) inset}
#panel-starthere .sh2 .sh2-btn.is-pri:hover:not(:disabled){color:#021512;filter:brightness(1.06)}
#panel-starthere .sh2 .sh2-btn.is-ok{border-color:rgba(var(--up-rgb),.55);color:var(--up);background:rgba(var(--up-rgb),.1)}
#panel-starthere .sh2 .sh2-btn.is-busy{color:var(--mut);pointer-events:none}
#panel-starthere .sh2 .sh2-btn.is-busy::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--acc);animation:sh2Spin .8s linear infinite}
#panel-starthere .sh2 .sh2-btn.sh2-sm{height:28px;padding:0 11px;font-size:12px}
@keyframes sh2Spin{to{transform:rotate(360deg)}}

/* ── the tab mark: the sidebar's own icon in the tab's colour ── */
#panel-starthere .sh2 .sh2-ico{--t:var(--acc);--t-rgb:var(--acc-rgb);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--t);background:linear-gradient(180deg,rgba(var(--t-rgb),.18),rgba(var(--t-rgb),.05));border:1px solid rgba(var(--t-rgb),.35);box-shadow:0 0 18px -6px rgba(var(--t-rgb),.55)}
#panel-starthere .sh2 .sh2-ico svg{width:17px;height:17px;stroke-width:1.8}
#panel-starthere .sh2 .sh2-ico.is-sm{width:28px;height:28px;border-radius:8px}
#panel-starthere .sh2 .sh2-ico.is-sm svg{width:15px;height:15px}

/* ── segmented control: the thumb slides, never blinks ── */
#panel-starthere .sh2 .sh2-seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:var(--rp);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);isolation:isolate;max-width:100%;overflow-x:auto;scrollbar-width:none}
#panel-starthere .sh2 .sh2-seg::-webkit-scrollbar{display:none}
#panel-starthere .sh2 .sh2-seg-th{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:var(--rp);background:linear-gradient(180deg,var(--teal),var(--teal2));box-shadow:0 0 18px -6px rgba(var(--teal-rgb),.9),0 1px 0 rgba(255,255,255,.18) inset;transition:transform .32s var(--ease),width .32s var(--ease);z-index:0;pointer-events:none}
#panel-starthere .sh2 .sh2-seg>button{position:relative;z-index:1;height:30px;padding:0 13px;border-radius:var(--rp);font-size:12.5px;font-weight:700;color:var(--mut);white-space:nowrap;transition:color .15s;display:inline-flex;align-items:center;gap:6px}
#panel-starthere .sh2 .sh2-seg>button:hover{color:var(--txt)}
#panel-starthere .sh2 .sh2-seg>button[aria-selected="true"]{color:#fff;font-weight:800;text-shadow:0 0 13px rgba(200,230,255,.5),0 1px 0 rgba(0,0,0,.55)}
#panel-starthere .sh2 .sh2-seg>button .sh2-seg-n{font-size:11px;color:var(--dim);font-weight:700}
#panel-starthere .sh2 .sh2-seg>button[aria-selected="true"] .sh2-seg-n{color:rgba(255,255,255,.8)}

/* ── hero: title left, set-up card right ── */
#panel-starthere .sh2 .sh2-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);gap:22px 30px;align-items:stretch;overflow:hidden;padding:26px 26px 24px}
#panel-starthere .sh2 .sh2-wm{position:absolute;left:-90px;top:-110px;width:360px;height:360px;opacity:.05;pointer-events:none;background:url('/world-news/assets/brand/cwn-globe-mark-1024.png') center/contain no-repeat;animation:sh2Spin110 110s linear infinite;z-index:0}
#panel-starthere .sh2 .sh2-hero>*:not(.sh2-wm){position:relative;z-index:1}
@keyframes sh2Spin110{to{transform:rotate(360deg)}}
#panel-starthere .sh2 .sh2-hl{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
#panel-starthere .sh2 .sh2-eye{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--teal)}
#panel-starthere .sh2 .sh2-eye :is(video,img){width:26px;height:26px;border-radius:50%;object-fit:cover;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%)}
#panel-starthere .sh2 .sh2-title{margin:0;font-family:var(--serif);font-weight:400;font-size:48px;line-height:.98;letter-spacing:-.01em;color:var(--ink);text-shadow:0 0 30px rgba(var(--teal-rgb),.22)}
#panel-starthere .sh2 .sh2-title em{font-style:italic;color:var(--teal)}
#panel-starthere .sh2 .sh2-sub{margin:0;font-size:14px;line-height:1.55;color:#b6c6d4;max-width:520px}
#panel-starthere .sh2 .sh2-promise{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mut);font-weight:600}
#panel-starthere .sh2 .sh2-promise svg{width:16px;height:16px;color:var(--teal);flex:none}
#panel-starthere .sh2 .sh2-promise b{color:var(--txt);font-weight:700}

/* ── set-up card: four steps, read from the account ── */
/* the card hugs its own steps (3 Oct 23:2x browser look: stretched to the hero's height it left an empty band) */
#panel-starthere .sh2 .sh2-setup{align-self:start;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 14px 8px;display:flex;flex-direction:column;min-width:0}
#panel-starthere .sh2 .sh2-su-h{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
#panel-starthere .sh2 .sh2-su-h b{font-size:14px;font-weight:800;color:var(--ink)}
#panel-starthere .sh2 .sh2-su-cnt{margin-left:auto;font-size:12px;font-weight:700;color:var(--mut)}
#panel-starthere .sh2 .sh2-su-cnt b{font-size:12px;color:var(--teal)}
#panel-starthere .sh2 .sh2-su-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:0 2px 8px}
#panel-starthere .sh2 .sh2-su-bar i{height:4px;border-radius:4px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
#panel-starthere .sh2 .sh2-su-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--teal2),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease) calc(var(--i,0) * 90ms)}
#panel-starthere .sh2 .sh2-su-bar i.on::after{transform:none;box-shadow:0 0 10px rgba(var(--teal-rgb),.7)}
#panel-starthere .sh2 .sh2-step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line2);min-height:52px}
#panel-starthere .sh2 .sh2-step:first-of-type{border-top:0}
#panel-starthere .sh2 .sh2-step-t{min-width:0}
#panel-starthere .sh2 .sh2-step-t b{display:block;font-size:13px;font-weight:700;color:var(--ink);line-height:1.25}
#panel-starthere .sh2 .sh2-step-t span{display:block;font-size:12px;color:var(--mut);margin-top:2px;line-height:1.3}
#panel-starthere .sh2 .sh2-step-t span.sh2-n{color:var(--txt)}
#panel-starthere .sh2 .sh2-tick{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);color:var(--dim);flex:none}
#panel-starthere .sh2 .sh2-tick svg{width:14px;height:14px}
#panel-starthere .sh2 .sh2-step.is-done .sh2-tick{border-color:rgba(var(--up-rgb),.5);background:rgba(var(--up-rgb),.12);color:var(--up)}
#panel-starthere .sh2 .sh2-step.is-done .sh2-tick path{stroke-dasharray:24;stroke-dashoffset:0}
#panel-starthere .sh2 .sh2-step.is-done.is-new .sh2-tick path{animation:sh2Draw .5s var(--ease) both}
@keyframes sh2Draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
#panel-starthere .sh2 .sh2-step.is-done .sh2-step-t b{color:#c9d6e2}
#panel-starthere .sh2 .sh2-step.is-done .sh2-step-t span{color:var(--up)}
#panel-starthere .sh2 .sh2-step.is-wait .sh2-step-t span{color:var(--dim)}

/* ── map (look A): tab cards with the tab's own picture ── */
#panel-starthere .sh2 .sh2-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
#panel-starthere .sh2 .sh2-bar .sh2-h2{margin:0}
#panel-starthere .sh2 .sh2-bar .sh2-seg{margin-left:auto}
#panel-starthere .sh2 .sh2-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#panel-starthere .sh2 .sh2-tc{display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:0;border-radius:var(--r3);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .18s,box-shadow .22s,transform .18s var(--ease)}
#panel-starthere .sh2 .sh2-tc:hover{border-color:rgba(var(--t-rgb),.5);box-shadow:var(--shadow),0 0 0 1px rgba(var(--t-rgb),.12),0 18px 40px -22px rgba(var(--t-rgb),.55)}
#panel-starthere .sh2 .sh2-tc.is-gone{display:none}
#panel-starthere .sh2 .sh2-pic{position:relative;aspect-ratio:16/8.4;overflow:hidden;background:#05080b;border-bottom:1px solid var(--line2)}
#panel-starthere .sh2 .sh2-pic img{position:absolute;left:0;top:0;width:121%;max-width:none;transform:translate(-15.6%,-9.4%);transform-origin:30% 20%;transition:transform .5s var(--ease),opacity .4s;opacity:0}
#panel-starthere .sh2 .sh2-pic img.is-in{opacity:.92}
#panel-starthere .sh2 .sh2-tc:hover .sh2-pic img{transform:translate(-15.6%,-9.4%) scale(1.035)}
#panel-starthere .sh2 .sh2-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(9,10,12,.92));pointer-events:none}
#panel-starthere .sh2 .sh2-pic .sh2-ico{position:absolute;left:14px;bottom:-1px;z-index:1;transform:translateY(50%)}
#panel-starthere .sh2 .sh2-tcb{display:flex;flex-direction:column;gap:6px;padding:24px 16px 14px;flex:1}
#panel-starthere .sh2 .sh2-tcn{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
#panel-starthere .sh2 .sh2-tcn .sh2-go{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--mut);border:1px solid var(--line);transition:all .18s var(--ease)}
#panel-starthere .sh2 .sh2-tcn .sh2-go svg{width:13px;height:13px}
#panel-starthere .sh2 .sh2-tc:hover .sh2-go{color:#03201c;background:var(--t);border-color:transparent;transform:translateX(2px)}
#panel-starthere .sh2 .sh2-tcq{font-size:13px;line-height:1.45;color:#b6c6d4}
/* what the tab holds, as plain words: they are not buttons, so they do not look like buttons */
#panel-starthere .sh2 .sh2-secs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line2);font-size:12px;font-weight:600;color:var(--mut);line-height:1.5}
#panel-starthere .sh2 .sh2-secs i{font-style:normal;color:rgba(var(--t-rgb),.7)}

/* ── shortcuts: the frame's tools as buttons, in the top card ── */
#panel-starthere .sh2 .sh2-short{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#panel-starthere .sh2 .sh2-sc{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 11px;border-radius:var(--rp);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);font-size:12.5px;font-weight:700;color:var(--txt);white-space:nowrap}
#panel-starthere .sh2 .sh2-sc svg{width:15px;height:15px;color:var(--teal);flex:none}
#panel-starthere .sh2 .sh2-sc kbd{margin-left:2px}
#panel-starthere .sh2 .sh2-sc:hover{background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.45);color:var(--ink);box-shadow:0 0 16px -8px rgba(var(--acc-rgb),.7)}
#panel-starthere .sh2 .sh2-sc.is-pri{background:linear-gradient(180deg,var(--teal),var(--teal2));border-color:transparent;color:#03201c;box-shadow:0 0 22px -8px rgba(var(--teal-rgb),.9),0 1px 0 rgba(255,255,255,.25) inset}
#panel-starthere .sh2 .sh2-sc.is-pri svg{color:#03201c}
#panel-starthere .sh2 .sh2-sc.is-pri:hover{color:#021512;filter:brightness(1.06)}
#panel-starthere .sh2 .sh2-tour-h{flex-wrap:wrap;scroll-margin-top:14px}
#panel-starthere .sh2 .sh2-tour-h .sh2-back{margin-left:auto}
#panel-starthere .sh2 .sh2-sc.is-busy{color:var(--mut);pointer-events:none}
#panel-starthere .sh2 .sh2-sc.is-busy>svg{display:none}
#panel-starthere .sh2 .sh2-sc.is-busy::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--acc);animation:sh2Spin .8s linear infinite}

/* ── the foot line: true, not worth a box ── */
#panel-starthere .sh2 .sh2-foot{display:flex;align-items:flex-start;gap:9px;margin:4px 2px 0;font-size:12px;line-height:1.5;color:var(--mut);max-width:880px}
#panel-starthere .sh2 .sh2-foot svg{width:14px;height:14px;color:var(--dim);flex:none;margin-top:2px}

/* a question that lands on a card rings it once, so the eye finds it (the tabs' own "land the eye" ring) */
.sh2-landed{animation:sh2Land 2.2s cubic-bezier(.22,.92,.28,1) both}
@keyframes sh2Land{0%,70%{box-shadow:0 0 0 2px rgba(31,216,196,.9),0 0 28px rgba(31,216,196,.45)}100%{box-shadow:0 0 0 2px rgba(31,216,196,0),0 0 28px rgba(31,216,196,0)}}
@media (prefers-reduced-motion:reduce){.sh2-landed{animation:none;box-shadow:0 0 0 2px rgba(31,216,196,.9)}}

/* ── tour (look B): one tab at a time, its annotated picture ── */
#panel-starthere .sh2 .sh2-tour{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0;padding:0;overflow:hidden}
#panel-starthere .sh2 .sh2-idx{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
#panel-starthere .sh2 .sh2-idx-h{display:flex;align-items:baseline;gap:8px;padding:2px 8px 10px;font-size:12px;color:var(--mut);font-weight:700}
#panel-starthere .sh2 .sh2-idx-h b{font-size:20px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
#panel-starthere .sh2 .sh2-lit{position:absolute;left:10px;right:10px;top:0;height:0;border-radius:10px;background:linear-gradient(180deg,rgba(var(--t-rgb),.16),rgba(var(--t-rgb),.06));border:1px solid rgba(var(--t-rgb),.45);box-shadow:0 0 22px -10px rgba(var(--t-rgb),.9);transition:transform .34s var(--ease),height .34s var(--ease),background .3s,border-color .3s;pointer-events:none}
#panel-starthere .sh2 .sh2-ii{position:relative;z-index:1;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;align-items:center;padding:7px 8px;border-radius:10px;color:var(--mut);transition:color .2s,opacity .3s}
#panel-starthere .sh2 .sh2-ii b{font-size:13px;font-weight:700;color:inherit}
#panel-starthere .sh2 .sh2-ii .sh2-ii-q{grid-column:2;font-size:12px;line-height:1.35;color:#b6c6d4;display:none}
#panel-starthere .sh2 .sh2-ii:hover{color:var(--txt)}
#panel-starthere .sh2 .sh2-ii[aria-selected="true"]{color:var(--ink)}
#panel-starthere .sh2 .sh2-ii[aria-selected="true"] .sh2-ii-q{display:block}
#panel-starthere .sh2 .sh2-ii .sh2-ico{transform:scale(.86);transition:transform .25s var(--ease)}
#panel-starthere .sh2 .sh2-ii[aria-selected="true"] .sh2-ico{transform:none}
#panel-starthere .sh2 .sh2-stage{display:flex;flex-direction:column;min-width:0}
#panel-starthere .sh2 .sh2-st-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2);min-height:62px}
#panel-starthere .sh2 .sh2-st-h h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
#panel-starthere .sh2 .sh2-st-h .sh2-st-q{font-size:12.5px;color:var(--mut);font-weight:600}
#panel-starthere .sh2 .sh2-st-h .sh2-st-r{margin-left:auto;display:flex;align-items:center;gap:8px}
#panel-starthere .sh2 .sh2-shot{position:relative;height:440px;overflow:hidden;background:#05080b;cursor:zoom-in}
#panel-starthere .sh2 .sh2-shot.is-zoom{cursor:zoom-out}
#panel-starthere .sh2 .sh2-shot.is-scroll{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
#panel-starthere .sh2 .sh2-shot.is-scroll .sh2-shot-fade{display:none}
#panel-starthere .sh2 .sh2-shot-in{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform .55s var(--ease)}
#panel-starthere .sh2 .sh2-shot-in img{display:block;width:100%;height:auto;max-width:none;opacity:0;transition:opacity .35s}
#panel-starthere .sh2 .sh2-shot-in img.is-in{opacity:1}
#panel-starthere .sh2 .sh2-shot-in img.sh2-swap{position:absolute;left:0;top:0;width:100%;opacity:0;transition:opacity .4s}
#panel-starthere .sh2 .sh2-shot-in img.sh2-swap.on{opacity:1}
#panel-starthere .sh2 .sh2-dot.is-swap{opacity:0;pointer-events:none}
#panel-starthere .sh2 .sh2-shot.is-swapped .sh2-dot:not(.is-swap){opacity:0;pointer-events:none}
#panel-starthere .sh2 .sh2-dot.is-swap[aria-pressed="true"]{opacity:1;pointer-events:auto}
/* while a card is lit the other numbers fade, so none covers the words of the one being read (a number is about three
   lines of text tall on a phone); they stay there to tap */
/* (not on a card's own picture: there the tab picture's numbers stay hidden, .is-swapped above; this rule out-ranked
   it and left them faint on the wrong things, 20 Oct News sub-tabs + Overview's macro banner) */
#panel-starthere .sh2 .sh2-shot.is-zoom:not(.is-swapped) .sh2-dot:not([aria-pressed="true"]):not(.is-swap){opacity:.28}
#panel-starthere .sh2 .sh2-shot.is-zoom:not(.is-swapped) .sh2-dot:not([aria-pressed="true"]):not(.is-swap):hover{opacity:1}
#panel-starthere .sh2 .sh2-box{position:absolute;border-radius:10px;border:2px solid rgba(var(--t-rgb),.0);box-shadow:0 0 0 9999px rgba(3,6,9,0);transition:border-color .3s,box-shadow .45s var(--ease);pointer-events:none}
#panel-starthere .sh2 .sh2-box.on{border-color:rgba(var(--t-rgb),.95);box-shadow:0 0 0 9999px rgba(3,6,9,.55),0 0 26px rgba(var(--t-rgb),.55)}
#panel-starthere .sh2 .sh2-dot{position:absolute;z-index:2;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#03201c;background:var(--t);box-shadow:0 0 0 3px rgba(5,8,11,.85),0 0 16px rgba(var(--t-rgb),.8);transition:transform .2s var(--ease)}
#panel-starthere .sh2 .sh2-dot{transform:scale(var(--dz,1));transition:transform .55s var(--ease),opacity .3s}
#panel-starthere .sh2 .sh2-dot:hover,#panel-starthere .sh2 .sh2-dot[aria-pressed="true"]{transform:scale(calc(var(--dz,1) * 1.18))}
#panel-starthere .sh2 .sh2-dot::after{content:"";position:absolute;inset:-10px}
#panel-starthere .sh2 .sh2-shot-fade{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,transparent,#090a0c);pointer-events:none}
#panel-starthere .sh2 .sh2-shot-load{position:absolute;left:16px;top:14px;display:none;align-items:center;gap:8px;font-size:12px;color:var(--mut);font-weight:600}
#panel-starthere .sh2 .sh2-shot.is-loading .sh2-shot-load{display:flex}
#panel-starthere .sh2 .sh2-shot-load::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--acc);animation:sh2Spin .8s linear infinite}
/* the cards as drop-downs (20 Oct 2026, his "drop downs that only open when the girl is talking"): a title each, the
   one being read opens in place; the others keep their own height (align-items:start) */
#panel-starthere .sh2 .sh2-tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;padding:14px 18px 16px;align-items:start}
#panel-starthere .sh2 .sh2-tip{display:grid;grid-template-columns:24px minmax(0,1fr) 14px;align-items:center;align-content:center;gap:0 10px;min-height:46px;padding:7px 12px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.02);text-align:left;transition:border-color .18s,background .18s}
#panel-starthere .sh2 .sh2-tip i{grid-row:1;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:800;color:var(--t);border:1px solid rgba(var(--t-rgb),.5)}
#panel-starthere .sh2 .sh2-tip b{grid-row:1;grid-column:2;font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.3}
#panel-starthere .sh2 .sh2-tip span{font-size:12px;line-height:1.45;color:#a9bac9}
#panel-starthere .sh2 .sh2-tip .sh2-tip-c{grid-row:1;grid-column:3;display:grid;place-items:center;color:var(--mut);transition:transform .3s var(--ease),color .2s}
#panel-starthere .sh2 .sh2-tip .sh2-tip-c svg{width:14px;height:14px}
#panel-starthere .sh2 .sh2-tip .sh2-tip-d{grid-row:2;grid-column:2/4;display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
#panel-starthere .sh2 .sh2-tip .sh2-tip-d>span{min-height:0;overflow:hidden;padding-top:0;transition:padding-top .32s var(--ease)}
#panel-starthere .sh2 .sh2-tip[aria-pressed="true"] .sh2-tip-d{grid-template-rows:1fr}
#panel-starthere .sh2 .sh2-tip[aria-pressed="true"] .sh2-tip-d>span{padding-top:5px}
#panel-starthere .sh2 .sh2-tip[aria-pressed="true"] .sh2-tip-c{transform:rotate(180deg);color:var(--t)}
#panel-starthere .sh2 .sh2-tip:hover{border-color:rgba(var(--t-rgb),.35)}
#panel-starthere .sh2 .sh2-tip[aria-pressed="true"]{border-color:rgba(var(--t-rgb),.7);background:rgba(var(--t-rgb),.08)}
#panel-starthere .sh2 .sh2-tip[aria-pressed="true"] i{background:var(--t);color:#03201c}
@media (prefers-reduced-motion:reduce){#panel-starthere .sh2 .sh2-tip .sh2-tip-d,#panel-starthere .sh2 .sh2-tip .sh2-tip-d>span,#panel-starthere .sh2 .sh2-tip .sh2-tip-c{transition:none}}
#panel-starthere .sh2 .sh2-st-f{display:flex;align-items:center;gap:10px;padding:0 18px 16px}
#panel-starthere .sh2 .sh2-st-f .sh2-btn.is-pri{margin-left:auto}

/* ── questions (look C) ── */
#panel-starthere .sh2 .sh2-ask{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px 0 16px;border-radius:var(--rp);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);transition:border-color .15s,box-shadow .18s;max-width:620px}
#panel-starthere .sh2 .sh2-ask:focus-within{border-color:rgba(var(--acc-rgb),.6);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.12),0 0 24px -10px rgba(var(--acc-rgb),.6)}
#panel-starthere .sh2 .sh2-ask svg{width:16px;height:16px;color:var(--mut);flex:none}
#panel-starthere .sh2 .sh2-ask input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:600 14px/1 Inter,sans-serif}
#panel-starthere .sh2 .sh2-ask input::placeholder{color:var(--dim);font-weight:500}
#panel-starthere .sh2 .sh2-qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#panel-starthere .sh2 .sh2-qg{padding:16px 16px 10px}
#panel-starthere .sh2 .sh2-qg.is-gone{display:none}
#panel-starthere .sh2 .sh2-q{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:10px 8px;margin:0 -8px;width:calc(100% + 16px);border-radius:10px;border-top:1px solid var(--line2)}
#panel-starthere .sh2 .sh2-qg .sh2-q:first-of-type{border-top-color:transparent}
#panel-starthere .sh2 .sh2-q:hover{background:rgba(var(--t-rgb),.08);border-top-color:transparent}
#panel-starthere .sh2 .sh2-q:hover+.sh2-q{border-top-color:transparent}
#panel-starthere .sh2 .sh2-q.is-gone{display:none}
#panel-starthere .sh2 .sh2-q-t{min-width:0}
#panel-starthere .sh2 .sh2-q-t b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
#panel-starthere .sh2 .sh2-q-t span{display:block;font-size:12px;color:var(--mut);margin-top:2px}
#panel-starthere .sh2 .sh2-q-to{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--t);white-space:nowrap}
#panel-starthere .sh2 .sh2-q-to svg{width:13px;height:13px;transition:transform .18s var(--ease)}
#panel-starthere .sh2 .sh2-q:hover .sh2-q-to svg{transform:translateX(3px)}
#panel-starthere .sh2 .sh2-q-none{display:none;padding:14px 4px;color:var(--mut);font-size:13px}
#panel-starthere .sh2 .sh2-q-none.on{display:block}
#panel-starthere .sh2 .sh2-link{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(31,216,196,.4)}

/* ── arrival: rise in reading order, once ── */
#panel-starthere .sh2 .stg{animation:sh2In .46s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes sh2In{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── widths ── */
@container sh2 (max-width:1020px){
  #panel-starthere .sh2 .sh2-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  #panel-starthere .sh2 .sh2-hero{grid-template-columns:minmax(0,1fr)}
  #panel-starthere .sh2 .sh2-tour{grid-template-columns:210px minmax(0,1fr)}
}
@container sh2 (max-width:760px){
  #panel-starthere .sh2 .sh2-qgrid{grid-template-columns:minmax(0,1fr)}
}

/* ── phone: designed, not reflowed ── */
#panel-starthere .sh2[data-view="phone"]{gap:14px;padding:0 0 40px}
#panel-starthere .sh2[data-view="phone"] .sh2-hero{padding:20px 16px 16px;gap:16px}
#panel-starthere .sh2[data-view="phone"] .sh2-title{font-size:36px}
#panel-starthere .sh2[data-view="phone"] .sh2-sub{font-size:13.5px}
#panel-starthere .sh2[data-view="phone"] .sh2-setup{padding:12px 12px 6px}
/* the set-up card folds to one row on a phone; the row opens it in place */
#panel-starthere .sh2 button.sh2-su-h{width:100%;display:flex;align-items:center;gap:10px;margin:0;padding:2px 2px 8px;min-height:40px}
#panel-starthere .sh2 button.sh2-su-h>svg{width:15px;height:15px;color:var(--mut);transform:rotate(90deg);transition:transform .25s var(--ease)}
#panel-starthere .sh2 button.sh2-su-h[aria-expanded="false"]>svg{transform:none}
#panel-starthere .sh2 .sh2-setup.is-folded{padding-bottom:10px}
#panel-starthere .sh2 .sh2-setup.is-folded .sh2-step{display:none}
#panel-starthere .sh2 .sh2-setup.is-folded .sh2-su-bar{margin-bottom:0}
#panel-starthere .sh2[data-view="phone"] .sh2-promise{align-items:flex-start}
#panel-starthere .sh2[data-view="phone"] .sh2-promise svg{margin-top:1px}
#panel-starthere .sh2 .sh2-qrail{transition:opacity .2s}
#panel-starthere .sh2 .sh2-qrail.is-dim{opacity:.4}
#panel-starthere .sh2[data-view="phone"] .sh2-qrail .sh2-seg{width:100%}
#panel-starthere .sh2[data-view="phone"] .sh2-step .sh2-btn{height:36px;padding:0 13px}
#panel-starthere .sh2[data-view="phone"] .sh2-bar{margin:0 -4px;padding:8px 4px;background:linear-gradient(180deg,rgba(5,7,9,.92),rgba(5,7,9,.78));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-radius:var(--rp)}
#panel-starthere .sh2[data-view="phone"] .sh2-bar .sh2-h2{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-bar .sh2-seg{margin:0;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);scroll-padding-inline:16px}
#panel-starthere .sh2[data-view="phone"] .sh2-seg>button{height:36px}
#panel-starthere .sh2[data-view="phone"] .sh2-map{grid-template-columns:minmax(0,1fr);gap:10px}
#panel-starthere .sh2[data-view="phone"] .sh2-tc{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:stretch}
#panel-starthere .sh2[data-view="phone"] .sh2-pic{aspect-ratio:auto;min-height:100%;border-bottom:0;border-right:1px solid var(--line2)}
#panel-starthere .sh2[data-view="phone"] .sh2-pic img{width:260%;transform:translate(-15.6%,-9.4%)}
#panel-starthere .sh2[data-view="phone"] .sh2-tc:hover .sh2-pic img{transform:translate(-15.6%,-9.4%)}
#panel-starthere .sh2[data-view="phone"] .sh2-pic::after{background:linear-gradient(90deg,transparent 50%,rgba(9,10,12,.85))}
#panel-starthere .sh2[data-view="phone"] .sh2-pic .sh2-ico{left:auto;right:8px;bottom:auto;top:8px;transform:none}
#panel-starthere .sh2[data-view="phone"] .sh2-tcb{padding:12px 12px 12px 14px;gap:4px}
#panel-starthere .sh2[data-view="phone"] .sh2-tcq{font-size:12.5px}
#panel-starthere .sh2[data-view="phone"] .sh2-secs{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-short{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:2px -16px 0;padding:0 16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
#panel-starthere .sh2[data-view="phone"] .sh2-short::-webkit-scrollbar{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-sc{height:40px;flex:none}
#panel-starthere .sh2[data-view="phone"] .sh2-tour{grid-template-columns:minmax(0,1fr)}
#panel-starthere .sh2[data-view="phone"] .sh2-idx{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line2);padding:10px;gap:6px;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
#panel-starthere .sh2[data-view="phone"] .sh2-idx::-webkit-scrollbar{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-idx-h,#panel-starthere .sh2[data-view="phone"] .sh2-lit{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-ii{flex:none;grid-template-columns:auto auto;padding:6px 12px 6px 6px;border-radius:var(--rp);border:1px solid var(--line);scroll-snap-align:center;min-height:44px}
#panel-starthere .sh2[data-view="phone"] .sh2-ii[aria-selected="true"]{border-color:rgba(var(--t-rgb),.6);background:rgba(var(--t-rgb),.12)}
#panel-starthere .sh2[data-view="phone"] .sh2-ii .sh2-ii-q{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-st-h{flex-wrap:wrap;padding:12px 14px;gap:4px 10px}
#panel-starthere .sh2[data-view="phone"] .sh2-st-h .sh2-st-q{flex-basis:100%;order:3}
#panel-starthere .sh2[data-view="phone"] .sh2-shot{height:300px}
#panel-starthere .sh2[data-view="phone"] .sh2-tips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 14px;gap:8px;scrollbar-width:none}
#panel-starthere .sh2[data-view="phone"] .sh2-tips::-webkit-scrollbar{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-tip{flex:0 0 82%;scroll-snap-align:center}
/* a phone keeps its rail of whole cards (one in view at a time, slid to the one being read): no fold, no chevron */
#panel-starthere .sh2[data-view="phone"] .sh2-tips{align-items:stretch}
#panel-starthere .sh2[data-view="phone"] .sh2-tip{grid-template-columns:24px minmax(0,1fr);align-items:start;align-content:start;gap:3px 10px;min-height:0;padding:10px 12px}
#panel-starthere .sh2[data-view="phone"] .sh2-tip i{grid-row:1/3}
#panel-starthere .sh2[data-view="phone"] .sh2-tip .sh2-tip-c{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-tip .sh2-tip-d{grid-column:2;grid-template-rows:1fr;transition:none}
#panel-starthere .sh2[data-view="phone"] .sh2-tip .sh2-tip-d>span{padding-top:0;transition:none}
#panel-starthere .sh2[data-view="phone"] .sh2-st-f{padding:0 14px 14px}
#panel-starthere .sh2[data-view="phone"] .sh2-st-f .sh2-btn{height:40px}
#panel-starthere .sh2[data-view="phone"] .sh2-st-f kbd{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-qg{padding:14px 12px 6px}
#panel-starthere .sh2[data-view="phone"] .sh2-q{min-height:52px}
#panel-starthere .sh2[data-view="phone"] .sh2-q-to span{display:none}
#panel-starthere .sh2[data-view="phone"] .sh2-ask{height:46px}

/* touch: no hover, so no hover-only motion */
@media (hover:none){
  #panel-starthere .sh2 .sh2-tc:hover .sh2-pic img{transform:translate(-15.6%,-9.4%)}
  #panel-starthere .sh2 .sh2-tc:active{border-color:rgba(var(--t-rgb),.5)}
}
/* everything has a rest state */
@media (prefers-reduced-motion:reduce){
  #panel-starthere .sh2 .sh2-wm{animation:none}
  #panel-starthere .sh2 .stg{animation:none}
  #panel-starthere .sh2 .sh2-shot-in,#panel-starthere .sh2 .sh2-lit,#panel-starthere .sh2 .sh2-seg-th,#panel-starthere .sh2 .sh2-pic img,#panel-starthere .sh2 .sh2-su-bar i::after{transition:none}
  #panel-starthere .sh2 .sh2-step.is-done.is-new .sh2-tick path{animation:none}
}

/* the "Not sure what to do? Start here" nudge, in the app's look */
/* z-index sits under the phone's More menu (1001) and over the page */
#cwn-sh-beacon{position:fixed;right:22px;bottom:22px;z-index:990;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;border-radius:var(--rp,999px);cursor:pointer;font-family:'Inter',-apple-system,sans-serif;color:#e9f1f7;background:linear-gradient(180deg,#0f1418,#0a0d10);border:1px solid rgba(31,216,196,.45);box-shadow:0 14px 34px -14px rgba(0,0,0,.9),0 0 22px -8px rgba(31,216,196,.55);transition:transform .15s cubic-bezier(.22,.92,.28,1),border-color .15s;animation:shbIn .5s cubic-bezier(.22,.92,.28,1) both}
#cwn-sh-beacon:hover{border-color:rgba(31,216,196,.8)}
#cwn-sh-beacon:active{transform:translateY(1px) scale(.99)}
#cwn-sh-beacon:focus-visible{outline:2px solid rgba(31,216,196,.75);outline-offset:2px}
#cwn-sh-beacon .cwn-shb-logo{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;flex:none;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%)}
#cwn-sh-beacon .cwn-shb-txt{display:flex;flex-direction:column;line-height:1.2}
#cwn-sh-beacon .cwn-shb-k{font-size:11.5px;font-weight:600;color:#8ba0b3}
#cwn-sh-beacon .cwn-shb-m{font-size:13px;font-weight:800;color:#fff}
#cwn-sh-beacon .cwn-shb-x{position:relative;margin-left:2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#8ba0b3;font-size:14px;background:rgba(255,255,255,.06)}
#cwn-sh-beacon .cwn-shb-x::after{content:"";position:absolute;inset:-10px}
#cwn-sh-beacon .cwn-shb-x:hover{color:#fff;background:rgba(255,255,255,.14)}
@keyframes shbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* phone: above the bottom bar and the home-bar area, on the LEFT so it never covers a tab's back-to-top button */
@media (max-width:900px){#cwn-sh-beacon{bottom:calc(var(--af-nav-h,62px) + 12px);right:auto;left:14px}}
@media (prefers-reduced-motion:reduce){#cwn-sh-beacon{animation:none}}