/* Best Time to Post: shared styles for every page.
   Black and white, sleek and minimal (Ken, 2026-11-03): JC's brand reads as one white serif
   line on black. Text white #F8F6F0 is measured from his on-screen hooks
   (data/site/ig-study/palette.json); everything else is neutral grey, no warm accents.
   The only color on the page comes from JC's own photos.
   Muted text #8C8C88 stays above 5 to 1 on both backgrounds. The warm version is in site.css.bak-warm. */

:root{
  color-scheme:dark;
  --fx:248,246,240;
  --bg:#0B0B0B;
  --surface:#141414;
  --surface-2:#1E1E1E;
  --white:#F8F6F0;
  --ink:#D6D6D3;
  --muted:#8C8C88;
  --linen:#D6D6D3;
  --wood:#2A2A2A;
  --teak:#4A4A4A;
  --lamp:#F8F6F0;
  --jungle:#6B6B6B;
  --moss:#BDBDBA;
  --stone:#5E5E5E;
  --stone-dark:#3A3A3A;
  --bar:#5E5E5E;
  --on-light:#0B0B0B;
  --line:rgba(var(--fx),.12);
  --line-2:rgba(var(--fx),.22);
  --glow:rgba(var(--fx),0.08);
  /* heatmap ramp, all measured: brighter means more studies agree */
  --h0:#161616;
  --h1:#2E2E2E;
  --h2:#4D4D4D;
  --h3:#7A7A7A;
  --h4:#B5B5B2;
  --h5:#F8F6F0;
  --serif:"Libre Baskerville",Baskerville,Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gutter:16px;
  --radius:12px;
  --arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h12M9 1.5 13.5 6 9 10.5' fill='none' stroke='%238C8C88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1v12M1.5 9 6 13.5 10.5 9' fill='none' stroke='%238C8C88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23F8F6F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ash theme, Fog version (Ken chose Fog, JC30, 2026-11-03): cool ash white page, near-black type. Default;
   ?theme=dark switches back. Photos and anything laid over them keep light text. */
:root[data-theme^="ash"]{
  color-scheme:light;
  --fx:16,18,21;
  --bg:#E3E5E7;
  --surface:#EEF0F1;
  --surface-2:#D7DADD;
  --white:#101215;
  --ink:#24272A;
  --muted:#53575C;
  --linen:#373B40;
  --wood:#CDD1D5;
  --teak:#A5AAAF;
  --lamp:#101215;
  --jungle:#767B81;
  --moss:#464A4F;
  --stone:#8A8F95;
  --stone-dark:#B9BEC3;
  --bar:#A5AAAF;
  --on-light:#EEF0F1;
  --line:rgba(16,18,21,.12);
  --line-2:rgba(16,18,21,.22);
  --glow:rgba(16,18,21,.03);
  --h0:#D7DADD;
  --h1:#C5C9CD;
  --h2:#9FA4A9;
  --h3:#65696F;
  --h4:#373B40;
  --h5:#101215;
  --arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h12M9 1.5 13.5 6 9 10.5' fill='none' stroke='%2353575C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1v12M1.5 9 6 13.5 10.5 9' fill='none' stroke='%2353575C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23101215' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--bg);
  background-image:radial-gradient(1100px 620px at 50% -220px,var(--glow),rgba(var(--fx),0.0) 70%);
  background-repeat:no-repeat;
  color:var(--ink);
  font:400 17px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
img,svg{max-width:100%}
img{height:auto}
::selection{background:rgba(var(--fx),0.2);color:var(--white)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:4px}

/* page frame */
.topbar,main,.site-foot{
  width:100%;
  max-width:calc(680px + 2 * var(--gutter));
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.topbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;
  padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:.01em;
  color:var(--white);text-decoration:none;white-space:nowrap;
}
.brand::before{
  content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;
  background:var(--lamp);box-shadow:0 0 12px 3px rgba(var(--fx),0.25);vertical-align:.18em;
}
.brand:hover{color:var(--white)}
.topbar nav{display:flex;align-items:center;gap:16px}
.topbar nav a{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.2;
  color:var(--muted);text-decoration:none;white-space:nowrap;
}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:var(--white)}
.nav-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-2)}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--white);letter-spacing:.003em;text-wrap:balance}
h1{font-size:clamp(38px,10vw,58px);line-height:1.04;margin:0 0 20px}
h2{font-size:clamp(30px,7.6vw,40px);line-height:1.1;margin:68px 0 18px;text-align:center}
h2::before{
  content:". . .";display:block;margin-bottom:12px;padding-left:.32em;
  font-size:22px;line-height:1;letter-spacing:.32em;color:var(--lamp);
}
h3{font-size:24px;line-height:1.2;margin:28px 0 8px}
p{margin:0 0 16px}
a{color:var(--lamp);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--white)}
b,strong{font-weight:600;color:var(--white)}

/* article hero */
.hero{padding:24px 0 4px;text-align:center}
.hero-photo{
  display:block;width:100%;height:auto;max-height:56vh;margin:0 0 30px;object-fit:cover;object-position:50% 20%;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 30px 80px -40px rgba(var(--fx),0.25);
}
.by{display:flex;align-items:center;justify-content:center;gap:12px;max-width:520px;margin:0 auto 30px}
.by .avatar{
  width:46px;height:46px;flex:none;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(var(--fx),0.3),0 0 0 5px rgba(var(--fx),0.07);
}
.byline{margin:0;font-size:14px;line-height:1.5;color:var(--muted);text-align:left}
.byline a{color:var(--ink)}

/* the short answer */
.answer{
  margin:0 0 8px;padding:24px 20px 8px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(var(--fx),0.04),rgba(var(--fx),0.0) 55%),var(--surface);
  box-shadow:0 24px 60px -32px rgba(0,0,0,.9);
}
.answer>p:first-child{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.42;color:var(--white)}
ul.quick{list-style:none;margin:0 0 16px;padding:0}
ul.quick li{position:relative;margin:0 0 10px;padding-left:22px}
ul.quick li::before{
  content:"";position:absolute;left:3px;top:.7em;width:7px;height:7px;border-radius:50%;
  background:var(--lamp);box-shadow:0 0 8px rgba(var(--fx),0.275);
}
ul.quick b{color:var(--lamp)}

/* tables */
.scroll{
  margin:20px 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
}
table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  color:var(--muted);background:var(--surface-2);
}
td{color:var(--ink)}
td:first-child{font-weight:500;color:var(--white)}
.scroll.wide table{min-width:600px}
tr.mid td:first-child{color:var(--lamp)}

/* source notes: small, light, once at the end of a section */
.src{margin:12px 0 0;font-size:13px;line-height:1.55;font-style:italic;color:var(--muted)}

/* figures and data cards */
figure{
  margin:26px 0;padding:18px 16px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
}
figure.plain{padding:0;background:none;border:0;border-radius:0}
figcaption{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted)}
.viz-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:12px}
.viz-title{font-size:15px;font-weight:600;line-height:1.35;color:var(--white)}
.viz-sub,.viz-note{font-size:13px;line-height:1.45;color:var(--muted)}
.viz-note{margin-top:10px}

/* 1. heatmap of the five studies */
.heat{display:block;width:100%;height:auto}
.heat text{font-family:var(--sans)}
.heat .t{font-size:20px;font-weight:600;fill:var(--white)}
.heat .ax{font-size:17px;font-weight:500;fill:var(--muted)}
.heat .h0{fill:var(--h0);stroke:rgba(var(--fx),.1);stroke-width:1}
.heat .h1{fill:var(--h1)}
.heat .h2{fill:var(--h2)}
.heat .h3{fill:var(--h3)}
.heat .h4{fill:var(--h4)}
.heat .h5{fill:var(--h5)}
.heat .n1,.heat .n2,.heat .n3,.heat .n4,.heat .n5{font-size:18px;font-weight:700}
.heat .n1,.heat .n2{fill:var(--white)}
.heat .n3,.heat .n4,.heat .n5{fill:var(--on-light)}
.heat g{cursor:pointer}
.heat g.sel rect{stroke:var(--white);stroke-width:3}
.heat-readout{
  min-height:3.1em;margin-top:12px;padding:10px 12px;font-size:14px;line-height:1.45;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
}
.heat-readout:empty{display:none}
.heat-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:13px;color:var(--muted)}
.heat-key .k-name{margin-right:4px}
.heat-key .k{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:6px;
  font-size:12px;font-weight:700;
}
.heat-key .k0{background:var(--h0);color:var(--muted);box-shadow:inset 0 0 0 1px rgba(var(--fx),.1)}
.heat-key .k1{background:var(--h1);color:var(--white)}
.heat-key .k2{background:var(--h2);color:var(--white)}
.heat-key .k3{background:var(--h3);color:var(--on-light)}
.heat-key .k4{background:var(--h4);color:var(--on-light)}
.heat-key .k5{background:var(--h5);color:var(--on-light)}

/* 2. median views by posting window */
.hbars{display:grid;gap:4px}
.hb{
  display:grid;grid-template-columns:8.2em minmax(0,1fr) 3.2em;align-items:center;gap:10px;
  margin:0 -8px;padding:6px 8px;border-radius:10px;font-size:14px;line-height:1.3;
}
.hb-k{color:var(--ink)}
.hb-k small{display:block;font-size:12px;color:var(--muted)}
.hb-t{height:12px;overflow:hidden;border-radius:999px;background:rgba(var(--fx),.07)}
.hb-f{display:block;height:100%;border-radius:999px;background:var(--bar)}
.hb-v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.hb.hi{background:rgba(var(--fx),0.045)}
.hb.hi .hb-f{background:linear-gradient(90deg,var(--h3),var(--lamp));box-shadow:0 0 14px rgba(var(--fx),0.25)}
.hb.hi .hb-k,.hb.hi .hb-v{color:var(--lamp);font-weight:600}

/* 3. my top reels: covers in his 9:16 format, a short number, the exact count and day under it */
.reels{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;align-items:start;
}
.reel{position:relative;display:flex;flex-direction:column;min-width:0}
.reel img,.reel .cover-text{
  display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:50% 0;
  border-radius:10px;border:1px solid var(--line);
}
.reel .cover-text{
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px 12px;
  text-align:center;background:#0B0B0B;border-color:#0B0B0B;
}
.reel .cover-text .line{font-family:var(--serif);font-size:13px;line-height:1.5;color:#F8F6F0}
.reel .rank{
  position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:600;color:#F8F6F0;
  background:rgba(11,11,11,.72);
}
.reel-info{display:flex;flex-direction:column;gap:2px;padding:10px 2px 0;font-size:12.5px;line-height:1.35;color:var(--muted);min-width:0}
.reel-info b{
  display:block;font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.1;color:var(--white);
  white-space:nowrap;font-variant-numeric:tabular-nums;margin-bottom:2px;
}
.reel-info .exact,.reel-info .when{white-space:nowrap}
.reel-info .when{color:var(--ink)}
.reel-info .note{margin-top:4px;font-size:11.5px;line-height:1.35}
.reel-1{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px}
.reel-1 img{width:44%;flex:none}
.reel-1 .reel-info{padding:0;font-size:14px}
.reel-1 .reel-info b{font-size:44px}
.plain figcaption{margin-top:10px}

/* views split bars (article and About) */
.split{display:flex;height:44px;margin:4px 0 14px;overflow:hidden;border-radius:12px;background:var(--surface-2)}
.seg{display:flex;align-items:center;min-width:0;padding:0 10px;font-size:15px;font-weight:700;color:var(--on-light);white-space:nowrap}
.seg-lamp{background:linear-gradient(90deg,var(--h3),var(--lamp));justify-content:flex-end}
.seg-moss{background:var(--moss)}
.legend{display:grid;gap:8px;font-size:14px;line-height:1.45;color:var(--ink)}
.legend div{display:flex;align-items:baseline;gap:10px}
.sw{flex:none;display:inline-block;width:12px;height:12px;border-radius:3px;transform:translateY(1px)}
.sw-lamp{background:var(--lamp)}
.sw-moss{background:var(--moss)}

/* 4. normal reel versus Trial Reel */
.lanes{display:grid;gap:14px}
.lane{display:grid;gap:10px;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px}
.lane-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.1}
.lane-normal .lane-name{color:var(--moss)}
.lane-trial .lane-name{color:var(--lamp)}
.lane-icon{width:30px;height:14px;flex:none}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;counter-reset:step}
.flow li{
  position:relative;padding:10px 12px;font-size:14px;line-height:1.4;color:var(--ink);counter-increment:step;
  background:var(--bg);border:1px solid var(--line-2);border-radius:12px;
}
.flow li::before{
  content:counter(step);display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-bottom:6px;
  border-radius:50%;font-size:11px;font-weight:700;color:var(--on-light);background:var(--moss);
}
.lane-trial .flow li::before{background:var(--lamp)}
.flow li:first-child::after{
  content:"";position:absolute;top:50%;right:-21px;width:16px;height:12px;transform:translateY(-50%);
  background:var(--arrow-r) no-repeat center / contain;
}
.lane-out{
  position:relative;margin-top:18px;padding:11px 14px;font-size:14.5px;line-height:1.45;color:var(--white);
  border:1px solid rgba(var(--fx),0.275);border-radius:12px;background:rgba(var(--fx),0.04);
}
.lane-trial .lane-out{border-color:rgba(var(--fx),0.3);background:rgba(var(--fx),0.04)}
.lane-out::before{
  content:"";position:absolute;left:50%;top:-17px;width:12px;height:14px;transform:translateX(-50%);
  background:var(--arrow-d) no-repeat center / contain;
}

/* 5. find your own best time: phone illustrations */
.illus{
  display:inline-block;margin:0 0 14px;padding:3px 10px;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;
}
.steps{display:grid;gap:12px;margin:18px 0}
.step{padding:16px;font-size:15.5px;line-height:1.55;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.step b{display:block;margin-bottom:4px;font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.15;color:var(--lamp)}
.phones .steps{margin:0;gap:16px}
.phones .step{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:16px;padding:0;background:none;border:0}
.phones .step b{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lamp)}
.phone{display:block;width:100px;height:auto}
.phone text{font-family:var(--sans)}
.ph-body{fill:var(--bg);stroke:var(--line-2);stroke-width:1.5}
.ph-screen{fill:var(--surface)}
.ph-notch{fill:var(--bg)}
.ph-a{fill:var(--surface-2)}
.ph-b{fill:var(--stone-dark)}
.ph-c{fill:var(--stone)}
.ph-hot{fill:rgba(var(--fx),0.08);stroke:var(--lamp);stroke-width:1.2}
.ph-hot-t{font-size:11px;font-weight:600;fill:var(--lamp)}
.ph-t{font-size:9.5px;font-weight:600;fill:var(--white)}
.ph-peak{fill:var(--lamp)}
.ph-axis{stroke:var(--line-2);stroke-width:1}
.ph-tap{fill:none;stroke:var(--white);stroke-width:1.4;opacity:.75}
.ph-dot{fill:var(--white)}

/* 6. time zone tool */
.tool{
  margin:22px 0 10px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(var(--fx),0.035),rgba(var(--fx),0.0) 45%),var(--surface);
  box-shadow:0 24px 60px -32px rgba(0,0,0,.9);
}
.tool-head{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--white)}
.tool-head svg{width:20px;height:20px;flex:none;color:var(--moss)}
.tool-grid{display:grid;gap:0 16px}
.tool label{display:block;margin:14px 0 6px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.tool select{
  width:100%;padding:12px 40px 12px 14px;font:500 16px/1.3 var(--sans);color:var(--white);
  background:var(--bg) var(--chevron) no-repeat right 14px center / 12px 8px;
  border:1px solid var(--line-2);border-radius:12px;-webkit-appearance:none;appearance:none;
}
.tool select:hover{border-color:rgba(var(--fx),0.275)}
.tool select:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.out{
  margin-top:18px;padding:16px;font-size:16px;line-height:1.45;color:var(--ink);
  background:var(--bg);border:1px solid rgba(var(--fx),0.2);border-radius:14px;
}
.out:empty{display:none}
.out b{display:block;margin:2px 0;font-family:var(--serif);font-size:42px;font-weight:600;line-height:1.05;color:var(--lamp)}
.tiny{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;color:var(--muted)}
.tiny button{
  padding:7px 12px;font:500 13px/1.2 var(--sans);color:var(--white);cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
}
.tiny button:hover{border-color:rgba(var(--fx),0.325)}

/* questions */
.faq h3{margin:0;padding-top:20px;border-top:1px solid var(--line)}
.faq h3:first-child{padding-top:4px;border-top:0}
.faq p{margin:8px 0 20px}
h2.faq{margin-bottom:22px}

/* call to action */
.cta{
  margin:60px 0 24px;padding:26px 20px 10px;text-align:center;border:1px solid rgba(var(--fx),0.2);border-radius:22px;
  background:radial-gradient(520px 240px at 50% 0%,rgba(var(--fx),0.09),rgba(var(--fx),0.0) 70%),var(--surface);
}
.cta p{font-family:var(--serif);font-size:22px;line-height:1.4;color:var(--white)}
.cta b{color:var(--lamp)}

/* three calls to action on every page, all to the VSL page (Ken, 2026-11-03):
   a one-sentence strip at the top, a thin strip in the middle, a hard CTA at the end */
.cta-strip{display:block;padding:10px var(--gutter);text-align:center;font-size:14px;line-height:1.4;background:var(--lamp);color:var(--on-light)}
.cta-strip a{color:inherit;font-weight:500;text-decoration:none}
.cta-strip a:hover{color:inherit;text-decoration:underline}
.cta-thin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:36px 0;padding:12px 12px 12px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);font-size:15.5px;line-height:1.45;color:var(--ink)}
.cta-thin p{margin:0;flex:1 1 220px;min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--lamp);color:var(--on-light);font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap}
.btn:hover{color:var(--on-light);opacity:.88}
.btn-lg{min-height:52px;padding:0 28px;font-size:16px}
.cta .cta-alt{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--muted)}

/* footer */
.site-foot{
  margin-top:56px;padding-top:26px;padding-bottom:48px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;text-align:center;color:var(--muted);
}
.site-foot::before{
  content:". . .";display:block;margin-bottom:14px;padding-left:.32em;
  font-family:var(--serif);font-size:20px;letter-spacing:.32em;color:var(--lamp);
}
.site-foot p{margin:0 0 6px}
.site-foot a{color:var(--ink)}

/* About page */
.profile-hero{padding:44px 0 6px;text-align:center}
.hero-avatar{
  display:block;width:132px;height:132px;margin:0 auto 16px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(var(--fx),0.325),0 0 0 7px rgba(var(--fx),0.06),0 18px 60px -10px rgba(var(--fx),0.2);
}
.handle{margin-bottom:6px;font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--muted)}
.profile-hero h1{margin-bottom:14px}
.lede{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.45;text-align:center;color:var(--white)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 10px}
.stat{min-width:0;padding:16px 8px 14px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.stat b{display:block;margin-bottom:8px;font-family:var(--serif);font-size:clamp(26px,2.4vw + 10px,36px);font-weight:600;line-height:1;color:var(--lamp);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}
/* stat labels stay one line when kept to about 20 characters; numbers never break */
@media (max-width:340px){.stat span{font-size:11.5px}}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 8px}
.strip .shot{margin:0;padding:0;background:none;border:0;border-radius:0;min-width:0}
.shot img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border:1px solid var(--line);border-radius:14px}
.shot figcaption{margin-top:8px;text-align:center;font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;line-height:1.25;color:var(--white)}
.shot figcaption span{display:block;margin-top:3px;font-family:var(--sans);font-style:normal;font-size:12px;color:var(--muted)}

/* live answer line on the today tool page */
.today-now{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:600;color:var(--white)}
.today-now[hidden]{display:none}

/* home proof screenshot */
.home-proof{max-width:320px;margin:26px auto}
.home-proof img{display:block;width:100%;border-radius:12px}

/* wider screens */
@media (min-width:620px){
  body{font-size:18px}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phones .step{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .phone{width:120px}
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-grid .wide{grid-column:1 / -1}
  figure{padding:22px 22px 18px}
  figure.plain{padding:0}
}
@media (min-width:700px){
  .reels{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 12px}
  .reel-1{grid-column:auto;flex-direction:column;align-items:stretch;gap:0}
  .reel-1 img{width:100%}
  .reel-1 .reel-info{padding:10px 2px 0;font-size:12.5px}
  .reel-info b,.reel-1 .reel-info b{font-size:24px}
  .reel .cover-text .line{font-size:12px}
  .lane{grid-template-columns:118px minmax(0,1fr) 190px;align-items:center;gap:22px}
  .lane-name{flex-direction:column;align-items:flex-start}
  .lane-out{margin-top:0}
  .lane-out::before{left:-19px;top:50%;width:16px;height:12px;transform:translateY(-50%);background-image:var(--arrow-r)}
}
@media (max-width:640px){
  figure.bleed{
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
    padding-left:10px;padding-right:10px;border-left:0;border-right:0;border-radius:0;
  }
}
@media (max-width:360px){
  .brand{font-size:19px}
  .topbar nav{gap:12px}
}
@media (prefers-reduced-motion:no-preference){
  .heat g rect{transition:stroke-width .15s ease}
  a,.tiny button,.tool select{transition:color .15s ease,border-color .15s ease}
}

/* Five ash variations for review (Ken, 2026-11-03). Muted text is 5 to 1 or better on every surface. */
:root[data-theme="ash-1"]{/* Linen ash, warmest */--bg:#EDEAE4;--surface:#F6F4F0;--surface-2:#E2DED7;--ink:#2A2825;--white:#151412;--lamp:#151412;--h5:#151412;--muted:#5C5852;--h0:#E2DED7;--on-light:#F6F4F0}
:root[data-theme="ash-2"]{/* Stone ash, neutral grey */--bg:#E5E5E3;--surface:#EFEFED;--surface-2:#DADAD7;--ink:#262626;--white:#111111;--lamp:#111111;--h5:#111111;--muted:#585856;--h0:#DADAD7;--on-light:#EFEFED}
:root[data-theme="ash-3"]{/* Paper ash, lightest */--bg:#F3F2EF;--surface:#FBFAF8;--surface-2:#E8E7E3;--ink:#262624;--white:#111110;--lamp:#111110;--h5:#111110;--muted:#5F5F5A;--h0:#E8E7E3;--on-light:#FBFAF8}
:root[data-theme="ash-4"]{/* Concrete ash, deepest */--bg:#D9D8D4;--surface:#E6E5E1;--surface-2:#CDCCC7;--ink:#1F1F1D;--white:#0D0D0C;--lamp:#0D0D0C;--h5:#0D0D0C;--muted:#4A4A46;--h0:#CDCCC7;--on-light:#E6E5E1}
:root[data-theme="ash-5"]{/* Fog ash, cool blue grey */--bg:#E3E5E7;--surface:#EEF0F1;--surface-2:#D7DADD;--ink:#24272A;--white:#101215;--lamp:#101215;--h5:#101215;--muted:#53575C;--h0:#D7DADD;--on-light:#EEF0F1}

/* breadcrumbs (visible, matching the BreadcrumbList data) */
.crumbs{margin:18px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--white);text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 6px}
/* home hub */
.hub-group{margin:34px 0 0}
.hub-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.hub-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub-list a{display:block;height:100%;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--white);text-decoration:none}
.hub-list a:hover{border-color:var(--white)}
.hub-list small{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}