/* Aftershocks site theme (design pass, stage 1: the homepage).
   One navy surface, hairlines instead of shadows, teal for the one action, magenta only on the hero wave and its dot.
   Colours and fonts follow docs/BRAND.md; sizes and spacing follow docs/DESIGN-RULES.md.
   Every newer CSS feature is wrapped in @supports or @media and degrades to a plain page. */

/* Fonts: self-hosted Latin subsets of the two brand families (SIL OFL 1.1). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-bold-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-regular-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-semibold-latin.woff2) format('woff2')}
/* Metric-matched fallbacks so text barely moves when the real font arrives. */
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial');font-weight:700;ascent-override:91%;descent-override:26%;line-gap-override:0%;size-adjust:102%}
@font-face{font-family:'Instrument Fallback';src:local('Arial');ascent-override:96%;descent-override:25%;line-gap-override:0%;size-adjust:101%}

:root{
  --navy:#0E1A2C;
  --surface-1:#1C2839;
  --surface-2:#2B3545;
  --text:#E2E4E6;
  --muted:#A6ACBA;
  --slate:#6F7990;
  --teal:#1FC8B6;
  --teal-hover:#3BD2C2;
  --white:#FFFFFF;
  --line:rgba(255,255,255,.10);
  --line-hover:rgba(255,255,255,.16);
  --divider:rgba(255,255,255,.08);
  --gutter:20px;
  --bar:64px;
  --ease-out:cubic-bezier(.2,1,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --display:'Bricolage Grotesque','Bricolage Fallback',system-ui,sans-serif;
  --body:'Instrument Sans','Instrument Fallback',system-ui,sans-serif;
}
@supports (color:color-mix(in oklab,red,blue)){
  :root{
    --surface-1:color-mix(in oklab,#0E1A2C 94%,white);
    --surface-2:color-mix(in oklab,#0E1A2C 88%,white);
    --text:color-mix(in oklab,white 88%,#0E1A2C);
    --muted:color-mix(in srgb,#6F7990 62%,white);
    --teal-hover:color-mix(in oklab,#1FC8B6 88%,white);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.55;padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))}
h1,h2,h3,summary{text-wrap:balance}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.25rem,1.35rem + 4.4vw,3.75rem);line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(2rem,1.55rem + 2vw,3rem);line-height:1.1;color:var(--text);font-weight:700}
h3{font-size:clamp(1.5rem,1.4rem + .5vw,1.75rem);line-height:1.2}
p,li,dd,td,figcaption{text-wrap:pretty}
p{margin:0}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--teal-hover)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
img,svg{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.lead{font-size:clamp(1.25rem,1.15rem + .5vw,1.375rem);line-height:1.45}
.small{font-size:1rem;line-height:1.45;color:var(--muted)}
.eyebrow{font-size:1rem;color:var(--muted);margin-bottom:16px}
.sub{color:var(--muted);max-width:34em;margin-top:16px}
.data{font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Buttons: primary solid teal, secondary hairline, text link. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;border:1px solid transparent;font:600 17px/1.2 var(--body);text-decoration:none;color:var(--white);background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .12s ease-out,border-color .12s ease-out,color .12s ease-out,transform .09s ease-out}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--teal);color:var(--navy)}
.btn-primary:hover{background:var(--teal-hover);color:var(--navy)}
.btn-secondary{border-color:var(--line-hover);color:var(--white)}
.btn-secondary:hover{border-color:rgba(255,255,255,.32);color:var(--white)}
.btn-small{min-height:44px;padding:0 16px;font-size:16px}

/* Header: wordmark left, one link right on phones, the full menu on desktop. */
.top{border-bottom:1px solid var(--divider)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.mark{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--white);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.mark span{color:var(--teal)}
/* Below 1024 px the header is the wordmark with the eyebrow under it at left, and a hamburger at right that opens the Menu sheet (the same sheet as the bottom bar's Menu). */
.brand-block{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:8px 0}
.brand-block .mark{min-height:44px;margin:-9px 0 -11px;line-height:1.1}
.tagline{display:block;margin-top:2px;font-size:16px;line-height:1.3;color:var(--muted);white-space:nowrap}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;margin-right:-8px;border:1px solid transparent;border-radius:12px;background:none;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .12s ease-out,border-color .12s ease-out,transform .09s ease-out}
.burger:hover{color:var(--white);border-color:var(--line-hover)}
.burger:active{transform:scale(.98)}
.burger svg{width:22px;height:22px}
@media (min-width:64rem){.tagline{display:none}.burger{display:none}.brand-block{padding:0}.brand-block .mark{margin:0}}
@media (max-width:63.99rem){.hero .eyebrow{display:none}}
.menu{display:flex;align-items:center;gap:4px}
.menu a{color:var(--text);text-decoration:none;font-size:16px;font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;transition:color .12s ease-out,background-color .12s ease-out}
.menu a:hover{color:var(--white);background:var(--surface-1)}
.menu a.btn-primary,.menu a.btn-primary:hover{color:var(--navy)}
.menu .only-wide{display:none}
.menu .btn{margin-left:8px}

/* Hero: wordmark, headline, one sentence, one button, then the line drawing at full width. */
.hero{padding:20px 0 48px}
.hero .wrap{display:grid;gap:40px}
.hero h1{max-width:none}
.hero .lead{margin-top:16px;max-width:30em;font-size:1rem;line-height:1.45}
.hero .lead+.lead{margin-top:6px}
.hero .three{margin-top:14px;max-width:34em;color:var(--muted);font-size:1rem;line-height:1.45}
.hero .cta{margin-top:20px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .cta .only-wide{display:none}

/* The hero drawing: a thin teal wiggle low on the left that tightens, then a larger magenta wave that breaks upward and fades to the right, over a faint hairline grid.
   Magenta appears nowhere else on the page. Drawn in once with stroke-dashoffset, only for people who want motion. */
.wave{position:relative;margin:12px 0 16px;padding:24px 0 28px}
.hero-text{display:flex;flex-direction:column}
.hero-text .eyebrow{order:0}
.hero-text .wave{order:1}
.hero-text h1{order:2}
.hero-text .lead,.hero-text .three{order:3}
.hero-text .cta{order:4}
.wave svg{display:block;width:100%;height:auto;overflow:visible}
.wave .quiet{fill:none;stroke:var(--teal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wave .break{fill:none;stroke:#E040FB;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wave .dot{fill:#E040FB;stroke:var(--navy);stroke-width:2;vector-effect:non-scaling-stroke}
.wave .tag{position:absolute;transform:translateX(-50%);font-size:16px;line-height:1.5;color:var(--muted);white-space:nowrap}
.wave .tag.low{bottom:52px}
.wave .tag.high{top:0}
.wave .grid line{stroke:rgba(255,255,255,.08);stroke-width:1;vector-effect:non-scaling-stroke}
.wave figcaption{margin-top:8px;font-size:16px;line-height:1.45;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .wave .quiet{stroke-dasharray:1 2;animation:loop-quiet 7s linear infinite}
  .wave .break{stroke-dasharray:1 2;animation:loop-break 7s linear infinite}
  .wave .dot{animation:loop-dot 7s linear infinite}
}
@keyframes loop-quiet{0%{stroke-dashoffset:1;opacity:1}10%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}96%{opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes loop-break{0%,9%{stroke-dashoffset:1;opacity:1}19%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}96%{opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes loop-dot{0%,18%{opacity:0}22%{opacity:1}86%{opacity:1}96%,100%{opacity:0}}

/* The Menu sheet. */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:12px}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{border-top:1px solid var(--line)}
.menu-list li:last-child{border-bottom:1px solid var(--line)}
.menu-list a{display:flex;align-items:center;gap:10px;height:52px;padding:0;font-size:17px;font-weight:600;color:var(--white);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-list a .tv-logo{width:20px;height:20px}
.menu-list a img{width:20px;height:20px;flex:none}
.menu-list a.go{color:var(--teal)}
.menu-list a:hover{color:var(--teal)}
.menu-list a[aria-current]{color:var(--teal)}
@media (max-width:359px){.menu-grid{grid-template-columns:1fr;gap:0}.menu-grid .menu-list+.menu-list li:first-child{border-top:0}.menu-list li:last-child{border-bottom:0}.menu-share{border-top:1px solid var(--line)}}

section{padding:32px 0;border-top:1px solid var(--divider)}

/* How it works: three steps as one list with hairlines, not cards. */
.steps{list-style:none;margin:40px 0 0;padding:0;counter-reset:step}
.steps li{display:grid;grid-template-columns:2.5rem 1fr;gap:8px 16px;padding:24px 0;border-top:1px solid var(--line);counter-increment:step}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);font:600 16px/1.6 var(--body);font-variant-numeric:tabular-nums;color:var(--teal);grid-row:1/3;padding-top:4px}
.steps strong{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--white)}
.steps span{color:var(--muted);max-width:34em}

/* Scripts: a swipeable row on phones, a list on desktop. Each card is one button that opens a sheet. */
.row{display:flex;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:4px var(--gutter) 12px;margin:32px calc(var(--gutter) * -1) 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.row::-webkit-scrollbar{display:none}
.card{flex:0 0 86%;scroll-snap-align:start;display:grid;grid-template-columns:1fr 24px;grid-template-rows:auto auto 1fr auto;gap:4px 12px;align-items:start;text-align:left;width:100%;min-height:56px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface-1);color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .12s ease-out,background-color .12s ease-out,transform .09s ease-out}
.card:hover{border-color:var(--line-hover);background:var(--surface-2)}
.card:active{transform:scale(.98)}
.card .free{grid-column:1;grid-row:1;font-size:16px;font-weight:600;line-height:1.5;color:var(--teal)}
.card .glyph{grid-column:1;grid-row:1;margin-bottom:8px}
.card .name{grid-column:1/3;grid-row:2;font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--white)}
.card .line{color:var(--muted);grid-column:1/3;grid-row:3;max-width:30em;margin-top:4px}
.card svg.chev{grid-column:2;grid-row:1;width:24px;height:24px;color:var(--muted)}
.card:hover svg.chev{color:var(--white)}
.disclosure{margin-top:20px;font-size:16px;line-height:1.45;color:var(--muted);max-width:40em}
.panel{margin-top:40px;padding:24px 20px;border:1px solid var(--line);border-radius:16px;max-width:40em}
.panel-title{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;color:var(--white)}
.panel p{color:var(--muted);margin-top:8px}
.panel .btn{margin-top:20px;white-space:normal;text-align:left}
.panel .paid{display:block;margin-top:8px;font-size:16px;color:var(--muted)}
.panel .small{margin-top:16px}

/* Sheets: a bottom sheet on phones, a centred dialog on desktop. */
.sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:85dvh;margin:0;padding:0;border:0;border-top:1px solid var(--line);border-radius:24px 24px 0 0;background:var(--surface-1);color:var(--text);overflow:hidden}
.sheet::backdrop{background:rgba(14,26,44,.64)}
.sheet-inner{max-height:85dvh;overflow:auto;padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px) + 8px)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-head h3{padding-top:8px}
.sheet .free{font-size:16px;font-weight:600;color:var(--teal);margin-left:10px}
.close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;margin-right:-8px;border:1px solid transparent;border-radius:12px;background:none;color:var(--muted);cursor:pointer;transition:color .12s ease-out,border-color .12s ease-out,transform .09s ease-out}
.close:hover{color:var(--white);border-color:var(--line-hover)}
.close:active{transform:scale(.98)}
.close svg{width:20px;height:20px}
.sheet p.lead{margin-top:12px;font-size:17px;line-height:1.55}
.facts{margin:24px 0 0;border-top:1px solid var(--line)}
.facts div{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:16px;font-weight:600;color:var(--muted)}
.facts dd{margin:0}
.sheet .btn{width:100%;margin-top:24px}
.sheet .btn .tv-logo{width:20px;height:20px}
.sheet .small{margin-top:16px}
@media (prefers-reduced-motion:no-preference){
  .sheet[open]{animation:sheet-in .28s var(--ease-out)}
  .sheet[open]::backdrop{animation:fade-in .28s var(--ease-out)}
  .sheet.closing{animation:sheet-out .2s var(--ease-in) forwards}
  .sheet.closing::backdrop{animation:fade-out .2s var(--ease-in) forwards}
}
@keyframes sheet-in{from{transform:translateY(24px);opacity:0}}
@keyframes sheet-out{to{transform:translateY(24px);opacity:0}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}

/* Inside the algorithm: a real table on wide screens, labelled cards on phones. */
.scroll{margin-top:32px}
table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.5}
th,td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;border-bottom:1px solid var(--line)}
thead th{font-weight:600;color:var(--muted);border-bottom:1px solid var(--line-hover)}
tbody th{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--white);white-space:nowrap}
tbody th .glyph{display:inline-block;width:22px;height:22px;vertical-align:-4px;margin-right:10px}
td{color:var(--muted);max-width:22em}
.inside .sub{margin-top:24px}
@media (max-width:47.99rem){
  table{display:block}
  thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  tbody,tr,th,td{display:block}
  tr{border:1px solid var(--line);border-radius:16px;padding:16px 20px 4px;margin:0 0 12px}
  tbody th{display:flex;align-items:center;gap:12px;margin:-16px -20px 4px;padding:12px 20px;border-radius:16px 16px 0 0;background:rgba(31,200,182,.08);white-space:normal}
  tbody th .glyph{width:24px;height:24px;flex:none;margin:0}
  td{padding:12px 0;border:0;max-width:none}
  td+td{border-top:1px solid var(--line)}
  td::before{content:attr(data-label);display:block;font-size:16px;font-weight:600;color:var(--text);margin-bottom:2px}
}

/* Plans: two cards on one surface. The recommended plan has a teal hairline and a text label, nothing filled. */
.plans{display:grid;gap:16px;margin-top:40px}
.plan{display:flex;flex-direction:column;padding:24px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface-1);transition:border-color .12s ease-out}
.plan:hover{border-color:var(--line-hover)}
.plan.pick{border-color:var(--teal)}
.plan.pick:hover{border-color:var(--teal)}
.plan{position:relative}
.plan .tag{position:absolute;top:-15px;left:20px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--teal);border-radius:12px;background:#1C3A42;color:var(--teal);font-size:16px;font-weight:600;line-height:1}
@supports (color:color-mix(in srgb,red,blue)){.plan .tag{background:color-mix(in srgb,var(--teal) 12%,var(--navy))}}
.plan .tag svg{width:8px;height:8px}
.plan h3 .house{display:block;font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:0;color:var(--muted);margin-bottom:4px}
.plan .coins{margin-top:24px;display:flex;align-items:baseline;gap:8px;color:var(--white)}
.plan .coins .data{font-size:2.5rem}
.plan .price{margin-top:12px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan .price .data{font-size:1.75rem;color:var(--white)}
.plan .price .stars{font-size:16px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
/* The gold star is our own drawing, not a Telegram asset. It fades in and settles once when the plan cards scroll into view (site.js adds .in); it never moves under reduced motion. */
.star{width:16px;height:16px;fill:#F2C14E;flex:none}
@media (prefers-reduced-motion:no-preference){.plans.watch .star{opacity:0;transform:scale(1.25)}.plans.watch.in .star{animation:star-in .6s cubic-bezier(.2,1,.2,1) forwards}}
@keyframes star-in{to{opacity:1;transform:scale(1)}}
.plan ul{margin:24px 0 0;padding:0;list-style:none;flex:1}
.plan li{padding:8px 0;border-top:1px solid var(--line);color:var(--text)}
.plan .btn{margin-top:24px}
.freeline{margin-top:32px;max-width:40em;color:var(--muted)}
.freeline.stars{margin-top:16px}

/* The method, in plain words. */
.method .box{margin-top:32px;max-width:34em;padding:24px 20px;border:1px solid var(--line);border-radius:16px}
.method .box h3{margin-top:24px}
.method .box h3:first-child{margin-top:0}
.method .box p{margin-top:12px}
.method strong{color:var(--white);font-weight:600}

/* FAQ: native details, 56px rows, a plus that turns into a cross. */
.faq .list{margin-top:32px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;font-size:18px;font-weight:600;color:var(--white);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
summary::-webkit-details-marker{display:none}
summary svg{width:20px;height:20px;flex:none;color:var(--teal);transition:transform .16s ease-out}
details[open] summary svg{transform:rotate(45deg)}
summary:hover{color:var(--teal-hover)}
details p{color:var(--muted);max-width:34em;padding:0 0 16px}
details p+p{margin-top:-4px}

/* Footer: one column on phones, three on desktop. */
footer{border-top:1px solid var(--divider);padding:48px 0 32px;font-size:16px;line-height:1.5;color:var(--muted)}
footer .cols{display:grid;gap:0}
footer .brand{display:contents}
footer .legal{grid-row:3}
footer .foot-mark{grid-row:1}
footer .foot-links{grid-row:2}
@media (max-width:47.99rem){footer .legal p{font-size:14px;line-height:1.5}}
footer p{max-width:34em;margin:0 0 16px}
footer a{color:var(--text)}
footer a:hover{color:var(--white)}
footer ul{list-style:none;margin:0;padding:0}
footer li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none}
footer li a:hover{text-decoration:underline}
footer .tmnotice{text-wrap:pretty}

/* Bottom action bar: phones only, solid surface, one hairline, safe-area padding. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;translate:0 110%;visibility:hidden;transition:translate .28s var(--ease-out),visibility 0s linear .28s;display:grid;grid-template-columns:repeat(4,minmax(44px,1fr)) minmax(0,2fr);gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface-1);border-top:1px solid var(--line)}
.bar.show{translate:0 0;visibility:visible;transition-delay:0s,0s}
.bar a,.bar button{min-width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:0 4px;border-radius:12px;color:var(--text);font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .12s ease-out,background-color .12s ease-out,transform .09s ease-out}
.bar a:hover,.bar button:hover{color:var(--white);background:var(--surface-2)}
.bar a:active,.bar button:active{transform:scale(.98)}
.bar a svg,.bar button svg{width:20px;height:20px}
.bar button{border:0;background:none;font:inherit;font-weight:600;cursor:pointer;padding:0 4px}
.bar .label{display:none}
.bar .btn-primary{flex-direction:row;color:var(--navy);font-size:16px}
.bar .btn-primary:hover{background:var(--teal-hover);color:var(--navy)}
@media (max-width:479px){.bar{gap:4px;padding-left:8px;padding-right:8px;grid-template-columns:repeat(4,minmax(44px,max-content)) minmax(0,1fr)}.bar a,.bar button{padding:0 2px}.bar .btn-primary{padding-left:6px;padding-right:6px}}@media (min-width:360px){.bar .label{display:block}}
/* Where the browser has scroll-driven animations, the hero button's own view timeline drives the bar; no script needed. */
@supports (animation-timeline:view()){
  body{timeline-scope:--hero-cta}
  #hero-start{view-timeline:--hero-cta block}
  .bar{transition:none;animation:bar-show linear both;animation-timeline:--hero-cta;animation-range:exit 60% exit 100%}
}
@keyframes bar-show{from{translate:0 110%;visibility:hidden}to{translate:0 0;visibility:visible}}

/* Scroll-driven reveals: only where the browser understands them, and only for people who want motion. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{animation:none}
}

/* See it work: the bot's /chart reply, recorded on a phone, in a phone-shaped frame. The files live in assets/clip and load from this site only.
   The clip plays on loop with no sound. For people who ask for reduced motion, site.js stops it and shows the poster instead. */
.work{padding:32px 0 40px}
.work-grid{display:grid;gap:28px;justify-items:center}
.phone{margin:0;width:min(100%,260px)}
.phone .clip{display:block;width:100%;height:auto;aspect-ratio:390/798;object-fit:cover;border:1px solid var(--line-hover);border-radius:28px;background:var(--surface-1)}
.phone figcaption{margin-top:12px;font-size:16px;line-height:1.45;color:var(--muted);text-align:center}
.phone .still{display:none;width:100%;height:auto;aspect-ratio:390/798;border:1px solid var(--line-hover);border-radius:28px;background:var(--surface-1)}
@media (prefers-reduced-motion:reduce){.phone .clip{display:none}.phone .still{display:block}}
.work-text{text-align:center;max-width:28em}
.work-text .lead{margin-top:12px}
.work-text .btn{margin-top:20px}

/* Latest Break: one card under the hero and the clip, filled by site.js from /api/latest. The space is held so the
   page does not move when the card arrives; without the script the card keeps its one line and the link to /coil. */
.latest{padding:32px 0}
.latest-card{max-width:40rem;min-height:var(--latest-h);--latest-h:720px;padding:24px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface-1)}
.latest-card .eyebrow{margin:0 0 12px}
.latest-wait{color:var(--muted)}
.latest-head{display:flex;align-items:center;gap:12px}
.latest-icon{display:inline-flex;flex:none;width:32px;height:32px;color:var(--teal)}
.latest-icon svg{width:32px;height:32px}
.latest-title{font-size:clamp(1.5rem,1.4rem + .5vw,1.75rem);line-height:1.2}
.latest-facts{margin:20px 0 0;border-top:1px solid var(--line)}
.latest-facts div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.latest-facts dt{color:var(--muted)}
.latest-facts dd{margin:0;color:var(--white);font-weight:600;text-align:right}
.latest-line{margin-top:16px}
@media (min-width:24rem){.latest-card{--latest-h:716px}}
@media (min-width:30rem){.latest-card{--latest-h:704px}}
@media (min-width:40rem){.latest-card{--latest-h:624px}}

/* The three marks beside the plans: official files, unmodified, 20 px tall (img/brand/README.md and each partner README). */
.marks{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marks-logos{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.marks-logos img{display:block;height:20px;width:auto}
.marks-line{color:var(--text)}

/* Line length: body copy stops at about 66 characters. */
:is(main,dialog) :is(p,li,dd,figcaption,span.line,p.freeline,p.credit,p.sub,p.lead),.card .line,.hero .three,.hero .lead{max-width:var(--measure,28em)}

/* Header icons: Telegram, X and TradingView as 20 px marks in 44 px targets, each named by its aria-label. */
.menu a.icon-link{justify-content:center;min-width:44px;padding:0 12px}
.menu a.icon-link img,.menu a.icon-link .tv-logo{display:block;width:20px;height:20px}

/* The hero's live line, filled by site.js from /api/latest; its space is held so the buttons never move. */
.hero .live{margin-top:12px;min-height:2.9em;font-size:1rem;line-height:1.45;color:var(--text)}
.hero .live b{color:var(--teal);font-weight:600}
.hero .cta-note{margin-top:12px;font-size:16px;line-height:1.45;color:var(--muted)}
.hero-text .live{order:3}
.hero-text .cta{order:4}
.hero-text .cta-note{order:5}

/* The three-step strip under the hero: the wave drawing labelled Coil, Break, Aftershock, one short line under each. */
.story{padding:8px 0 32px;border-top:0}
.story .wave{margin:0;max-width:40rem}
.story-steps{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px;max-width:40rem;color:var(--muted)}
.story-steps li{max-width:none}
@media (min-width:30rem){.story-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:center}}
.tools-cta{margin-top:20px}

/* The Latest Break card's badge, mini chart, relative time and button. */
.badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid currentColor;border-radius:999px;font-size:16px;font-weight:600;line-height:1;white-space:nowrap}
.badge.up{color:var(--teal)}
.badge.down{color:#E040FB}
.latest-head{flex-wrap:wrap}
.latest-chart{display:block;width:100%;height:auto;margin-top:16px}
.latest-chart .band{fill:rgba(31,200,182,.12)}
.latest-chart .close{fill:none;stroke:var(--text);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.latest-chart .dot{stroke:var(--surface-1);stroke-width:2}
.latest-chart .dot.up{fill:var(--teal)}
.latest-chart .dot.down{fill:#E040FB}
.latest-facts .ago{display:block;font-weight:400;color:var(--muted)}
.latest-cta{margin-top:16px}

/* Real images: the Daily Coil card in the hero, the bot's chart in the scripts section. */
.shot{margin:0;max-width:440px}
.shot img{width:100%;height:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface-1)}
.shot figcaption{margin-top:12px;font-size:16px;line-height:1.45;color:var(--muted)}
.shot.chart{max-width:520px}
.see .pair{display:grid;gap:40px;margin-top:32px}
.see .shot{margin:0;max-width:440px}
.see .shot.chart{max-width:440px}

/* Three labelled facts on every script card, in the style of a broker card. */
.facts-row{grid-column:1/3;grid-row:4;display:grid;gap:0;margin-top:12px;border-top:1px solid var(--line);font-size:16px;line-height:1.45}
.facts-row>span{display:grid;grid-template-columns:5.5rem 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--text)}
.facts-row>span:last-child{border-bottom:0;padding-bottom:0}
.facts-row b{font-weight:600;color:var(--muted)}

/* The trust row beside the plan cards. */
.plans-wrap{display:grid;gap:24px;margin-top:40px}
.plans-wrap .plans{margin-top:0}
.trust{list-style:none;margin:0;padding:0;align-self:start}
.trust li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-top:1px solid var(--line);color:var(--text)}
.trust li:last-child{border-bottom:1px solid var(--line)}
.trust svg{width:20px;height:20px;flex:none;color:var(--teal)}

/* The six text pages: one measure, hairline rules above each heading. */
.page{padding:48px 0 80px}
.page .wrap{max-width:calc(34em + 2 * var(--gutter))}
.page h1{margin-bottom:24px}
.page h2{font-size:clamp(1.5rem,1.4rem + .5vw,1.75rem);margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.page p{margin:0 0 16px}
.page ul,.page ol{margin:0 0 20px;padding-left:24px}
.page li{margin-bottom:8px}
.page strong{color:var(--white);font-weight:600}
.page .box{margin:0 0 20px;padding:20px;border:1px solid var(--line);border-radius:16px}
.page .box p:last-child{margin-bottom:0}
.page .btn{margin-top:8px}
.accounts{list-style:none;padding:0}
.accounts li{margin:0;border-top:1px solid var(--line)}
.accounts li:last-child{border-bottom:1px solid var(--line)}
.accounts li a{display:inline-flex;align-items:center;min-height:44px}
.keep{white-space:nowrap}
@media (max-width:359px){.keep{white-space:normal}}

/* The two-tone wordmark wherever the brand name stands alone as a title or label: After in the text colour, Shocks in teal, the logo font, no trademark sign. */
.wm{font-family:var(--display);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.wm span{color:var(--teal)}

/* Script glyphs: 24 px teal line art, one per script. */
.glyph{width:30px;height:30px;color:var(--teal)}

/* Chips: neutral surfaces for official logos beside a text label; share links. */
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-1);color:var(--text);font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;transition:border-color .12s ease-out,background-color .12s ease-out,transform .09s ease-out}
.chip:hover{border-color:var(--line-hover);background:var(--surface-2);color:var(--white)}
.chip:active{transform:scale(.98)}
.chip img{width:20px;height:20px;flex:none}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.share-label{font-size:16px;color:var(--muted);margin-right:4px;flex-basis:100%}
.actions{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
.actions li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}

/* Footer: the wordmark on top, links in two columns, the legal paragraphs under them. */
footer .foot-mark{font-size:22px;margin:0 0 24px}
footer .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:32px}

/* Wider screens. */
@media (min-width:48rem){
  :root{--gutter:32px}
  section{padding:88px 0}
  .hero{padding:96px 0 128px}
  .hero .lead{font-size:clamp(1.25rem,1.15rem + .5vw,1.375rem);line-height:1.45;margin-top:20px}
  .hero .lead+.lead{margin-top:10px}
  .hero .three{font-size:17px;line-height:1.55;margin-top:24px}
  .hero .cta{margin-top:28px}
  .wave figcaption{margin-top:20px}
  .hero .cta .only-wide{display:inline-flex}
  .row{display:block;overflow:visible;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
  .card{display:grid;grid-template-columns:30px 17rem 1fr 24px;grid-template-rows:auto auto;align-items:center;gap:0 24px;padding:24px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;min-height:56px}
  .card .glyph{grid-column:1;grid-row:1/3;margin:0}
  .card:hover{background:none;border-color:var(--line)}
  .card:hover .name{color:var(--teal)}
  .card .name{grid-column:2;grid-row:1;font-size:1.5rem;align-self:end;transition:color .12s ease-out}
  .card .free{grid-column:2;grid-row:2;align-self:start}
  .card .line{grid-column:3;grid-row:1/3;max-width:28em;margin:0}
  .card svg.chev{grid-column:4;grid-row:1/4;margin:0}
  .panel{padding:28px}
  .sheet{inset:0;margin:auto;width:calc(100% - 64px);max-width:32rem;max-height:calc(100dvh - 64px);border:1px solid var(--line);border-radius:16px}
  .sheet-inner{max-height:calc(100dvh - 64px);padding:24px 28px 28px}
  .sheet .btn{width:auto}
  .plans{grid-template-columns:1fr 1fr;max-width:48rem;gap:24px}
  .plan{padding:28px}
  .plan .coins .data{font-size:3rem}
  .plan .price .data{font-size:2rem}
  .method .box{padding:28px}
  .page{padding:96px 0 128px}
  .page .box{padding:28px}
  .card .facts-row{grid-column:3;grid-row:3;margin-top:8px;border-top:0;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 32px}
  .card .facts-row>span{grid-template-columns:auto;gap:0;padding:0;border:0}
  .card .facts-row>span:last-child{padding:0}
  .card .line{grid-row:1/3}
  .card{grid-template-rows:auto auto auto}
  .plans-wrap{grid-template-columns:1fr;max-width:48rem}
  .work{padding:64px 0 72px}
  .work-grid{grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center;justify-items:start;max-width:52rem;margin:0 auto}
  .phone{width:280px}
  .phone figcaption{text-align:left}
  .work-text{text-align:left}
  .work-text .lead{margin-top:16px}
  .work-text .btn{margin-top:24px}
  .see .pair{grid-template-columns:1fr 1fr;gap:32px;align-items:start;max-width:none}
  .see .shot,.see .shot.chart{max-width:none}
  footer{padding:96px 0 64px}
  footer .cols{grid-template-columns:minmax(0,2fr) minmax(0,1.2fr);gap:48px}
  footer .brand{display:block;grid-column:1}
  footer .foot-links{grid-column:2;grid-row:1;margin:0}
  .actions{grid-template-columns:auto auto auto;justify-content:start;gap:12px 24px}
  .share-label{flex-basis:auto}
}
/* The header row and the bottom bar switch at 1024 px: below it the header is the wordmark alone and the bar's Menu sheet carries every link, so the header never wraps. */
@media (min-width:64rem){
  body{padding-bottom:0}
  .bar{display:none}
  .menu .only-wide{display:inline-flex}
}
@media (min-width:60rem){
  .plans-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(13rem,.7fr);max-width:none;gap:24px 32px}
  .plans-wrap .plans{grid-column:1/3;max-width:none}
  .trust{grid-column:3;margin-top:0}
}

/* The Follow strip's credit line and the TradingView logo component (img/brand/tradingview*.svg, see img/brand/README.md). */
.credit{margin-top:20px;font-size:16px;line-height:1.45;color:var(--muted);max-width:40em}
.tv-logo{display:inline-block;width:20px;height:20px;flex:none;background:url(/img/brand/tradingview.svg) center/contain no-repeat}

/* The spring beside The picture: slate where the coils are loose, teal where they tighten. No animation. */
.spring{width:100%;max-width:320px;height:auto;margin:12px 0 4px}
.spring path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spring .loose{stroke:var(--slate)}
.spring .tight{stroke:var(--teal)}
/* Share today's card inside the Menu sheet. */
.menu-share{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0 0;margin-top:4px;border-top:1px solid var(--line)}
.menu-share .share-label{flex-basis:100%;font-size:16px;color:var(--muted)}
.menu-share .chip{flex:1 1 0;justify-content:center}

/* What you can do: three lines, the same hairline rows as the trust row. */
.do .do-list{margin-top:24px;max-width:40em}

/* /exchanges: plain text cards, one per exchange or broker, the disclosure on every card. */
.ex-disclosure{padding:16px 20px;border:1px solid var(--line);border-radius:16px;color:var(--text)}
.ex-list{display:grid;gap:16px;margin-top:32px}
.ex-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface-1)}
.ex-card h2{margin:0;padding:0;border:0;font-size:clamp(1.5rem,1.4rem + .5vw,1.75rem)}
.ex-card h2{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ex-logo{display:block;height:20px;width:auto;flex:none;margin:10px 0}
.ex-card p{margin:12px 0 0}
.ex-card .btn{margin-top:16px;white-space:normal;text-align:left}
.ex-note{font-size:16px;line-height:1.45;color:var(--muted);margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.ex-empty{color:var(--muted)}

/* A script card's screenshot, only when assets/scripts/<name>.png exists (script_images.py): a 16:9 slot above the
   Plan / Setup / Works on rows. The whole picture shows (contain), on the card's own surface. */
.card .shot{grid-column:1/3;grid-row:4;display:block;aspect-ratio:16/9;margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--navy)}
.card .shot img{display:block;width:100%;height:100%;object-fit:contain}
.card .shot+.facts-row{grid-row:5}
@media (min-width:48rem){.card .shot{grid-column:3;grid-row:3;max-width:32rem;margin-top:12px}.card .shot+.facts-row{grid-row:4}.card svg.chev{grid-row:1/5}}

/* From 1024 px: the hero text on the left, the clip on the right, the three-step strip across both underneath. */
@media (min-width:64rem){
  section{padding:64px 0}
  .opening{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"hero work" "story story";align-items:center;gap:0 48px;max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
  .opening>.hero{grid-area:hero;padding:40px 0 24px;border:0}
  .opening>.work{grid-area:work;padding:40px 0 24px;border:0}
  .opening>.story{grid-area:story;padding:8px 0 32px;border:0}
  .opening .wrap{padding:0;max-width:none}
  .opening .hero .wrap{display:block}
  .hero .live{min-height:1.45em}
  .story .wrap{display:grid;grid-template-columns:minmax(0,28rem) minmax(0,1fr);gap:0 48px;align-items:end}
  .story-steps{text-align:left;grid-template-columns:1fr;gap:6px;margin:0 0 36px}
  .opening .work-grid{grid-template-columns:1fr;justify-items:center;gap:20px;max-width:none}
  .opening .phone{width:204px}
  .opening .phone figcaption,.opening .work-text{text-align:center}
  .opening .work-text h2{display:none}
  .opening .work-text .btn{display:none}
  .opening .work-text .lead{margin-top:0;font-size:1.125rem}
  .latest{padding:24px 0}
  .latest-card{max-width:none;padding:20px 28px;--latest-h:408px}
  .latest-card .latest-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head facts" "chart facts" "chart line" "chart cta";gap:0 48px;align-items:start}
  .latest-card .latest-head{grid-area:head}
  .latest-card .latest-chart{grid-area:chart}
  .latest-card .latest-facts{grid-area:facts;margin:0}
  .latest-card .latest-line{grid-area:line}
  .latest-card .latest-actions{grid-area:cta}
  .see{padding:48px 0}
  .see .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:40px;align-items:start}
  .see .pair{margin-top:0}
}
/* The home page, alive (site/home-alive). Everything here moves only for people who have not asked for reduced motion,
   and nothing claims more than the data: the pulse shows only while the newest reading is under two hours old. */
/* The coin ticker at the top (strip.css), still: no reveal, no nudge, no auto-scroll. Its line says how fresh it is. */
.home-strip{padding:16px 0 0}
.strip-live{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px;line-height:1.45;color:var(--muted)}
.pulse{display:none;flex:none;width:8px;height:8px;border-radius:50%;background:var(--white)}
.strip-live.on .pulse,.live-badge.on .pulse{display:inline-block}
@media (prefers-reduced-motion:no-preference){.strip-live.on .pulse,.live-badge.on .pulse{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* The Latest Break card's top line: LIVE (or the hour of the last reading), the card's kind when it is not a Break,
   and the countdown to the next hourly close. */
.latest-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 16px}
.live-badge{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--line-hover);border-radius:999px;font-size:16px;font-weight:600;line-height:1;color:var(--muted);white-space:nowrap}
.live-badge.on{color:var(--white);letter-spacing:.08em;text-transform:uppercase}
.latest-kind{font-size:16px;color:var(--muted)}
.latest-next{font-size:16px;color:var(--muted);font-variant-numeric:tabular-nums}
/* The Break chip, larger. */
.latest-head .badge{height:36px;padding:0 14px;font-size:1.125rem}
.latest-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.latest-actions .latest-cta{margin-top:0}
/* The mini chart draws in once when it first scrolls into view: the line left to right, then the Break dot. */
@media (prefers-reduced-motion:no-preference){
  .latest-chart.will-draw .close{stroke-dasharray:1;stroke-dashoffset:1}
  .latest-chart.will-draw .band,.latest-chart.will-draw .dot{opacity:0}
  .latest-chart.will-draw.draw .close{animation:draw-line 1.4s cubic-bezier(.4,0,.2,1) forwards}
  .latest-chart.will-draw.draw .band{animation:fade-in-to .6s ease-out forwards}
  .latest-chart.will-draw.draw .dot{animation:fade-in-to .3s ease-out 1.3s forwards}
}
@keyframes draw-line{to{stroke-dashoffset:0}}
@keyframes fade-in-to{to{opacity:1}}
/* 01, 02, 03 joined by one thin seismic trace, drawn in the gaps between the numbers. */
.steps li{position:relative}
.steps li:not(:last-child)::after{content:"";position:absolute;left:4px;top:62px;bottom:-22px;width:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='48'%3E%3Cpath d='M6 0V17L3.5 20.5 8.5 24.5 4.5 28.5 7 31 6 32V48' fill='none' stroke='%236F7990' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center top/12px 48px repeat-y;pointer-events:none}
/* The card's reserved height (measured filled, LTC fixture, site/home-alive): the desktop layout gets shorter as the
   columns widen. */
@media (min-width:80rem){.latest-card{--latest-h:348px}}