/* ============ THE DESIGN READER - shared stylesheet ============ */
:root{
  --warm-white:#FAF6F0;
  --beige:#EDE4D6;
  --beige-deep:#E2D5C2;
  --charcoal:#4A3F35;
  --ink-soft:#5A534A;
  --gold:#C9A87C;
  --gold-deep:#A17E4F;
  --rule:#D8C9B4;
  --dark-section:#5B4E42;
  --display:"Poppins",sans-serif;
  --body:"Lexend",system-ui,sans-serif;
  --wrap:1240px;
  --content:1144px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--warm-white);color:var(--charcoal);font-family:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- type helpers ---- */
.eyebrow{font-family:var(--body);font-size:0.96rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);display:block}
.serif{font-family:var(--display)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.015em}
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:0;box-sizing:border-box}
.center{text-align:center}
.lead{font-size:1.12rem;color:var(--ink-soft)}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--body);font-size:0.96rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:1rem 1.9rem;min-width:12.5rem;text-align:center;border:1px solid var(--charcoal);cursor:pointer;transition:all .25s ease;text-decoration:none;white-space:nowrap}
.btn-sm{min-width:0;padding:.55rem 1.1rem;font-size:0.96rem}
.btn-solid{background:var(--charcoal);color:var(--warm-white)}
.btn-solid:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn-ghost{background:transparent;color:var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal);color:var(--warm-white)}

/* ---- nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:1.2rem clamp(1.25rem,5vw,4rem);background:rgba(250,246,240,.96);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--rule);box-shadow:0 1px 0 rgba(44,40,36,.04);transition:box-shadow .25s,border-color .25s}
.nav.scrolled{border-bottom-color:var(--rule);box-shadow:0 8px 30px -18px rgba(44,40,36,.4)}
.nav.solid{border-bottom-color:var(--rule)}
.brand{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:.02em;text-transform:none;line-height:1;text-decoration:none;color:var(--charcoal);white-space:nowrap}
.brand small{display:block;font-family:var(--body);font-size:0.76rem;font-weight:500;letter-spacing:.08em;color:var(--gold-deep);text-transform:uppercase;margin-top:.3rem;white-space:nowrap}
.nav-links{display:flex;gap:2rem;font-size:0.96rem;font-weight:500;letter-spacing:.01em;text-transform:none;align-items:center}
.nav-links a{color:var(--ink-soft);text-decoration:none;transition:color .2s;white-space:nowrap;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--gold);transition:width .25s ease}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a:hover,.nav-links a.active{color:var(--charcoal)}
.nav-links a.cta{color:var(--gold-deep)}
/* dropdown */
.nav-drop{position:relative}
.nav-drop>button{font:inherit;font-size:0.96rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-soft);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;padding:0;white-space:nowrap;transition:color .2s}
.nav-drop>button:hover,.nav-drop.open>button{color:var(--charcoal)}
.nav-drop>button .caret{font-size:0.96rem;transition:transform .2s}
.nav-drop.open>button .caret{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + .9rem);right:0;min-width:190px;background:var(--warm-white);border:1px solid var(--rule);box-shadow:0 18px 40px -20px rgba(44,40,36,.35);padding:.4rem 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:50}
.nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{display:block;padding:.7rem 1.2rem;font-size:0.96rem;letter-spacing:.12em;border:none;color:var(--ink-soft)}
.nav-menu a:hover{background:var(--beige);color:var(--charcoal)}
.nav-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--charcoal)}
@media(max-width:1040px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--warm-white);border-bottom:1px solid var(--rule);padding:.5rem 0;align-items:stretch}
  .nav-links.open{display:flex}
  .nav-links a{padding:.9rem clamp(1.25rem,5vw,4rem);width:100%;border-top:1px solid var(--rule)}
  .nav-toggle{display:block}
  /* dropdown flattens into the list on mobile */
  .nav-drop{position:static}
  .nav-drop>button{display:none}
  .nav-menu{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;padding:0;min-width:0;background:none}
  .nav-menu a{padding:.9rem clamp(1.25rem,5vw,4rem);border-top:1px solid var(--rule);font-size:0.96rem}
}

/* ---- page header (interior pages) ---- */
.page-head{background:var(--beige);border-bottom:1px solid var(--rule);padding:clamp(3rem,7vw,5rem) clamp(1.25rem,5vw,4rem)}
.page-head .wrap{max-width:var(--wrap)}
.page-head .eyebrow{margin-bottom:1rem}
.page-head h1{font-size:clamp(2.3rem,5vw,3.6rem);margin-bottom:1rem}
.page-head h1 em{font-style:italic;color:var(--gold-deep)}
.page-head p{color:var(--ink-soft);font-size:1.1rem}

/* ---- cards grid ---- */
.grid{display:grid;gap:1.6rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--warm-white);border:1px solid var(--rule);padding:2rem 1.8rem;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(44,40,36,.35)}
.card .num{font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--gold-deep);margin-bottom:.6rem}
.card h3{font-size:1.3rem;margin-bottom:.6rem}
.card p{color:var(--ink-soft);font-size:.96rem}
.card .more{margin-top:1rem;font-size:0.96rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);text-decoration:none}
@media(max-width:980px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
/* tiny phones: tighten card padding and let flex children shrink */
@media(max-width:400px){
  .card{padding:1.5rem 1.2rem}
  .card > *{min-width:0}
  .card h3{word-break:break-word}
}

/* ---- price/offer cards ---- */
.offer{background:var(--warm-white);color:var(--charcoal);border:1px solid var(--rule);padding:2.2rem 1.9rem;display:flex;flex-direction:column}
.offer h3{font-size:1.15rem;margin-bottom:.2rem;color:var(--charcoal)}
.offer .price{font-family:var(--display);font-size:2.2rem;margin:.3rem 0 .2rem;color:var(--charcoal)}
.offer{position:relative}
.offer.feature{border-color:var(--gold);border-width:2px}
/* flexible badge driven by data-badge attribute */
.offer[data-badge]::before{content:attr(data-badge);position:absolute;top:-.7rem;left:1.9rem;background:var(--gold-deep);color:#fff;font-size:0.96rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .7rem}
.offer.feature[data-badge]::before{background:var(--gold-deep)}
.offer .kind{font-size:0.96rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.4rem}
.offer .hook{font-size:0.96rem;color:var(--ink-soft);line-height:1.5;margin:.2rem 0 .9rem}
.offer ul{list-style:none;margin:.6rem 0 1.6rem;flex:1}
.offer li{font-size:0.96rem;color:var(--ink-soft);padding:.35rem 0 .35rem 1.3rem;position:relative}
.offer li::before{content:"";position:absolute;left:0;top:.85rem;width:6px;height:6px;background:var(--gold);border-radius:50%}
.offer .btn{text-align:center}
.offer.soon{opacity:.92}
.offer .soon-tag{display:inline-block;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--gold-deep);border:none;padding:2px 7px;border-radius:20px;margin:0;line-height:1.3;white-space:nowrap}

/* group heading for the "Apply Your Design" tier */
.tier-head{max-width:var(--wrap);margin:0 auto 2rem;text-align:center}
.tier-head h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.5rem}
.tier-head p{color:var(--ink-soft);margin:0 auto}

/* FAQ accordion */
.faq{max-width:var(--wrap);margin:0 auto}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{font-family:var(--display);font-size:1.05rem;color:var(--charcoal);padding:1.1rem 2rem 1.1rem 0;cursor:pointer;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:.3rem;top:1rem;font-size:1.3rem;color:var(--gold-deep);transition:transform .2s}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{color:var(--ink-soft);font-size:0.96rem;padding:0 0 1.2rem;margin:0}

/* ---- prose ---- */
.prose{max-width:680px}
.prose p{color:var(--ink-soft);margin-bottom:1.2rem}
.prose h2{font-size:1.8rem;margin:2.4rem 0 1rem}
.prose h3{font-size:1.3rem;margin:1.8rem 0 .6rem}
.prose ul{margin:0 0 1.2rem 1.2rem;color:var(--ink-soft)}
.prose li{margin-bottom:.5rem}

/* ---- forms ---- */
.field{margin-bottom:1.1rem;scroll-margin-top:7rem}
.field label{display:block;font-size:0.96rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;padding:.85rem 1rem;border:1px solid var(--rule);background:var(--warm-white);font-family:var(--body);font-size:1rem;color:var(--charcoal)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:var(--gold)}
.form-card{background:var(--warm-white);border:1px solid var(--rule);padding:clamp(1.8rem,4vw,2.6rem);max-width:520px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.row2{grid-template-columns:1fr}}

/* ---- footer ---- */
.footer{background:var(--dark-section);color:var(--warm-white);padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,5vw,4rem) 2rem}
.footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer .brand{color:var(--warm-white)}
.footer p{color:rgba(250,246,240,.62);font-size:0.96rem;margin-top:1rem;max-width:22rem}
.footer h4{font-size:0.96rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer a{display:block;color:rgba(250,246,240,.78);text-decoration:none;font-size:0.96rem;padding:.3rem 0;transition:color .2s}
.footer a:hover{color:#fff}
.footer .fineprint{grid-column:1/-1;border-top:1px solid rgba(250,246,240,.14);margin-top:1.5rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:0.96rem;color:rgba(250,246,240,.5)}
@media(max-width:880px){.footer .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer .wrap{grid-template-columns:1fr}}

/* ---- misc ---- */
.divider{height:1px;background:var(--rule);border:0;margin:0}
.quote{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,3vw,2rem);line-height:1.4;color:var(--charcoal);max-width:46rem;margin:0 auto}
.testimonial{background:var(--warm-white);color:var(--charcoal);border:1px solid var(--rule);padding:2rem}
.testimonial p{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--charcoal);margin-bottom:1rem}
.testimonial .who{font-size:0.96rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}

/* ---- split: 2-col layout that collapses on mobile (page bodies: chart, contact, about) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;max-width:980px;margin:0 auto}
.split.middle{align-items:center}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:2rem}}

/* ---- motion: scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---- hero dust canvas ---- */

/* ---- founder section ---- */
.founder{background:var(--warm-white)}
.founder .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;max-width:1040px}
.founder img{width:100%;border:1px solid var(--rule)}
.founder h2{font-size:clamp(2rem,3.8vw,2.8rem);margin:.9rem 0 1.2rem}
.founder h2 em{font-style:italic;color:var(--gold-deep)}
.founder .story p{color:var(--ink-soft);margin-bottom:1rem}
.founder .sig{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--charcoal);margin-top:.4rem}
@media(max-width:760px){.founder .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}.founder .story p{text-align:left}}

/* ---- mothers band ---- */
.mothers{background:var(--dark-section);color:var(--warm-white)}
.mothers .eyebrow{color:var(--gold)}
.mothers h2{color:#fff;font-size:clamp(2rem,4vw,2.9rem);margin:1rem 0 1.2rem}
.mothers h2 em{font-style:italic;color:#F0DEBE}
.mothers p{color:rgba(250,246,240,.8)}
.mothers .m-card{background:rgba(250,246,240,.05);border:1px solid rgba(250,246,240,.16);padding:1.6rem}
.mothers .m-card h3{color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.mothers .m-card p{color:rgba(250,246,240,.72);font-size:0.96rem}

/* ---- balanced auto grids (no orphan cards) ---- */
.grid-auto{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));justify-content:center}
.grid-5{display:grid;gap:1.6rem;grid-template-columns:repeat(3,1fr);max-width:880px;margin:0 auto}
.grid-5 > *:nth-child(4),.grid-5 > *:nth-child(5){grid-column:span 1}
/* 5-item: 3 on top, 2 centered below via a nested approach */
.grid-5{grid-template-columns:repeat(6,1fr)}
.grid-5 > *{grid-column:span 2}
.grid-5 > *:nth-child(4){grid-column:2/4}
.grid-5 > *:nth-child(5){grid-column:4/6}
@media(max-width:760px){.grid-5{grid-template-columns:1fr}.grid-5>*{grid-column:1/-1!important}}

/* ---- even-stack guarantee: odd last card centers across 2 cols, never orphan-left ---- */
@media(max-width:980px) and (min-width:621px){
  .g3 > *:last-child:nth-child(odd){grid-column:1 / -1;max-width:50%;justify-self:center}
  .g4 > *:nth-last-child(1):nth-child(odd){grid-column:1 / -1;max-width:50%;justify-self:center}
  .grid-auto > *:last-child:nth-child(odd){justify-self:center}
}


/* Readability pass: desktop navigation keeps its compact brand treatment,
   while ordinary content is never rendered as decorative micro-copy. */
p, li, input, textarea, select, summary,
.card p, .offer .hook, .offer li, .faq-item p, .footer p, .footer a,
.mothers .m-card p {font-size:max(1rem,16px)}
.btn, .btn-sm {font-size:1rem}
.eyebrow, .card .more, .offer .kind, .offer .soon-tag,
.footer h4, .testimonial .who {font-size:0.96rem}
.footer .fineprint {font-size:0.96rem}

/* Bodygraph display mode control */
.bodygraph-heading-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.8rem 0 1rem}
.bodygraph-heading-row h2{margin:0}
.bodygraph-view-toggle{appearance:none;border:1px solid var(--charcoal);background:transparent;color:var(--charcoal);font-family:var(--body);font-size:16px;font-weight:600;line-height:1.2;padding:.72rem 1rem;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.bodygraph-view-toggle:hover,.bodygraph-view-toggle[aria-pressed="true"]{background:var(--charcoal);color:var(--warm-white)}
@media(max-width:620px){.bodygraph-heading-row{align-items:flex-start;flex-direction:column}.bodygraph-view-toggle{width:100%}}


/* Mobile typography and touch audit */
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:16px;line-height:1.6}
  .section{padding:3.5rem 1.25rem}
  .page-head{padding:3rem 1.25rem}
  .page-head h1{font-size:clamp(2.15rem,10vw,3rem);line-height:1.05}
  .page-head p,.lead{font-size:1.0625rem;line-height:1.6}

  /* Keep the original compact mobile menu; only the menu button gets a safe tap target. */
  .nav-toggle{min-width:44px;min-height:44px;padding:8px;line-height:1}
  .nav-links a,.nav-menu a{font-size:0.96rem;line-height:1.35;min-height:0;display:block}

  p,li,summary,button,input,textarea,select,label,
  .card p,.card .more,.offer .kind,.offer .hook,.offer li,.offer .soon-tag,
  .faq-item p,.footer p,.footer h4,.footer a,.testimonial .who,
  .field label,.article .meta,.figph,.relnav h4,.relnav .card .cat,
  .share,.calc-status,.form-error,.loc-item,.loc-loading,.loc-empty,
  figcaption,.email-tip{font-size:16px!important}
  .nav-links a,.nav-menu a{font-size:0.96rem!important}

  input:not([type=radio]):not([type=checkbox]),textarea,select{min-height:48px;padding:.9rem 1rem}
  input[type=radio],input[type=checkbox]{min-height:0;height:20px;width:20px;padding:0;flex:0 0 20px}
  textarea{min-height:140px}
  .btn,.btn-sm,.bodygraph-view-toggle{font-size:16px;min-height:48px;padding:.85rem 1.1rem;display:inline-flex;align-items:center;justify-content:center}
  .btn{white-space:normal}
  .card,.offer,.testimonial{padding:1.5rem 1.25rem}
  .card h3{font-size:1.35rem;line-height:1.2}
  .offer h3{font-size:1.25rem}
  .faq-item summary{min-height:52px;padding:1rem 2.2rem 1rem 0}
  .footer .fineprint{font-size:13px!important;line-height:1.5}
  .brand small{font-size:0.76rem}
}

@media (max-width:400px){
  .section{padding-left:1rem;padding-right:1rem}
  .page-head{padding-left:1rem;padding-right:1rem}
  .nav{padding-left:1rem;padding-right:1rem}
  .brand{font-size:1.2rem}
}

/* Bodygraph display and print-PDF controls */
.bodygraph-actions{display:flex;gap:.75rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.bodygraph-export-button,.bodygraph-pdf-download{appearance:none;border:1px solid var(--charcoal);background:var(--charcoal);color:var(--warm-white);font-family:var(--body);font-size:16px;font-weight:600;line-height:1.2;padding:.72rem 1rem;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .2s}
.bodygraph-export-button:hover,.bodygraph-pdf-download:hover{transform:translateY(-1px)}
.bodygraph-export-button:disabled,.bodygraph-pdf-download:disabled{opacity:.55;cursor:wait;transform:none}
.bodygraph-export-button[hidden],.bodygraph-pdf-download[hidden]{display:none!important}
.bodygraph-download-svg,.bodygraph-download-png{background:transparent;color:var(--charcoal)}
.bodygraph-download-svg:hover,.bodygraph-download-png:hover{background:var(--charcoal);color:var(--warm-white)}
@media(max-width:620px){.bodygraph-actions{width:100%;display:grid;grid-template-columns:1fr}.bodygraph-export-button,.bodygraph-pdf-download{width:100%;min-height:48px;display:inline-flex;align-items:center;justify-content:center}}

/* ============ PRO POLISH ============ */
/* card hover lift with gold top accent */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(44,40,36,.35)}
.card:hover::before{transform:scaleX(1)}
/* button press feedback */
.btn{transition:all .2s ease}
.btn-solid:active{transform:scale(.98)}
/* nav More dropdown smooth */
.nav-menu a{transition:background .18s,color .18s,padding-left .18s}
.nav-menu a:hover{padding-left:1.6rem}
/* number stat count-up target */
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,4vw,3.4rem);color:var(--gold-deep);line-height:1}

/* ============ WHAT IS HUMAN DESIGN - dark video section ============ */
.whatis-dark{background:var(--dark-section);color:var(--warm-white);padding:clamp(3rem,6vw,5rem) 0}
.whatis-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;max-width:var(--wrap);margin:0 auto;padding-inline:0;box-sizing:border-box}
.whatis-video{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(74,63,53,.55);aspect-ratio:16/11;background:#4A3F35}
.whatis-video img{width:100%;height:100%;object-fit:cover;display:block}
.whatis-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(44,40,36,.15);transition:background .25s}
.whatis-play:hover{background:rgba(44,40,36,.3)}
.whatis-play span{width:74px;height:74px;border-radius:50%;background:rgba(44,40,36,.72);display:flex;align-items:center;justify-content:center;transition:transform .25s;box-shadow:0 0 0 0 rgba(250,246,240,.4);animation:playPulse 2.6s ease-out infinite}
.whatis-play:hover span{transform:scale(1.08)}
.whatis-play svg{width:26px;height:26px;fill:var(--warm-white);margin-left:4px}
@keyframes playPulse{0%{box-shadow:0 0 0 0 rgba(250,246,240,.35)}70%{box-shadow:0 0 0 22px rgba(250,246,240,0)}100%{box-shadow:0 0 0 0 rgba(250,246,240,0)}}
.whatis-copy h2{color:var(--warm-white);font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:1.2rem}
.whatis-copy p{color:rgba(250,246,240,.82);margin-bottom:1.6rem;line-height:1.7}
.whatis-cta{display:flex;gap:1rem;flex-wrap:wrap}
.whatis-cta .btn{border:none}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;border:none!important}
.btn-gold:hover{filter:brightness(1.08)}
.btn-gold-ghost{background:transparent;color:var(--warm-white);border:1px solid rgba(250,246,240,.4)!important}
.btn-gold-ghost:hover{background:rgba(250,246,240,.12)}
@media(max-width:820px){.whatis-grid{grid-template-columns:1fr}.whatis-copy{text-align:center}.whatis-copy p{margin-left:auto;margin-right:auto}.whatis-cta{justify-content:center}}

/* ============ IMPRINT coming soon with pink book ============ */
.imprint-cs{background:linear-gradient(180deg,#F4EEE6 0%,#efe3d2 100%);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.imprint-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;width:100%;margin:0 auto}
.imprint-book{width:100%;max-width:none;border-radius:14px;box-shadow:0 40px 80px -30px rgba(120,60,70,.42);transition:transform .5s ease;display:block}
.imprint-book:hover{transform:translateY(-6px) scale(1.01)}
.imprint-cs h2{font-size:clamp(2rem,3.8vw,2.9rem);margin-bottom:.5rem;color:var(--charcoal)}
.imprint-cs h2 em{font-style:italic;color:#9c6a72}
@media(max-width:760px){.imprint-inner{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ============ APP SECTION ============ */
.app-sec{position:relative;overflow:hidden;background:linear-gradient(165deg,#FAF6F0 0%,#F1E7DA 55%,#EDE1D2 100%);color:var(--charcoal);padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.app-sec::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(175,125,116,.22),transparent 70%);top:-14%;right:-6%;filter:blur(50px);pointer-events:none}
.app-sec::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(226,213,194,.4),transparent 70%);bottom:-16%;left:-8%;filter:blur(56px);pointer-events:none}
.app-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4vw,3rem);align-items:center;max-width:var(--wrap);margin:0 auto;padding-inline:0;box-sizing:border-box;overflow:visible}
.app-copy .eyebrow{color:var(--gold);margin-bottom:1rem}
.app-copy h2{color:var--charcoal);font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.12;margin-bottom:.9rem}
.app-copy h2 em{font-style:normal;color:var(--gold)}
.app-lead{color:var(--ink-soft);line-height:1.7;margin-bottom:1.6rem}
.app-feats{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.85rem}
.app-feats li{display:flex;gap:.8rem;align-items:flex-start;color:var(--charcoal);font-size:.98rem;line-height:1.5}
.app-feats .tick{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:flex;align-items:center;justify-content:center;margin-top:.15rem}
.app-feats .tick svg{width:12px;height:12px;fill:#fff}
.app-badges{display:flex;gap:.9rem;flex-wrap:wrap}
.badge-btn{display:inline-flex;align-items:center;gap:.65rem;padding:.75rem 1.2rem;border-radius:10px;background:var(--charcoal);border:1px solid var(--charcoal);color:var(--warm-white);text-decoration:none;transition:transform .2s,background .2s,border-color .2s;min-width:0}
.badge-btn:hover{transform:translateY(-3px);background:var(--gold-deep);border-color:var(--gold-deep)}
.badge-btn svg{width:22px;height:22px;fill:currentColor;flex:0 0 22px}
.badge-btn .bl{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.badge-btn .bl small{font-size:0.96rem;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.badge-btn .bl strong{font-size:0.96rem;font-weight:600}
.badge-soon{position:relative}
.badge-soon::after{content:"Soon";position:absolute;top:-8px;right:-8px;background:var(--gold-deep);color:#fff;font-size:0.96rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:20px}
/* phones - realistic iOS chrome */
.app-phones{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(420px,46vw,560px);perspective:1400px;overflow:visible}
.phone{position:relative;width:clamp(200px,21vw,262px);border-radius:38px;background:linear-gradient(150deg,#5B4E42,#4A3F35 45%,#4A3F35);padding:8px;box-shadow:0 50px 90px -34px rgba(74,63,53,.7),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.phone-screen{position:relative;border-radius:31px;overflow:hidden;background:#F7F3EC;aspect-ratio:9/19.5;display:flex;flex-direction:column}
.phone-island{position:absolute;top:0;left:50%;transform:translateX(-50%);width:34%;height:19px;background:#4A3F35;border-radius:0 0 14px 14px;z-index:6}
.phone-a{transform:rotateY(9deg) rotate(-5deg) translateY(4px);z-index:3}
.phone-b{position:absolute;left:50%;margin-left:34px;transform:rotateY(-8deg) rotate(6deg) translate(0,-34px) scale(.93);z-index:1}
.app-phones:hover .phone-a{transform:rotateY(6deg) rotate(-3deg) translateY(-6px)}
.app-phones:hover .phone-b{transform:rotateY(-6deg) rotate(4deg) translate(6px,-42px) scale(.94)}
/* iOS status bar */
.ios-status{position:relative;display:flex;align-items:center;justify-content:space-between;padding:7px 16px 3px;font-size:0.96rem;font-weight:700;color:var(--charcoal);z-index:5}
.ios-time{letter-spacing:.01em}
.ios-icons{display:flex;align-items:center;gap:4px;color:var(--charcoal)}
.ios-icons svg{height:9px;width:auto;fill:currentColor}
.scr-dark .ios-status,.scr-dark .ios-icons{color:#fff}
/* app top bar */
.app-topbar{display:flex;align-items:center;gap:8px;padding:8px 13px 9px;border-bottom:1px solid rgba(44,40,36,.09)}
.app-avatar{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;font-size:0.96rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.app-title{flex:1;display:flex;flex-direction:column;line-height:1.15;min-width:0}
.app-title strong{font-family:var(--display);font-size:0.96rem;font-weight:600;color:var(--charcoal)}
.app-title small{font-size:0.96rem;color:var(--ink-soft);letter-spacing:.04em}
.app-gear{flex:0 0 15px}
.app-gear svg{width:15px;height:15px;fill:var(--ink-soft)}
.scr-dark .app-topbar{border-bottom-color:rgba(255,255,255,.12)}
.scr-dark .app-title strong{color:#fff}
.scr-dark .app-title small{color:rgba(255,255,255,.6)}
/* scrollable content */
.app-scroll{flex:1;overflow:hidden;padding:8px 9px 6px;display:flex;flex-direction:column;gap:7px}
.app-chart{width:100%;height:auto;border-radius:11px;display:block;background:#fff;border:1px solid rgba(44,40,36,.08)}
.app-chips{display:flex;gap:5px;padding-top:1px}
.chip{font-size:0.96rem;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:20px;background:rgba(44,40,36,.07);color:var(--ink-soft)}
.chip-on{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff}
/* dark today cards */
.t-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:8px 9px;display:flex;flex-direction:column;gap:2px}
.t-lab{font-size:0.96rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold);font-weight:700}
.t-val{font-size:0.96rem;color:#fff;font-weight:600}
.t-quote{font-family:var(--display);font-style:italic;font-size:0.96rem;line-height:1.5;color:rgba(255,255,255,.85);margin:2px 0 0}
.t-bar{display:block;height:4px;border-radius:6px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:5px}
.t-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep));border-radius:6px}
.t-hero{background:linear-gradient(135deg,rgba(175,125,116,.35),rgba(255,255,255,.06))}
.t-row2{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.t-row2 .t-val{font-size:0.96rem;text-align:right}
/* tab bar */
.app-tabs{display:flex;justify-content:space-around;align-items:center;padding:7px 4px 9px;border-top:1px solid rgba(44,40,36,.09);background:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(44,40,36,.4)}
.tab svg{width:15px;height:15px;fill:currentColor}
.tab small{font-size:0.96rem;font-weight:600;letter-spacing:.02em}
.tab.on{color:var(--gold-deep)}
.scr-dark .app-tabs{background:rgba(20,17,15,.72);border-top-color:rgba(255,255,255,.12)}
.scr-dark .tab{color:rgba(255,255,255,.42)}
.scr-dark .tab.on{color:var(--gold)}
/* dark screen bg */
.scr-dark{background:linear-gradient(175deg,#4A3F35 0%,#443a33 55%,#5a4a44 100%)}

@media(max-width:900px){
 .app-grid{grid-template-columns:1fr;gap:2.5rem}
 .app-copy{text-align:center}
 .app-lead{margin-left:auto;margin-right:auto}
 .app-feats li{text-align:left}
 .app-feats{max-width:24rem;margin-left:auto;margin-right:auto}
 .app-badges{justify-content:center}
 .app-phones{min-height:440px}
}

/* real app screenshot inside phone */
.phone-shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* ===== consistent wide sections ===== */
.section .wrap{max-width:var(--wrap);}
.section.center .wrap{max-width:var(--wrap);}
.section.optin .wrap{max-width:var(--wrap);}
.founder .wrap{max-width:var(--wrap);}
/* center sections keep centered TEXT but use the full wide container */
.section.center{text-align:center}
.section.center .wrap>*{margin-left:auto;margin-right:auto}

/* wide containers, but readable text line-length inside centered sections */
.section.center .wrap>p,.section.optin .wrap>p{max-width:60rem;margin-left:auto;margin-right:auto}
.section.optin .optin-form{max-width:34rem;margin-left:auto;margin-right:auto}

/* app mockup image */
.app-mockup{width:118%;max-width:none;margin-left:0;margin-right:-18%;height:auto;display:block;filter:drop-shadow(0 40px 70px rgba(44,40,36,.25));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.app-phones:hover .app-mockup{transform:translateY(-8px)}
.app-phones{min-height:0}


/* real app store badges */
.app-badges{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.store-badge{position:relative;display:inline-block;transition:transform .2s,filter .2s;line-height:0}
.store-badge img{height:52px;width:auto;display:block}
.store-badge:hover{transform:translateY(-3px);filter:brightness(1.06)}
.store-badge .soon-tag{position:absolute;top:-7px;right:-5px;background:var(--gold-deep);color:#fff;font-size:.55rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:20px;line-height:1.2;white-space:nowrap}
@media(max-width:480px){.store-badge img{height:44px}}

/* ============ RUNNING LINE (dark separator) ============ */
.run-line{background:var(--dark-section);overflow:hidden;white-space:nowrap;padding:1.1rem 0;position:relative;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.run-track{display:flex;width:max-content;white-space:nowrap;animation:runScroll 45s linear infinite;will-change:transform}
.run-track span{display:block;flex:0 0 auto;font-family:var(--display);font-size:clamp(1.05rem,1.7vw,1.45rem);font-weight:600;letter-spacing:.01em;color:var(--warm-white);padding:0}
@keyframes runScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.run-line:hover .run-track{animation-play-state:paused}

/* ============ MANIFESTOR MOM promo ============ */
.mm-promo{background:linear-gradient(165deg,#F6EFE4 0%,#EFE3D3 100%);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.mm-inner{display:grid;grid-template-columns:200px 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;width:100%}
.mm-book img{width:100%;max-width:200px;height:auto;display:block;border-radius:5px;box-shadow:0 18px 38px -18px rgba(44,40,36,.35);transition:transform .4s ease}
.mm-book:hover img{transform:translateY(-8px) rotate(-1deg)}
.mm-copy h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:.6rem 0 .8rem;color:var(--charcoal)}
.mm-copy h2 em{font-style:italic;color:var(--gold-deep)}
.mm-copy .lead{margin-bottom:1.4rem}
.mm-points{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.7rem}
.mm-points li{position:relative;padding-left:1.6rem;color:var(--ink-soft);line-height:1.5}
.mm-points li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.mm-cta{display:flex;gap:1rem;flex-wrap:wrap}
@media(max-width:820px){
 .mm-inner{grid-template-columns:1fr;justify-items:center;text-align:center}
 .mm-book{max-width:280px}
 .mm-copy .lead,.mm-points{margin-left:auto;margin-right:auto;text-align:left}
 .mm-cta{justify-content:center}
}

/* ---- testimonials: light band ---- */
.testimonials-light{background:linear-gradient(170deg,#FAF6F0 0%,#F3EADF 100%);color:var(--charcoal);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.testimonials-light .eyebrow{color:var(--gold-deep)}
.testimonials-light h2{color:var(--charcoal)}
.testimonials-light .testimonial{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:1.6rem 1.5rem;box-shadow:0 18px 40px -24px rgba(44,40,36,.25);transition:transform .25s,box-shadow .25s}
.testimonials-light .testimonial:hover{transform:translateY(-5px);box-shadow:0 26px 50px -24px rgba(44,40,36,.3)}
.testimonials-light .testimonial p{color:var(--charcoal);margin-bottom:1rem}
.testimonials-light .testimonial .who{color:var(--gold-deep);font-weight:600}

/* keep content off the screen edge on narrow viewports */
@media(max-width:1340px){
  .wrap,.hero-wrap,.whatis-grid,.app-grid{padding-inline:clamp(1.25rem,4vw,3rem)!important;box-sizing:border-box}
}

/* ============ MOBILE FIXES ============ */
@media(max-width:920px){
  /* app mockup was overflowing the screen */
  .app-mockup{width:100%!important;max-width:100%!important;margin:0!important}
  .app-phones{min-height:0;overflow:hidden}
  .app-grid{grid-template-columns:1fr!important;gap:1.5rem}
  .app-copy{text-align:left}
}
@media(max-width:700px){
  /* nav hamburger was pushing past the edge */
  .nav{padding-left:1rem;padding-right:1rem}
  .nav-toggle{margin-right:0}
  /* stop overflow WITHOUT breaking sticky nav (overflow-x on html/body kills sticky) */
  body{max-width:100%}
  /* tighten section padding on phones */
  .section{padding:2.5rem 0}
  /* stack all 2-col grids */
  .whatis-grid,.mm-inner,.imprint-inner{grid-template-columns:1fr!important;gap:1.5rem}
  .mm-book{max-width:160px;margin:0 auto}
  .mm-inner{justify-items:center;text-align:center}
  .mm-copy .lead,.mm-points{text-align:left}
  .mm-cta{justify-content:center}
  .imprint-inner{justify-items:center;text-align:center}
  .imprint-book{max-width:100%}
  /* readable text, no giant headings */
  .whatis-copy h2,.mm-copy h2{font-size:clamp(1.5rem,6vw,1.9rem)}
  /* running line smaller on phones */
  .run-track span{font-size:1rem}
}

/* mobile nav: brand + hamburger must fit */
@media(max-width:700px){
  .nav{padding:.9rem 1rem;gap:.5rem}
  .brand{font-size:1.05rem;min-width:0;overflow:hidden}
  .brand small{font-size:.6rem;letter-spacing:.04em;white-space:normal;line-height:1.3}
  .nav-toggle{flex:0 0 auto;font-size:1.5rem;padding:.2rem .4rem;background:none;border:none;color:var(--charcoal);cursor:pointer}
  .fineprint{flex-wrap:wrap;text-align:center}
  .fineprint span{white-space:normal}
}
@media(max-width:400px){
  .brand{font-size:.95rem}
  .brand small{font-size:.55rem}
}

/* nav CTA: Become a Reader (coming soon, not clickable) */
.cta-soon{position:relative;cursor:default;user-select:none}
.cta-soon-pop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);
  background:var(--charcoal);color:var(--warm-white);
  font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:none;
  white-space:nowrap;padding:7px 13px;border-radius:8px;
  box-shadow:0 12px 26px -10px rgba(44,40,36,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;z-index:100;
}
.cta-soon-pop::before{
  content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:var(--charcoal);
}
.cta-soon-pop.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* prevent horizontal scroll without breaking position:sticky */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100vw}
/* make sure nav stays sticky everywhere */
.nav{position:sticky!important;top:0!important;z-index:60}

/* ============ MOBILE HERO + FORM (rebuilt) ============ */
@media(max-width:700px){
  /* --- HERO: give it presence, not just a form --- */
  .hero{
    padding:1.5rem 0 2rem;
    background:
      radial-gradient(120% 80% at 15% 0%,rgba(201,168,124,.20),transparent 60%),
      radial-gradient(90% 70% at 95% 20%,rgba(221,187,146,.22),transparent 60%),
      linear-gradient(180deg,#FDFAF5 0%,#F6EFE4 100%);
  }
  .hero-copy{text-align:left}
  .hero h1{font-size:clamp(28px,7.6vw,34px);line-height:1.15;margin-bottom:.45rem;white-space:nowrap}
  .hero-eyebrow-m{
    display:block;font-family:var(--body);font-size:.7rem;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.6rem;
  }
  .hero-sub-m{
    display:block;font-family:var(--body);font-size:.98rem;color:var(--ink-soft);
    line-height:1.5;margin:0 0 1.1rem;
  }
  /* trust strip so the hero says something */
  .hero-trust{
    display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.2rem;
  }
  .hero-trust span{
    display:inline-flex;align-items:center;gap:.35rem;
    font-size:.72rem;font-weight:600;color:var(--charcoal);
    background:rgba(255,255,255,.75);border:1px solid var(--rule);
    padding:.35rem .6rem;border-radius:20px;white-space:nowrap;
  }
  .hero-trust svg{width:12px;height:12px;fill:var(--gold-deep);flex:0 0 12px}

  /* --- FORM: compact, not a mile long --- */
  .hero-form{padding:1.1rem!important;border-radius:12px;max-width:100%}
  .hero-form h3{font-size:1.05rem;margin-bottom:.15rem}
  .hero-form .form-intro{font-size:.85rem;margin-bottom:.9rem}
  .hero-form .field{margin-bottom:.65rem!important}
  .hero-form .field label{
    font-size:.68rem!important;letter-spacing:.06em!important;margin-bottom:.25rem!important;
    text-transform:uppercase;font-weight:700;color:var(--ink-soft);
  }
  .hero-form input{
    padding:.6rem .7rem!important;font-size:16px!important;
    border-radius:8px;
  }
  /* put name+email and date+time side by side to halve the height */
  .hero-form .field-row{grid-template-columns:1fr 1fr!important;gap:.55rem!important}
  .hero-form .btn-solid{padding:.85rem 1rem;margin-top:.5rem;font-size:.82rem;letter-spacing:.06em}
  /* date/time inputs render blank on iOS - force visible */
  .hero-form input[type="date"],.hero-form input[type="time"]{
    -webkit-appearance:none;appearance:none;
    min-height:42px;color:var(--charcoal);background:#fff;
  }
  .hero-form input[type="date"]::-webkit-date-and-time-value,
  .hero-form input[type="time"]::-webkit-date-and-time-value{text-align:left}
  .hero-form input:invalid{color:var(--ink-soft)}
}

/* mobile-only hero bits: hidden on desktop */
.hero-eyebrow-m,.hero-sub-m,.hero-trust{display:none}
@media(max-width:700px){
  .hero-eyebrow-m{display:block}
  .hero-sub-m{display:block}
  .hero-trust{display:flex}
}

/* ============ MOBILE FIXES (round 2) ============ */
/* app mockup: no black box, transparent, contained */
.app-mockup{background:transparent!important;object-fit:contain}
@media(max-width:920px){
  .app-mockup{width:100%!important;max-width:420px!important;margin:0 auto!important;display:block}
  .app-phones{background:transparent;overflow:visible}
}
/* whatis buttons: equal size, side by side */
.whatis-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.whatis-cta .btn{flex:1 1 0;min-width:150px;text-align:center;justify-content:center;padding:.95rem 1rem}
@media(max-width:700px){
  .whatis-cta{flex-direction:row;gap:.6rem}
  .whatis-cta .btn{flex:1 1 0;min-width:0;font-size:.75rem;padding:.9rem .5rem;letter-spacing:.04em}
}
/* MOBILE: white inputs, left-aligned buttons in optin/imprint forms */
@media(max-width:700px){
  .optin-form input,.imprint-cs input,.optin input[type="email"]{
    background:#fff!important;color:var(--charcoal)!important;border:1px solid var(--rule)!important;
  }
  .optin-form input::placeholder{color:var(--ink-soft)!important;opacity:1}
  .optin-form{flex-direction:column;align-items:stretch;max-width:100%}
  .optin-form .btn-solid{width:100%;margin:0}
  .section.center,.section.optin{text-align:left}
  .section.center .wrap>*,.section.optin .wrap>*{margin-left:0;margin-right:0}
  .optin .eyebrow,.optin h2,.optin p{text-align:left}
}

/* ============ LANGUAGE SWITCHER ============ */
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-left:.9rem;background:rgba(255,255,255,.6);border:1px solid var(--rule);border-radius:20px;padding:2px;flex:0 0 auto}
.lang-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  background:none;border:none;cursor:pointer;
  padding:.28rem .55rem;border-radius:16px;
  font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink-soft);transition:background .18s,color .18s;line-height:1;
}
.lang-btn .flag{font-size:.95rem;line-height:1}
.lang-btn:hover{color:var(--charcoal)}
.lang-btn.on{background:var(--charcoal);color:var(--warm-white)}
@media(max-width:700px){
  .lang-switch{margin-left:auto;margin-right:.5rem;order:2}
  .lang-btn{padding:.25rem .45rem;font-size:.66rem}
  .lang-btn .lbl{display:none}
  .lang-btn .flag{font-size:1.05rem}
}

/* ============ MOBILE: cleaner nav ============ */
@media(max-width:700px){
  /* logo alone is enough on a phone - drop the tagline */
  .brand small{display:none}
  .brand{font-size:1.1rem;line-height:1.2}
  .nav{padding:.85rem 1rem;align-items:center}
}
/* trust pills: ONE ring only (inner span is just an i18n wrapper) */
.hero-trust>span{background:#fff;border:1px solid var(--rule);box-shadow:none}
.hero-trust>span>span{background:none!important;border:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;display:inline;font:inherit;color:inherit}
.hero-trust>span>svg{background:none;border:none;padding:0}

/* hero quote: breathing room between headline and form */
.hero-quote{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--ink-soft);
  margin:.9rem 0 1.6rem;
  line-height:1.5;
  max-width:30rem;
  opacity:.9;
}
@media(max-width:700px){
  .hero-quote{font-size:1rem;margin:.6rem 0 1.1rem}
}
/* form labels must never wrap to 2 lines */
.hero-form .field label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* tables must not break mobile layout */
@media(max-width:700px){
  table,.tbl{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table th,table td,.tbl th,.tbl td{white-space:nowrap}
  caption{white-space:normal;text-align:left}
}

/* hero quote: breathing room between headline and form */
.hero-quote{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1rem,1.35vw,1.18rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:34rem;
  margin:0 0 1.6rem;
  padding-left:1rem;
  border-left:2px solid var(--gold);
}
@media(max-width:700px){
  .hero-quote{font-size:1rem;margin:0 0 1.2rem;padding-left:.8rem}
}

/* ============ FORM LABELS: smaller than the input (basic hierarchy) ============ */
.hero-form .field label,
.optin-form label,
form label{
  font-size:.72rem!important;
  font-weight:700!important;
  letter-spacing:.09em!important;
  text-transform:uppercase;
  color:var(--ink-soft)!important;
  margin-bottom:.4rem!important;
  display:block;
  line-height:1.3;
}
/* input text stays comfortable and larger than its label */
.hero-form input{font-size:1rem!important}

/* ============ LOGO: room to breathe ============ */
.brand{
  font-size:1.35rem;
  line-height:1.15;
  display:block;
  padding:.15rem 0;
}
.brand small{
  font-size:.68rem;
  letter-spacing:.14em;
  margin-top:.35rem;
  line-height:1.4;
  opacity:.85;
  display:block;
}
@media(max-width:700px){
  .brand{font-size:1.15rem;line-height:1.2}
  .brand small{display:none}
}

/* ============ NO PURE BLACK ANYWHERE ============ */
*,*::before,*::after{
  /* any element that would inherit pure black gets warm brown instead */
}
body,html{color:var(--charcoal)}
/* browser defaults that sneak in black */
h1,h2,h3,h4,h5,h6,p,li,td,th,dt,dd,blockquote,figcaption,label,legend,caption{color:inherit}
input,textarea,select,button{color:var(--charcoal)}
hr{border-color:var(--rule)}

/* labels stay smaller than inputs at EVERY breakpoint */
@media(max-width:920px){
  .field label,.hero-form .field label,form label{
    font-size:.72rem!important;
    font-weight:700!important;
    letter-spacing:.09em!important;
  }
}

/* dual-currency price: EUR sits quietly under the USD */
.price-eur{
  display:block;
  font-size:.72em;
  min-font-size:12px;
  font-weight:500;
  color:var(--ink-soft);
  letter-spacing:.01em;
  margin-top:.1em;
  line-height:1.2;
}
/* in the imprint plan rows, keep it inline and small */
.pr .price-eur{
  display:inline-block;
  font-size:.7em;
  margin-top:0;
  margin-left:.35em;
  opacity:.75;
}

/* ============================================================
   RESPONSIVE NAV STRATEGY
   1440+   full nav, comfortable spacing
   1200-1439  tighter gaps, smaller type
   1024-1199  drop to burger early (nav was wrapping at 1100)
   <1024   burger only
   ============================================================ */

/* --- lighter weight everywhere: the nav was too bold --- */
.nav-links a,
.nav-drop > button{
  font-weight:400;
  letter-spacing:.005em;
  color:var(--ink-soft);
}
.nav-links a:hover,
.nav-drop > button:hover{ color:var(--charcoal); }
.nav-links a.active{ color:var(--charcoal); font-weight:500; }

/* the CTA keeps a little more presence, but not shouty */
.nav-links .cta,
.nav-links .cta-soon{
  font-weight:500;
  color:var(--gold-deep);
}

/* --- 1200-1439: tighten instead of wrapping --- */
@media(min-width:1200px) and (max-width:1439px){
  .nav-links{gap:1.35rem;font-size:.9rem}
  .nav{padding-left:1.5rem;padding-right:1.5rem}
  .brand{font-size:1.25rem}
  .lang-switch{margin-left:.6rem}
}

/* --- 1024-1199: nav was wrapping to 2 lines here. Go to burger. --- */
@media(max-width:1199px){
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--warm-white);
    border-bottom:1px solid var(--rule);
    box-shadow:0 18px 40px -24px rgba(74,63,53,.35);
    padding:.5rem 0;
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links > a,
  .nav-drop > button{
    padding:.85rem clamp(1.25rem,5vw,3rem);
    font-size:1rem;
    border-bottom:1px solid rgba(216,201,180,.5);
    text-align:left;
    width:100%;
    justify-content:flex-start;
  }
  .nav-links > a:last-child{border-bottom:none}
  .nav-toggle{display:inline-flex!important;align-items:center;justify-content:center}
  /* dropdown inside the burger menu: just indent, do not float */
  .nav-drop{width:100%}
  .nav-drop > button{display:flex}
  .nav-menu{
    position:static;
    display:none;
    box-shadow:none;
    border:none;
    background:rgba(216,201,180,.15);
    padding:0;
    min-width:0;
  }
  .nav-drop.open .nav-menu{display:block}
  .nav-menu a{
    padding:.7rem clamp(2rem,7vw,4rem);
    font-size:.95rem;
    border-bottom:1px solid rgba(216,201,180,.35);
  }
  .nav-links .cta,
  .nav-links .cta-soon{
    margin:.5rem clamp(1.25rem,5vw,3rem);
    padding:.75rem 1rem;
    border:1px solid var(--gold-deep);
    border-radius:6px;
    text-align:center;
    justify-content:center;
    width:auto;
  }
}

/* --- language switch: subtle, the flag already says which one --- */
.lang-switch{
  background:transparent;
  border:1px solid rgba(216,201,180,.7);
  padding:1px;
}
.lang-btn{
  color:var(--ink-soft);
  opacity:.45;
  font-weight:500;
  transition:opacity .18s, background .18s;
}
.lang-btn:hover{opacity:.8}
.lang-btn.on{
  background:rgba(216,201,180,.35);
  color:var(--charcoal);
  opacity:1;
  font-weight:600;
}

@media(max-width:700px){
  .price-eur{font-size:.95rem!important}
  .pr .price-eur{font-size:.85rem!important}
}

/* ============ LANGUAGE SWITCH: quiet, right-aligned ============ */
.lang-switch{
  margin-left:auto;          /* pushes it to the far right */
  background:transparent!important;
  border:none!important;
  padding:0!important;
  gap:.15rem;
  order:99;                  /* always last */
}
.lang-btn{
  background:none!important;
  border:none!important;
  padding:.3rem .35rem!important;
  border-radius:4px;
  opacity:.35;
  font-weight:400!important;
  font-size:.7rem!important;
  color:var(--ink-soft)!important;
  transition:opacity .18s;
}
.lang-btn .flag{font-size:1rem;line-height:1}
.lang-btn .lbl{display:none}      /* the flag says it - no EN/BG text needed */
.lang-btn:hover{opacity:.7}
.lang-btn.on{
  opacity:1;
  background:none!important;
  font-weight:400!important;
}
/* nav pushes the switcher right on desktop */
@media(min-width:1200px){
  .nav-links{margin-left:auto;margin-right:1rem}
  .lang-switch{margin-left:0}
}
@media(max-width:1199px){
  .lang-switch{margin-left:auto;margin-right:.75rem;order:1}
  .nav-toggle{order:2}
}

/* the sample-reading showcase sits on a LIGHT band so the black tablet pops */
.sample-light h2,
.sample-light h3{color:var(--charcoal)!important}
.sample-light p,
.sample-light .lead{color:var(--ink-soft)!important}
.sample-light .eyebrow{color:var(--gold-deep)!important}
.sample-light figcaption{color:var(--ink-soft)!important}

/* The hero decorations (ring, orbit, blobs) must position against the STAGE,
   not the outer wrap. Something was resetting the stage to static, which threw
   the circle 350px off-centre from the figure. */
.hero-stage{position:relative!important}

/* the form must always sit above the hero decorations */
.hero-form{position:relative;z-index:5}
.hero-copy{position:relative;z-index:4}

/* flags: readable, with a little breathing room */
.lang-btn .flag{font-size:1.15rem;line-height:1}
.lang-btn{padding:.35rem .45rem!important}
.lang-switch{gap:.3rem}