/* Joe full homepage redesigns — extends preview-base.css
   Premium Apple / FT / Stripe hybrid. No motion. */

/* Kill preview entrance motion on these options */
.hero-mark,.hero h1,.hero>p{animation:none!important}

/* —— Option bar (review chrome) —— */
.option-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  padding:6px 4.4%;font-size:11px;color:var(--muted);background:var(--wash);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:6
}
.option-bar strong{color:var(--ink);font-weight:600}
.option-bar nav{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.option-bar a{color:var(--muted);min-height:28px;display:inline-flex;align-items:center}
.option-bar a:hover{color:var(--blue)}
.option-bar a[aria-current="page"]{color:var(--blue);font-weight:600}
.option-bar .sep{color:var(--line);user-select:none}

/* Site header sits under option bar */
body>header.site-header{top:34px}
body.production-home>header.site-header{top:0}
header.site-header{
  height:76px;display:flex;align-items:center;justify-content:space-between;
  padding-inline:4.4%;position:sticky;background:color-mix(in oklab,var(--paper) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:5;
  border-bottom:1px solid transparent
}
header.site-header.is-bordered,
body.scrolled header.site-header{border-bottom-color:var(--line)}


/* Brand lockup: PNG is white-on-transparent; invert for light paper */
.brand-logo{height:28px;width:auto;filter:invert(1)}
.brand{gap:0} /* no text gap */

.site-nav{display:flex;gap:22px;align-items:center}
.site-nav .nav-link{font-size:13px;min-height:44px;display:flex;align-items:center}
.site-nav .nav-link:hover{color:var(--blue)}
.nav-compact{display:none;align-items:center;gap:10px}
.nav-more{position:relative;border:0}
.nav-more>summary{
  list-style:none;min-height:40px;min-width:40px;padding:0 12px;margin:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--line);border-radius:99px;font-size:12px;font-weight:600;
  grid-template-columns:none;gap:0
}
.nav-more>summary::-webkit-details-marker{display:none}
.nav-more>summary::after{content:none}
.nav-more[open]>summary{border-color:var(--blue);color:var(--blue)}
.nav-panel{
  position:absolute;right:0;top:calc(100% + 8px);min-width:200px;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 40px #00000014;padding:8px;display:flex;flex-direction:column;gap:2px;z-index:8
}
.nav-panel a{
  display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font-size:13px
}
.nav-panel a:hover{background:var(--wash);color:var(--blue)}

/* —— Hub —— */
.hub-hero{text-align:center;padding:72px 24px 28px;max-width:780px;margin:0 auto}
.hub-hero h1{font-size:clamp(2rem,4vw,3.1rem)}
.hub-hero>p{font-size:16px;margin-top:18px;max-width:560px;margin-inline:auto}
.hub-inspire{font-size:12px;margin-top:14px}
.hub-inspire a{color:var(--blue);font-weight:600}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-width:1080px;margin:0 auto;padding:24px 26px 40px}
.hub-card{display:block;padding:22px 20px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.hub-card:hover{border-color:var(--blue)}
.hub-card .num{font-size:11px;color:var(--blue);font-weight:600;margin-bottom:8px}
.hub-card h2{font-size:1.15rem;letter-spacing:-.03em;margin-bottom:8px}
.hub-card p{font-size:13px;line-height:1.5;margin:0}
.hub-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.hub-card .tag{font-size:10px;padding:4px 8px;border-radius:99px;background:var(--wash);border:1px solid var(--line);color:var(--muted)}
.hub-label{max-width:1080px;margin:36px auto 0;padding:0 26px;font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.02em}
.hub-note{max-width:1080px;margin:0 auto 60px;padding:0 26px;font-size:12px;color:var(--muted)}

/* —— Shared hero bits —— */
.hero h1 .muted,.hero-muted{color:var(--muted)}
.hero-triad{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin:22px 0 0;
  font-size:clamp(1.15rem,2.4vw,1.65rem);letter-spacing:-.04em;color:var(--ink);
  align-items:center
}
/* Joe: triad bullets must read dark/solid so they separate the three beats */
.hero-triad .dot{
  color:color-mix(in oklab,var(--ink) 88%,transparent);
  font-weight:700;line-height:1;user-select:none
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}
.hero.compact{min-height:auto;padding:56px 24px 36px}
.hero.quiet{min-height:calc(70svh - 110px)}

/* —— Record grid (live /record articles) —— */
.record-section{padding:100px 24px}
.record-section .section-heading{margin-bottom:48px}
.record-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:1080px;margin:0 auto
}
.record-card{
  display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;
  border:1px solid var(--line);border-radius:18px;background:var(--paper);
  min-height:168px;transition:border-color .15s,box-shadow .15s
}
.record-card:hover{border-color:color-mix(in oklab,var(--blue) 45%,var(--line));box-shadow:0 12px 28px #0000000a}
.record-card .rc-kicker{font-size:11px;font-weight:600;color:var(--blue);letter-spacing:.02em}
.record-card h3{font-size:16px;font-weight:600;letter-spacing:-.03em;line-height:1.35;color:var(--ink)}
.record-card p{font-size:13px;line-height:1.55;margin:0;flex:1}
.record-card .rc-go{font-size:12px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-top:4px}
.record-foot{text-align:center;margin-top:36px}
.record-empty{grid-column:1/-1;text-align:center;padding:32px 20px}

/* —— Feature chips / perspective strip —— */
.chip-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:720px;margin:0 auto;padding:8px 24px 48px
}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;
  background:var(--wash);border:1px solid var(--line);font-size:13px;color:var(--ink);font-weight:600
}
.chip em{font-style:normal;font-weight:400;color:var(--muted);font-size:12px}

.perspective-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto 40px;padding:0 24px
}
.frame-chip{
  flex:1 1 200px;max-width:280px;padding:18px 18px 16px;border-radius:16px;
  background:var(--paper);border:1px solid var(--line);text-align:left
}
.frame-chip strong{display:block;font-size:13px;color:var(--blue);margin-bottom:6px}
.frame-chip span{font-size:13px;color:var(--muted);line-height:1.45}

/* —— Briefing home (v3) —— */
.briefing-hero{padding:48px 24px 20px;text-align:center;max-width:720px;margin:0 auto}
.briefing-hero h1{font-size:clamp(2.1rem,4.2vw,3.4rem)}
.briefing-hero>p{font-size:16px;margin-top:16px}
.briefing-rail{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;
  max-width:1080px;margin:0 auto;padding:32px 26px 56px
}
.briefing-list{text-align:left}
.briefing-list .bl-label{
  font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px
}
.briefing-list ol{list-style:none;padding:0;margin:0;counter-reset:bl}
.briefing-list li{
  counter-increment:bl;display:grid;grid-template-columns:36px 1fr;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line)
}
.briefing-list li::before{
  content:counter(bl,decimal-leading-zero);font-size:12px;font-weight:600;color:var(--blue);padding-top:3px;font-variant-numeric:tabular-nums
}
.briefing-list a{font-size:15px;line-height:1.4;color:var(--ink);font-weight:500}
.briefing-list a:hover{color:var(--blue)}
.briefing-list .bl-dek{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:4px;line-height:1.45}
.exec-card{
  padding:24px 24px 20px;border-radius:20px;background:var(--wash);border:1px solid var(--line);text-align:left
}
.exec-card .eyebrow{margin-bottom:10px}
.exec-card h3{font-size:17px;font-weight:600;letter-spacing:-.03em;margin-bottom:12px;color:var(--ink)}
.exec-card .lines{font-size:14px;color:var(--ink);line-height:1.55;margin:0;padding:0 0 0 1.1em}
.exec-card .lines li{margin:0 0 8px}
.exec-card details{border:0;margin-top:14px}
.exec-card summary{
  min-height:36px;font-size:13px;font-weight:600;color:var(--blue);
  display:inline-flex;align-items:center;gap:6px;grid-template-columns:none;cursor:pointer
}
.exec-card summary::after{content:none}
.exec-card details[open] summary::after{content:none}
.exec-card details p{font-size:13px;margin-top:10px}
.briefing-phone{display:flex;justify-content:center;padding:0 24px 60px}
.briefing-phone img{width:min(240px,70vw);border-radius:27px;box-shadow:0 20px 42px #00000016;outline:1px solid #00000010}

/* —— Desk / app-first (v4) —— */
.desk-hero{
  display:grid;grid-template-columns:1fr 1.05fr;gap:6%;align-items:center;
  padding:56px max(5%,calc((100vw - 1150px)/2)) 48px;min-height:calc(88svh - 120px)
}
.desk-hero .phone{display:flex;justify-content:center}
.desk-hero .phone img{width:min(268px,68vw);border-radius:28px;box-shadow:0 20px 42px #00000016;outline:1px solid #00000010}
.desk-hero .copy h1{font-size:clamp(2.3rem,4.2vw,3.6rem)}
.desk-hero .copy>p{font-size:17px;margin:18px 0 26px;max-width:440px}
.desk-list{
  max-width:1080px;margin:0 auto;padding:20px 26px 40px
}
.desk-list .section-heading{margin-bottom:28px;text-align:left;max-width:none}
.desk-rail{border-top:1px solid var(--line)}
.desk-row{
  display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line);text-align:left
}
.desk-row .dn{font-size:12px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.desk-row a{font-size:15px;line-height:1.35;color:var(--ink);font-weight:500}
.desk-row a:hover{color:var(--blue)}
.desk-row .dd{font-size:12px;color:var(--muted);max-width:280px;text-align:right;line-height:1.4}

/* —— Newsletter (v5) —— */
.nl-hero{text-align:center;padding:56px 24px 20px;max-width:720px;margin:0 auto}
.nl-hero h1{font-size:clamp(2.2rem,4.5vw,3.6rem)}
.nl-hero>p{font-size:16px;margin-top:16px}
.email-stage{display:flex;flex-direction:column;align-items:center;padding:28px 24px 56px}
.email-chrome{
  width:min(100%,480px);border-radius:16px;border:1px solid var(--line);background:var(--paper);
  box-shadow:0 18px 40px #00000012;overflow:hidden
}
.email-chrome .chrome-bar{
  display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--wash);border-bottom:1px solid var(--line)
}
.email-chrome .dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.email-chrome .chrome-meta{font-size:11px;color:var(--muted);margin-left:8px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-body{padding:28px 26px 32px;text-align:left}
.email-body .from{font-size:12px;color:var(--muted);margin-bottom:4px}
.email-body .subject{font-size:18px;letter-spacing:-.03em;color:var(--ink);margin-bottom:18px;font-weight:400}
.email-brief{padding:14px 0;border-top:1px solid var(--line)}
.email-brief:first-of-type{border-top:0;padding-top:0}
.email-brief .eb-label{font-size:11px;font-weight:600;color:var(--blue);margin-bottom:4px}
.email-brief h3{font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:-.02em}
.email-brief p{font-size:13px;margin:0;line-height:1.55}
.email-brief a{color:var(--ink)}
.email-brief a:hover{color:var(--blue)}
.email-foot{font-size:11px;color:var(--muted);margin-top:22px;text-align:center}
.nl-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}

/* Feature accordion tighten for v4 */
.features.tight{padding-top:70px;padding-bottom:40px}
.features.tight summary{min-height:72px;font-size:16px}

/* Plans already in preview-base — slight polish */
.plans .section-heading{margin-bottom:0}

/* Closing / footer polish */
footer nav a+a{margin-left:0}
.see-also{font-size:12px;text-align:center;padding:20px 24px 0;color:var(--muted)}
.see-also a{color:var(--blue);font-weight:600}

@media(max-width:900px){
  .record-grid{grid-template-columns:repeat(2,1fr)}
  .briefing-rail{grid-template-columns:1fr;gap:28px}
  .desk-hero{grid-template-columns:1fr;gap:36px;min-height:0;padding:48px 24px 40px}
  .desk-hero .copy{text-align:center;order:-1}
  .desk-hero .copy>p{margin-inline:auto}
  .desk-row{grid-template-columns:36px 1fr;gap:12px}
  .desk-row .dd{display:none}
  .desk-list .section-heading{text-align:center}
}

@media(max-width:750px){
  .option-bar{padding:6px 16px;position:relative}
  body>header.site-header{top:0;height:68px;padding-inline:16px}
  .site-nav{display:none}
  .nav-compact{display:flex}
  .brand .brand-logo{width:clamp(116px,35vw,156px);height:auto}
  .site-header .brand{min-width:0;flex:0 1 auto}
  .nav-compact{flex:0 0 auto;gap:7px}
  .nav-compact .nav-link{display:none}
  .hero h1{max-width:900px;font-size:clamp(2.45rem,9vw,4.4rem);line-height:1.08;text-wrap:balance}
  .hero-triad{font-size:clamp(1rem,4.5vw,1.4rem)}
  .record-section{padding:72px 20px}
  .record-grid{grid-template-columns:1fr;gap:12px}
  .chip-row{padding-bottom:36px}
  .briefing-rail{padding:24px 20px 40px}
  .features.tight{padding:60px 20px 30px}
}

@media(forced-colors:active){
  .record-card,.frame-chip,.exec-card,.email-chrome{border:1px solid ButtonText}
}

/* preview-base hides .nav-link on small screens — keep compact Record visible */
@media(max-width:750px){
  .nav-compact .button.small{min-height:40px}
  /* center hero CTAs on v4 when copy is centered */
  .desk-hero .hero-ctas{justify-content:center}
}
.micro-tagline{font-size:clamp(.9rem,1.8vw,1.05rem)!important;font-weight:600;color:var(--blue)!important;margin-top:18px!important}
@media(max-width:380px){body>header.site-header{padding-inline:12px}.nav-compact{gap:5px}.nav-compact .button.small{padding-inline:12px;font-size:11px}.nav-more>summary{padding-inline:9px}}

/* —— v2 Fleet: above-fold store badges + today brief —— */
.store-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:18px;padding:0 12px
}
.store-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 16px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:-.01em
}
.store-badge:hover{opacity:.92;color:#fff}
.today-brief{padding:48px 24px 56px}
.today-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,70px);
  align-items:center;
  max-width:1100px;
  margin:36px auto 0;
}
.report-preview{
  display:block;overflow:hidden;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);
  box-shadow:0 24px 65px #1b243012;
  transition:transform .2s ease,box-shadow .2s ease
}
.report-preview:hover{transform:translateY(-3px);box-shadow:0 30px 70px #1b24301c}
.report-preview:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.report-preview__mast{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:15px 23px;border-bottom:1px solid var(--line);font-size:11px
}
.report-preview__mast strong{font-size:15px;letter-spacing:-.04em}
.report-preview__mast span{font-size:9px;letter-spacing:.11em;font-weight:600;color:var(--muted);text-align:right}
.report-preview__art{display:grid;place-items:center;overflow:hidden;height:195px;background:#172031}
.report-preview__art img{width:260px;height:260px;object-fit:contain;filter:brightness(1.6) sepia(.1);mix-blend-mode:screen}
.report-preview__content{display:flex;flex-direction:column;align-items:flex-start;padding:22px 28px 25px}
.report-preview__date{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:600}
.report-preview__content strong{font-size:clamp(1.6rem,3.2vw,2.35rem);font-weight:400;letter-spacing:-.055em;line-height:1.12;margin:8px 0 12px}
.report-preview__content>span:not(.report-preview__date):not(.report-preview__read){font-size:13px;line-height:1.6;color:var(--muted)}
.report-preview__read{font-size:12px;font-weight:600;color:var(--blue);margin-top:19px}
.today-card{margin:0;text-align:left}
.today-card h3{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:400;line-height:1.12;letter-spacing:-.055em;margin:10px 0 26px}
.today-steps{list-style:none;padding:0;margin:0}
.today-steps li{display:flex;align-items:baseline;gap:17px;padding:14px 0;border-top:1px solid var(--line)}
.today-steps li>span{font-size:11px;font-weight:600;color:var(--blue)}
.today-steps strong{font-size:14px;font-weight:600}
.today-steps p{font-size:13px;line-height:1.5;color:var(--muted);margin:5px 0 0}
.today-cta{margin-top:28px}
@media(max-width:750px){
  .today-layout{grid-template-columns:1fr;gap:28px}
  .report-preview{max-width:540px;width:100%;margin-inline:auto}
  .today-card{max-width:540px;width:100%;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.report-preview{transition:none}.report-preview:hover{transform:none}}
.hero.quiet .hero-ctas{margin-bottom:4px}
@media(max-width:750px){
  .store-row{flex-direction:column;align-items:stretch;width:min(100%,320px);margin-inline:auto}
  .store-badge{width:100%}
  .hero.quiet{min-height:auto;padding-bottom:28px}
}

.hub-decision{
  font-size:15px;color:var(--ink);background:var(--wash);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;max-width:640px;margin:0 auto 22px;line-height:1.5
}
.hub-decision a{color:var(--blue);font-weight:600}
.hub-card-winner{outline:2px solid color-mix(in oklab,var(--blue) 55%,transparent);box-shadow:0 12px 28px #0000000a}


/* Joe v1 — copy-first triad (Apple-simple) */
.joe-hero { padding-bottom: 1.5rem; }
.joe-triad-stack {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  text-align: center;
}
.joe-beat-label {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7cb7ff;
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.joe-beat-lead {
  font-family: Charter, Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  color: #f4efe7;
  margin: 0;
}
.joe-beat-cta {
  margin: 0.85rem 0 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f4efe7;
}
.joe-after { margin-top: 1rem; justify-content: center; }