/* opt-in.html — page styles (shared ones are in /styles.css). */
/* shared: the two poles */
.tje-aura{position:absolute;width:45rem;height:45rem;left:-20rem;top:-22.5rem;border-radius:50%;background:radial-gradient(closest-side,rgba(243,163,120,.24),rgba(243,163,120,0));pointer-events:none}
.tje-grain{position:absolute;inset:0;background:url(../img/grain.png) repeat;background-size:11.25rem 11.25rem;opacity:.32;mix-blend-mode:soft-light;pointer-events:none}
/* on navy the dark half would vanish into the panel: a hairline keeps the dot whole */
.tje-dark .tje-dot{box-shadow:0 0 0 1.5px rgba(239,231,218,.4)}
.tje-dark .tje-kick{color:var(--orange-hi)}
.tje-dark .tje-it{color:var(--orange)}
.tje a:focus-visible,.tje button:focus-visible{outline:2px solid var(--blue);outline-offset:.1875rem}
.tje-dark a:focus-visible,.tje-dark button:focus-visible,.tgd-hero-b a:focus-visible{outline-color:var(--orange-hi)}
.tje-error{margin:.625rem 0 0 1.375rem;font-size:.875rem;color:#a3241b}
.tje-suggest{margin:.625rem 0 0 1.375rem;font-size:.875rem;color:var(--dim)}
@media (max-width:767px){
  .tje-dock{position:fixed;z-index:30;left:0;right:0;bottom:0;display:block;padding:.75rem 1rem max(.75rem,env(safe-area-inset-bottom));background:rgba(253,253,252,.97);border-top:1px solid rgba(28,24,18,.08);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);transform:translateY(110%);visibility:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
  .tje-dock.is-on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s}
  .tje-dock .tje-cta{width:100%;height:3.25rem}
}
@media (max-width:899px){.tje-nav .tje-link{color:var(--ink)}.tje-nav .tje-link:hover{color:var(--orange-deep)}.tje-nav .tje-link::after{background:var(--orange)}}
@media (max-width:767px){.tje-logo img{height:2.5rem}.tje-nav{padding-top:1rem;padding-bottom:1rem}.tje-links{gap:1.375rem}.tje-link{font-size:.90625rem}}
/* ================= 00 · the offer: the promise and the form on the light pole, the guide itself on the dark one ================= */
.tgd-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:55rem;background:var(--pearl)}
.tgd-hero-a{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:8.5rem 5.5rem 4.5rem var(--pad)}
.tgd-hero-b{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:7.5rem 2.5rem 4.5rem;background:var(--shadow);border-bottom-left-radius:3.5rem}
.tgd-hero-b .tje-grain{z-index:-1}
.tgd-hero-b .tje-cover-glow{width:38.75rem;height:auto;aspect-ratio:1}
.tgd-hero .tje-kick{margin-bottom:1.5rem}
.tgd-h1{margin:0;max-width:42.5rem;font-family:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;font-weight:400;font-size:clamp(2.625rem,4.4vw,4rem);line-height:1.04;letter-spacing:-.014em;color:var(--ink);text-wrap:balance}
.tgd-h1 .tje-it{font-size:.92em}
.tgd-hero .tje-lead{max-width:33.75rem;margin-top:1.375rem;text-wrap:balance}
/* the form: name is optional and says so; the button is the full width of the card */
.tgd-form{position:relative;width:100%;max-width:37.5rem;margin-top:3.25rem}
.tgd-card{position:relative;z-index:1;width:100%;padding:1.25rem;background:#ffffff;border:1px solid rgba(28,24,18,.08);border-radius:2rem;box-shadow:0 0 0 1px rgba(28,24,18,.02),0 1.625rem 3.125rem -1.875rem rgba(6,12,24,.45)}
.tgd-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:.625rem}
.tgd-field .tje-label{margin:0 0 .4375rem .5rem}
.tgd-field .tje-input{width:100%}
.tgd-opt{font-weight:500;color:#8a8073}
.tgd-card .tje-cta{width:100%;height:3.625rem;margin-top:.75rem;font-size:1.03125rem}
/* the dot rides inline with the text, so when the line wraps on a phone it stays attached to the first word */
.tgd-trust{margin:.75rem .25rem 2px;font-size:.84375rem;line-height:1.5;color:#6b6254;text-align:center;text-wrap:balance}
.tgd-trust .tje-dot{display:inline-block;width:.625rem;height:.625rem;margin-right:.5rem;vertical-align:-1px}
.tgd-trust a{color:inherit;text-underline-offset:.1875rem}
/* the one handwritten note on the page: a person, not a funnel */
.tgd-doodle{position:absolute;z-index:2;right:.375rem;top:-2.625rem;display:flex;align-items:flex-start;gap:.25rem;margin:0;color:var(--orange-deep);transform:rotate(-4deg);pointer-events:none}
.tgd-doodle span{font-family:Caveat,"Bradley Hand",cursive;font-size:1.5rem;font-weight:600;line-height:1}
.tgd-doodle svg{flex:none;width:2.75rem;height:1.875rem;margin-top:.5625rem}
/* proof slot: a real reader count or quote goes here; never an invented one */
.tgd-proof{display:inline-flex;align-items:center;gap:.625rem;margin:1.125rem 0 0;padding:.625rem 1.125rem .625rem .875rem;border:1.5px dashed rgba(28,24,18,.22);border-radius:62.4375rem;background:#faf6ef;font-size:.84375rem;line-height:1.4;color:#8a8073}
.tgd-proof svg{flex:none}
/* after the ask: say where it went, what happens next, and open their inbox for them */
.tgd-done{padding:.375rem .5rem .25rem}
.tgd-done-top{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.875rem;align-items:start}
.tgd-done .tje-check{width:2.5rem;height:2.5rem}
.tgd-done .tje-success-title{margin:.3125rem 0 .25rem;font-size:1.75rem}
.tgd-done-copy{margin:0;font-size:.9375rem;line-height:1.55;color:var(--dim)}
.tgd-done-copy b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.tgd-next{display:grid;gap:.625rem;margin:1.125rem 0 0;padding:1rem 1.125rem;border-radius:1.25rem;background:#faf6ef;list-style:none;counter-reset:tgd-n}
.tgd-next li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.75rem;align-items:start;font-size:.90625rem;line-height:1.5;color:var(--dim);text-wrap:pretty}
.tgd-next li::before{counter-increment:tgd-n;content:counter(tgd-n);display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:-1px;border-radius:50%;background:#ffffff;box-shadow:inset 0 0 0 1px rgba(28,24,18,.14);font-size:.75rem;font-weight:600;line-height:1;color:var(--orange-deep)}
.tgd-next a{font-weight:600;text-underline-offset:.1875rem}
.tgd-done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.375rem;margin-top:1rem}
.tgd-inbox{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1.375rem;border-radius:62.4375rem;background:var(--ink);color:#ffffff;font-size:.9375rem;font-weight:600;text-decoration:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .3s ease}
.tgd-inbox:hover{background:#2e2820;color:#ffffff;transform:translateY(-2px);box-shadow:0 .875rem 1.625rem -.875rem rgba(28,24,18,.6)}
/* desktop: the hero fills the window the way the homepage's does. 63.125rem is the homepage hero's height (1010px at full size), the
   height the site zoom fits to the window; 100svh stops it overshooting on windows shorter than the zoom floor. */
@media (min-width:1180px){
  .tgd-hero{min-height:max(55rem,min(100svh,63.125rem))}
}
/* the taller panel gets a slightly bigger cover, once the panel is wide enough to keep the sticker clear of its edge
   (scale is separate from transform, so the float and slide-in still run) */
@media (min-width:1280px){.tgd-hero-b .tje-cover-float{scale:1.12}}
@media (max-width:899px){
  .tgd-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .tgd-hero-a{padding:7.75rem var(--pad) 3.5rem}
  .tgd-hero-b{padding:3.5rem var(--pad) 4rem;border-bottom-left-radius:2.5rem}
}
@media (max-width:767px){
  .tgd-hero-a{padding-top:6.75rem}
  .tgd-h1{font-size:2.5rem;line-height:1.06}
  .tgd-form{margin-top:3rem}
  .tgd-card{padding:1rem .875rem .875rem;border-radius:1.625rem}
  .tgd-field .tje-label{margin-left:.625rem}
  .tgd-doodle{right:2px;top:-2.375rem}
  .tgd-doodle span{font-size:1.375rem}
  .tgd-proof{display:flex;border-radius:1.125rem}
  .tgd-done{padding:.25rem .25rem 2px}
  .tgd-done .tje-success-title{font-size:1.625rem}
  .tgd-next{margin-top:1rem;padding:.875rem .875rem .875rem .75rem}
  .tgd-done-actions{flex-direction:column;align-items:stretch;gap:2px}
  .tgd-inbox{justify-content:center;min-height:3.25rem}
  .tgd-done-actions .tje-textbtn{align-self:center}
}
@media (max-width:560px){.tgd-fields{grid-template-columns:minmax(0,1fr)}}
/* ================= 01 · inside: four pages from the guide, on the same paper as the cover ================= */
.tgd-inside{position:relative;padding:7.5rem var(--pad) 7rem}
.tgd-inside-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2.5rem;margin:0 0 3rem}
.tgd-inside-head .tje-h2{max-width:45rem}
.tgd-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin:0;padding:0;list-style:none}
.tgd-page{position:relative;display:flex;flex-direction:column;gap:1.25rem;padding:2rem 2.5rem 2.375rem 3rem;overflow:hidden;border-radius:.375rem 1.375rem 1.375rem .375rem;background:#fbf8f2;box-shadow:inset 0 0 0 1px rgba(28,24,18,.07),0 1.5rem 2.5rem -2rem rgba(28,24,18,.36)}
/* the spine shading from the cover, so each card reads as a page lifted out of the book */
.tgd-page::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.125rem;background:linear-gradient(90deg,rgba(28,24,18,.12),rgba(28,24,18,.03) 45%,rgba(255,255,255,.6) 62%,rgba(28,24,18,0));pointer-events:none}
.tgd-page-n{display:flex;align-items:center;gap:.75rem;margin:0;font-size:.6875rem;line-height:1;font-weight:600;letter-spacing:.2em;font-variant-numeric:tabular-nums;color:var(--orange-deep)}
.tgd-page-n::after{content:"";flex:1;height:1px;background:rgba(28,24,18,.1)}
.tgd-t{margin:0;font-family:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;font-weight:400;font-size:clamp(1.375rem,1.9vw,1.625rem);line-height:1.32;letter-spacing:-.004em;color:var(--ink);text-wrap:pretty}
.tgd-t .tje-it{font-size:.94em}
.tgd-keep{white-space:nowrap}
/* the italic f leaves a hole before a question mark; pull it in */
.tgd-kern{margin-left:-.07em}
@media (max-width:767px){
  .tgd-inside{padding:5rem var(--pad) 4.5rem}
  .tgd-inside-head{margin-bottom:2rem}
  .tgd-pages{grid-template-columns:minmax(0,1fr);gap:.875rem}
  .tgd-page{min-height:0;gap:1rem;padding:1.5rem 1.375rem 1.625rem 2.25rem;border-radius:.3125rem 1.125rem 1.125rem .3125rem}
  .tgd-t{font-size:1.3125rem}
}
/* ================= 02 · a note from Jarred: an open letter, not another card ================= */
.tgd-note{padding:.5rem var(--pad) 7.5rem}
.tgd-letter{max-width:53.75rem;margin:0 auto;text-align:center}
.tgd-note-face{position:relative;width:6rem;height:6rem;margin:0 auto 1.625rem}
.tgd-note-face img{display:block;width:6rem;height:6rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 .375rem var(--pearl),0 0 0 .4375rem rgba(28,24,18,.14)}
.tgd-note-face .tje-orb{position:absolute;right:-.5rem;bottom:0;width:1.875rem;height:1.875rem;box-shadow:0 0 0 .3125rem var(--pearl)}
.tgd-note-kick{margin:0 0 1rem;font-size:.78125rem;line-height:1.4;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.tgd-note-q{margin:0}
.tgd-note-q p{margin:0;font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.42;letter-spacing:-.006em;color:var(--ink);text-wrap:balance}
.tgd-sign{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.375rem 1rem;margin:1.625rem 0 0}
.tgd-sign b{font-family:Caveat,"Bradley Hand",cursive;font-weight:600;font-size:2.5rem;line-height:1;color:var(--orange-deep)}
.tgd-sign span{font-size:.90625rem;color:var(--dim)}
@media (max-width:767px){
  .tgd-note{padding:0 var(--pad) 5rem}
  .tgd-note-face,.tgd-note-face img{width:4.75rem;height:4.75rem}
  .tgd-note-face{margin-bottom:1.375rem}
  .tgd-note-face .tje-orb{width:1.5rem;height:1.5rem;right:-.375rem;box-shadow:0 0 0 .25rem var(--pearl)}
  .tgd-note-q p{font-size:1.375rem;line-height:1.45}
  .tgd-sign b{font-size:2.25rem}
}
/* ================= 03 · the second ask, for anyone who read this far ================= */
.tgd-final{padding:0 var(--pad) 1.5rem}
.tgd-final-panel{position:relative;isolation:isolate;overflow:clip;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,35rem);gap:4.5rem;align-items:center;padding:5.5rem clamp(2.5rem,5vw,5rem);border-radius:2.75rem}
.tgd-final-panel .tje-grain{z-index:-1}
/* light on navy is always cool: low-alpha orange over navy mixes to a muddy brown haze */
.tgd-final-glow{position:absolute;z-index:-1;right:-10%;top:50%;width:56.25rem;height:56.25rem;border-radius:50%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(62,108,171,.26),rgba(62,108,171,.08) 58%,rgba(62,108,171,0));pointer-events:none}
.tgd-final .tje-h2{font-size:clamp(2.25rem,3.8vw,3.5rem)}
.tgd-final .tje-lead{max-width:27.5rem;margin-top:1.125rem}
@media (max-width:899px){.tgd-final-panel{grid-template-columns:minmax(0,1fr);gap:2.25rem;padding:4rem 2.5rem 2.5rem}}
@media (max-width:767px){
  .tgd-final{padding:0 .75rem .75rem}
  .tgd-final-panel{gap:1.75rem;padding:3.25rem .5rem .5rem;border-radius:1.75rem}
  .tgd-final-a{padding:0 .75rem}
  .tgd-final .tje-h2{font-size:2.25rem}
}
/* the hero cover is the product shot, so it gets one size up */
.tje-cover--xl{width:18.75rem}
.tje-cover--xl .tje-cover-face{padding:1.875rem 1.625rem 1.5rem 2.25rem}
.tje-cover--xl .tje-cover-kicker{font-size:.6875rem}
.tje-cover--xl .tje-emblem{width:5.625rem;height:5.625rem;margin:1.5rem 0}
.tje-cover--xl .tje-cover-title{font-size:2rem}
.tje-cover--xl .tje-cover-foot img{height:2.5rem}
.tje-cover--xl .tje-sticker{width:6.25rem;height:6.25rem;right:-1.875rem}
.tje-cover--xl .tje-sticker b{font-size:1.6875rem}
@media (max-width:767px){
  .tgd-hero-b .tje-cover-glow{width:27.5rem;opacity:.85}
  .tje-cover,.tje-cover--xl{width:13.5rem}
  .tje-cover--xl .tje-cover-face{padding:1.375rem 1.125rem 1.125rem 1.625rem}
  .tje-cover--xl .tje-cover-kicker{font-size:.59375rem}
  .tje-cover-title,.tje-cover--xl .tje-cover-title{font-size:1.4375rem}
  .tje-emblem,.tje-cover--xl .tje-emblem{width:4rem;height:4rem;margin:1rem 0}
  .tje-cover--xl .tje-cover-foot img{height:1.875rem}
  .tje-sticker,.tje-cover--xl .tje-sticker{width:4.875rem;height:4.875rem;right:-1.25rem}
  .tje-sticker b,.tje-cover--xl .tje-sticker b{font-size:1.3125rem}
}
@keyframes tgd-slide{from{opacity:0;transform:translateX(1.5rem)}to{opacity:1;transform:none}}
@keyframes tgd-write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:no-preference){
  .is-motion .tgd-hero-a > *{animation:tje-rise .85s cubic-bezier(.22,1,.36,1) both}
  .is-motion .tgd-hero-a > :nth-child(3){animation-delay:.08s}
  .is-motion .tgd-hero-a > :nth-child(4){animation-delay:.16s}
  .is-motion .tgd-hero-a > :nth-child(5){animation-delay:.26s}
  .is-motion .tgd-doodle{animation:tgd-write .9s cubic-bezier(.22,1,.36,1) 1s both}
  .is-motion .tgd-hero-b .tje-cover-stage{animation:tgd-slide 1s cubic-bezier(.22,1,.36,1) .2s both}
  .is-motion .tje-cover-float{animation:tje-float 7s ease-in-out 1s infinite}
}
@media (prefers-reduced-motion:reduce){
  .tje-bar,.tje-bar.is-on,.tje-dock,.tje-dock.is-on{transition:none}
  .tje-spin{animation-duration:2.4s}
  .tje-check{animation:none}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .is-motion .tje-reveal{animation:tje-rise linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
    /* the right-hand page of each spread settles a beat after the left */
    .is-motion .tgd-page:nth-child(even){animation-range:entry 24% entry 100%}
  }
}