/* ==========================================================================
   Mastery pages
   Two page types share this sheet:

   1. The public sales pages (/ai-mastery, /social-media-mastery) run the
      normal dark Ripple brand and only need a VSL block and a few list
      treatments on top of style.css.
   2. The buyer-only pages (…-unlocked) run a light theme. Everything under
      body.lt re-points the tokens style.css already uses, so the shared
      furniture (buttons, wrap, eyebrow, sections) comes along without being
      rewritten. Only genuinely new components are declared from scratch.

   Load order matters: style.css first, this second.
   ========================================================================== */

/* ==========================================================================
   1. SALES PAGES (dark)
   ========================================================================== */

/* ---------- Sales hero ----------
   Taller than the standard .phero because the VSL sits inside it. The copy
   is centred so the video is the obvious next thing to look at. */
.mhero{
  position:relative; overflow:hidden; background:var(--black);
  padding:clamp(120px,15vw,180px) 0 clamp(56px,7vw,88px);
  border-bottom:1px solid var(--line);
}
.mhero__ring{
  position:absolute; right:-18vw; top:-12%;
  width:min(70vw,720px); max-width:none; opacity:.11; pointer-events:none;
  animation:spinY 90s linear infinite;
}
.mhero__tex{
  position:absolute; inset:0; pointer-events:none; opacity:.4;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(236,28,36,.22), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(236,28,36,.10), transparent 60%);
}
.mhero__in{position:relative; z-index:1; text-align:center}
.mhero .eyebrow--red{justify-content:center}
/* Eurostile Extended is wide, and these headlines are longer than the other
   page heroes, so the clamp minimum sits below .phero__h1's 2.05rem. It lands
   on the same floor as the homepage's four-line headline (.hero__h1--own),
   which keeps a phone at three lines instead of five. */
.mhero__h1{
  font-family:var(--display); text-transform:uppercase; line-height:.98;
  font-size:clamp(1.62rem,5.1vw,3.4rem); margin:18px auto 0; max-width:18ch;
}
/* AI Mastery is written to three fixed lines on desktop. Below the breakpoint
   the spans go back to inline and the headline wraps on its own. */
@media (min-width:761px){
  .mhero__h1--3{max-width:none}
  .mhero__h1--3 span{display:block}
}
.mhero__h1 em{font-style:normal; color:var(--red)}
.mhero__sub{
  margin:22px auto 0; max-width:52ch;
  font-size:clamp(1rem,1.4vw,1.18rem); color:rgba(255,255,255,.82);
}

/* ---------- VSL ----------
   A click-to-load facade. The YouTube iframe is only injected on click, so
   the page never ships a third-party player to someone who never presses
   play, and the poster is the client's own frame rather than YouTube's. */
.vsl{
  position:relative; display:block; width:min(940px,100%); margin:clamp(30px,4vw,52px) auto 0;
  padding:0; border:0; background:#0C0C0C; cursor:pointer;
  aspect-ratio:16/9; overflow:hidden;
  box-shadow:0 0 0 1px var(--line), 0 40px 90px -40px rgba(0,0,0,.9);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:box-shadow .35s ease, transform .35s ease;
}
.vsl:hover{transform:translateY(-4px); box-shadow:0 0 0 1px rgba(236,28,36,.55), 0 40px 90px -36px rgba(236,28,36,.35)}
.vsl img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease, opacity .4s ease}
.vsl:hover img{transform:scale(1.03); opacity:.9}
.vsl::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 40%,rgba(0,0,0,.66));
}
.vsl__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2;
  width:clamp(66px,7.5vw,96px); aspect-ratio:1; border-radius:50%; background:var(--red);
  display:grid; place-items:center; box-shadow:0 0 0 10px rgba(236,28,36,.18);
  transition:scale .3s ease, box-shadow .3s ease;
}
.vsl__play::before{
  content:""; width:0; height:0; margin-left:7px;
  border-block:14px solid transparent; border-left:23px solid #fff;
}
.vsl:hover .vsl__play{scale:1.08; box-shadow:0 0 0 16px rgba(236,28,36,.16)}
.vsl__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(16px,2vw,24px);
  font-size:.66rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:#fff;
}
/* once loaded the iframe fills the same box */
.vsl.is-live{cursor:default; transform:none}
.vsl.is-live:hover{transform:none}
.vsl iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3}

/* the line of reassurance under the video */
.vsl__note{
  margin:clamp(18px,2.2vw,26px) auto 0; text-align:center;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--grey);
}
.vsl__note b{color:var(--red); font-weight:700}

/* ---------- "No more guessing" offer band ----------
   The buy moment. Sits directly under the VSL. */
.offerband{
  position:relative; overflow:hidden; background:#0B0405;
  border-block:1px solid rgba(236,28,36,.34); padding:clamp(44px,6vw,78px) 0;
}
.offerband::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 130% at 50% 0%, rgba(236,28,36,.22), transparent 64%);
}
.offerband__in{position:relative; z-index:1; text-align:center}
.offerband__h{
  font-family:var(--display); text-transform:uppercase; line-height:1;
  font-size:clamp(1.6rem,4vw,2.9rem);
}
.offerband__p{margin:18px auto 0; max-width:44ch; color:var(--grey)}
.offerband__cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(26px,3vw,36px)}
.offerband__fine{
  margin-top:22px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#8A8A8A; font-weight:700;
}
/* the way back in for someone who already has a code. Quiet on purpose: it is
   for returning readers, not the people this band is trying to convert. */
.offerband__back{margin-top:14px; font-size:.8rem; color:#8A8A8A}
.offerband__back a{color:var(--red); font-weight:600; border-bottom:1px solid rgba(236,28,36,.4)}
.offerband__back a:hover{border-bottom-color:var(--red)}

/* ---------- This is not / This is ----------
   Two panels side by side. The left is deliberately quieter so the eye lands
   on what the product actually is. */
.contrast{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(16px,2vw,24px)}
.cpanel{
  background:var(--ink); border:1px solid var(--line); padding:clamp(26px,3.2vw,44px);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.cpanel--yes{background:#0C0405; border-color:rgba(236,28,36,.42)}
.cpanel__h{
  font-family:var(--display); text-transform:uppercase; font-size:clamp(1.05rem,1.9vw,1.4rem);
  margin-bottom:clamp(20px,2.4vw,28px);
}
.cpanel--yes .cpanel__h{color:var(--red)}
.cpanel ul{display:grid; gap:16px}
.cpanel li{position:relative; padding-left:34px; font-size:.96rem; line-height:1.55}
/* the "not" list: muted copy, a struck-through cross */
.cpanel--no li{color:#8A8A8A}
.cpanel--no li::before,.cpanel--no li::after{
  content:""; position:absolute; left:2px; top:.62em; width:15px; height:1.5px;
  background:#5A5A5A;
}
.cpanel--no li::before{transform:rotate(45deg)}
.cpanel--no li::after{transform:rotate(-45deg)}
/* the "is" list: full-strength copy, the brand's angular tick */
.cpanel--yes li{color:#E4E4E4}
.cpanel--yes li::before{
  content:""; position:absolute; left:0; top:.44em; width:14px; height:14px; background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
}

/* ---------- What's included ---------- */
.incl{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(14px,1.8vw,22px)}
.incl li{
  position:relative; background:var(--ink); border:1px solid var(--line);
  padding:clamp(26px,3vw,38px); transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.incl li:hover{border-color:rgba(236,28,36,.5); background:#141414; transform:translateY(-4px)}
.incl__no{
  display:block; font-family:var(--display); font-size:clamp(1.9rem,4vw,2.8rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--red); margin-bottom:18px;
}
.incl h3{
  font-family:var(--display); text-transform:uppercase; line-height:1.16;
  font-size:clamp(1rem,1.5vw,1.2rem); margin-bottom:12px;
}
.incl p{color:var(--grey); font-size:.94rem}
/* the bonus item wears the accent so the free call reads as a bonus */
.incl li.is-bonus{background:#0C0405; border-color:rgba(236,28,36,.42)}
.incl__tag{
  display:inline-block; margin-top:16px; padding:6px 12px; border:1px solid rgba(236,28,36,.55);
  color:var(--red); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
}

/* ---------- Completion support callout ---------- */
.support{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,60px);
  align-items:center; background:var(--ink); border:1px solid var(--line);
  padding:clamp(28px,3.6vw,56px); position:relative; overflow:hidden;
}
.support::after{
  content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px;
  background:var(--red); opacity:.09; transform:rotate(45deg); pointer-events:none;
}
.support__h{font-family:var(--display); text-transform:uppercase; line-height:1.04; font-size:clamp(1.4rem,3vw,2.2rem); margin-top:14px}
.support__body{position:relative; z-index:1}
.support__body p{color:var(--grey); max-width:54ch}
.support__body p + p{margin-top:16px}
@media (max-width:900px){ .support{grid-template-columns:1fr} }

/* ---------- Written testimonials ---------- */
.quotegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(14px,1.8vw,22px)}
.qcard{
  background:var(--ink); border:1px solid var(--line); padding:clamp(24px,2.8vw,36px);
  display:flex; flex-direction:column; gap:20px; transition:border-color .3s ease, background .3s ease;
}
.qcard:hover{border-color:rgba(236,28,36,.45); background:#141414}
.qcard blockquote{margin:0; color:#DCDCDC; font-size:.96rem; line-height:1.62; font-weight:300}
.qcard__who{display:flex; align-items:center; gap:14px; margin-top:auto}
/* clients with a logo get the logo, the rest get their initials */
.qcard__mark{
  flex:none; width:44px; height:44px; display:grid; place-items:center; overflow:hidden;
  background:#1A1A1A; border:1px solid var(--line);
  font-family:var(--display); font-size:.72rem; letter-spacing:.04em; color:var(--red);
}
.qcard__mark img{width:100%; height:100%; object-fit:contain}
.qcard__name{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:#fff}

/* ---------- Talk-first strip ----------
   For the visitor who isn't ready to buy off a video. */
.talkfirst{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,40px); background:var(--ink-2); border:1px solid var(--line);
  padding:clamp(24px,3vw,42px);
}
.talkfirst h3{font-family:var(--display); text-transform:uppercase; font-size:clamp(1.1rem,2.2vw,1.6rem); line-height:1.1}
.talkfirst p{color:var(--grey); margin-top:12px; max-width:46ch; font-size:.94rem}
.talkfirst .btn{flex:none}


/* ==========================================================================
   2. UNLOCKED PAGES (light)
   Scoped to body.lt. Re-points the tokens rather than restating components.
   ========================================================================== */
body.lt{
  --paper:#F6F5F3;
  --paper-2:#FFFFFF;
  --ink-t:#111111;      /* body text */
  --ink-soft:#5F5F5F;   /* secondary text */
  --line:rgba(0,0,0,.13);
  --grey:#5F5F5F;
  background:var(--paper); color:var(--ink-t);
}
body.lt ::selection{background:var(--red); color:#fff}
body.lt h1,body.lt h2,body.lt h3,body.lt h4,body.lt .navlbl{color:var(--ink-t)}

/* buttons: the ghost variant has to flip from white-on-dark to dark-on-light */
body.lt .btn--ghost{--fg:var(--ink-t); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28)}
body.lt .btn--ghost:hover{--bg:var(--ink-t); --fg:#fff; box-shadow:inset 0 0 0 1.5px var(--ink-t)}
body.lt .btn--black{--bg:var(--ink-t); --fg:#fff}
body.lt .btn--black:hover{--bg:#000}

/* ---------- Light header ----------
   Deliberately plain. This is a members' area, not a sales page, so it gets
   a logo, a home link and nothing else competing for attention. */
.lhead{
  position:sticky; top:0; z-index:100; background:rgba(246,245,243,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.lhead__in{
  width:min(var(--wrap),100% - var(--pad)*2); margin-inline:auto;
  display:flex; align-items:center; gap:20px; height:clamp(64px,7vw,80px);
}
/* The mark is drawn in white, black AND red, so it can't be recoloured with a
   filter without wrecking one of the three. It sits on a black chip instead,
   which keeps the artwork exactly as supplied and reads as deliberate. */
.lhead__logo{
  display:inline-grid; place-items:center; background:var(--black);
  padding:9px 16px;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.lhead__logo img{height:clamp(28px,3.2vw,36px); width:auto}
.lhead__tag{
  margin-left:auto; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--ink-soft);
}
.lhead__tag b{color:var(--red)}

/* ---------- Access gate ----------
   Front-end only. See mastery.js: this keeps an honest buyer's page private
   from casual sharing, it is not a security boundary. */
.gate{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  padding:var(--pad); background:var(--paper);
}
.gate[hidden]{display:none}
/* the inline unlock check at the top of <body> drops .is-locked before paint,
   so a returning buyer never sees the gate flash past */
body.lt:not(.is-locked) .gate{display:none}
.gate__card{
  width:min(440px,100%); background:var(--paper-2); border:1px solid var(--line);
  padding:clamp(30px,4vw,46px); text-align:center;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.4);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
/* same black chip as the header, see .lhead__logo for why */
.gate__mark{
  display:inline-grid; place-items:center; background:var(--black);
  padding:12px 20px; margin:0 auto 26px;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.gate__mark img{height:40px; width:auto}
.gate__h{font-family:var(--display); text-transform:uppercase; font-size:clamp(1.15rem,2.4vw,1.5rem); margin-bottom:14px}
.gate__p{color:var(--ink-soft); font-size:.92rem; margin-bottom:26px}
.gate__form{display:grid; gap:12px}
.gate__form input{
  width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink-t);
  font-family:var(--body); font-size:1rem; padding:16px 18px; border-radius:0; text-align:center;
  letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  transition:border-color .2s ease, background .2s ease;
}
.gate__form input::placeholder{letter-spacing:.14em; font-weight:400; color:#9A9A9A}
.gate__form input:focus{outline:none; border-color:var(--red); background:#fff}
.gate__form input:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.gate__err{min-height:1.2em; font-size:.8rem; color:var(--red); font-weight:600}
.gate__help{margin-top:22px; font-size:.8rem; color:var(--ink-soft)}
.gate__help a{color:var(--red); font-weight:600; border-bottom:1px solid rgba(236,28,36,.4)}
/* content stays hidden until the gate clears, so it never flashes on load */
body.lt.is-locked .lbody{display:none}

/* ---------- Unlocked hero ---------- */
.lhero{
  position:relative; overflow:hidden;
  padding:clamp(48px,7vw,88px) 0 clamp(30px,4vw,44px);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(236,28,36,.09), transparent 62%),
    var(--paper);
}
.lhero__in{text-align:center; position:relative; z-index:1}
.lhero .eyebrow{color:var(--ink-soft)}
.lhero .eyebrow--red{color:var(--red); justify-content:center}
.lhero__h1{
  font-family:var(--display); text-transform:uppercase; line-height:.98;
  font-size:clamp(2rem,5.6vw,3.9rem); margin:16px auto 0; max-width:16ch;
}
.lhero__sub{margin:20px auto 0; max-width:50ch; color:var(--ink-soft); font-size:clamp(.98rem,1.3vw,1.1rem)}

/* light section rhythm, tighter than the sales pages */
.lsec{padding:clamp(40px,5.5vw,76px) 0; position:relative}
.lsec--alt{background:var(--paper-2); border-block:1px solid var(--line)}
.lsec__head{max-width:44rem; margin-bottom:clamp(24px,3vw,38px)}
.lsec__head .h2{margin-top:14px; font-size:clamp(1.5rem,3.4vw,2.4rem)}
.lsec__head p{margin-top:14px; color:var(--ink-soft); max-width:56ch}
.lsec__head--center{margin-inline:auto; text-align:center}
.lsec__head--center .eyebrow--red{justify-content:center}

/* the VSL facade again, restyled for paper */
body.lt .vsl{
  background:#111; box-shadow:0 0 0 1px var(--line), 0 40px 80px -44px rgba(0,0,0,.5);
}
body.lt .vsl:hover{box-shadow:0 0 0 1px rgba(236,28,36,.5), 0 40px 80px -40px rgba(236,28,36,.3)}
body.lt .vsl__note{color:var(--ink-soft)}

/* ---------- PDF reader ----------
   The workbook, page by page, with the real file one click away. Page images
   are lazy so opening the page doesn't pull fifteen scans down the wire. */
.reader{
  background:var(--paper-2); border:1px solid var(--line);
  padding:clamp(18px,2.4vw,30px);
}
.reader__stage{
  position:relative; background:var(--paper); border:1px solid var(--line);
  display:grid; place-items:center; padding:clamp(12px,1.6vw,20px); min-height:min(74vh,760px);
}
.reader__stage img{
  max-height:min(70vh,720px); width:auto; max-width:100%;
  box-shadow:0 18px 44px -28px rgba(0,0,0,.55);
}
/* prev / next sit over the page on wide screens, under it on narrow ones */
.reader__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
  background:var(--ink-t); color:#fff; border:0; font-size:1.1rem; line-height:1;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:background .25s ease, transform .25s ease, opacity .25s ease;
}
.reader__arrow:hover:not(:disabled){background:var(--red); transform:scale(1.06)}
.reader__arrow:disabled{opacity:.24; cursor:default}
.reader__arrow--prev{left:clamp(6px,1.4vw,18px)}
.reader__arrow--next{right:clamp(6px,1.4vw,18px)}
.reader__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(14px,1.8vw,20px);
}
.reader__count{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);
}
.reader__count b{color:var(--red)}
/* page thumbnails: a quick way to jump rather than click through fifteen times */
.reader__thumbs{
  display:flex; gap:8px; overflow-x:auto; padding:14px 2px 4px; scroll-snap-type:x proximity;
}
.reader__thumbs::-webkit-scrollbar{height:6px}
.reader__thumbs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22); border-radius:6px}
.reader__thumb{
  flex:none; width:clamp(46px,5vw,60px); aspect-ratio:1/1.414; padding:0; cursor:pointer;
  border:1px solid var(--line); background:var(--paper); overflow:hidden; scroll-snap-align:start;
  transition:border-color .2s ease, transform .2s ease;
}
.reader__thumb img{width:100%; height:100%; object-fit:cover}
.reader__thumb:hover{transform:translateY(-2px); border-color:rgba(236,28,36,.5)}
.reader__thumb.is-on{border-color:var(--red); box-shadow:0 0 0 1px var(--red)}
@media (max-width:640px){
  .reader__stage{min-height:0; padding-bottom:70px}
  .reader__stage img{max-height:58vh}
  .reader__arrow{top:auto; bottom:12px; translate:0 0}
  .reader__arrow--prev{left:50%; margin-left:-56px}
  .reader__arrow--next{right:50%; margin-right:-56px}
}

/* ---------- Guidance copy ---------- */
.guide{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2vw,24px)}
.guide article{
  background:var(--paper-2); border:1px solid var(--line); padding:clamp(24px,2.8vw,36px);
  border-top:3px solid var(--red);
}
.guide h3{font-family:var(--display); text-transform:uppercase; font-size:clamp(1rem,1.6vw,1.24rem); margin-bottom:14px}
.guide p{color:var(--ink-soft); font-size:.95rem}
.guide p + p{margin-top:14px}

/* ---------- Next step band ---------- */
.lband{
  position:relative; overflow:hidden; background:var(--ink-t); color:#fff;
  padding:clamp(44px,6vw,80px) 0; text-align:center;
}
.lband::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 120% at 50% 0%, rgba(236,28,36,.30), transparent 62%);
}
.lband__in{position:relative; z-index:1}
.lband h2{
  font-family:var(--display); text-transform:uppercase; line-height:1;
  font-size:clamp(1.6rem,4.2vw,3rem); color:#fff;
}
.lband p{margin:20px auto 0; max-width:50ch; color:rgba(255,255,255,.76)}
.lband__cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(26px,3vw,36px)}
.lband .btn--ghost{--fg:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.lband .btn--ghost:hover{--bg:#fff; --fg:var(--ink-t); box-shadow:inset 0 0 0 1.5px #fff}
/* This band is always dark (red-on-black) even on the light unlocked pages,
   so re-assert white copy and a solid, readable white button over body.lt. */
body.lt .lband h2,body.lt .lband h3{color:#fff}
body.lt .lband p{color:rgba(255,255,255,.76)}
body.lt .lband .btn--ghost{--bg:#fff; --fg:var(--ink-t); box-shadow:inset 0 0 0 1.5px #fff}
body.lt .lband .btn--ghost:hover{--bg:rgba(255,255,255,.86); --fg:var(--ink-t); box-shadow:inset 0 0 0 1.5px #fff}

/* ---------- Sharing notice ---------- */
.notice{
  border:1px solid rgba(236,28,36,.34); background:rgba(236,28,36,.05);
  padding:clamp(20px,2.6vw,30px); display:flex; gap:18px; align-items:flex-start;
}
.notice__mark{
  flex:none; width:12px; height:12px; margin-top:.42em; background:var(--red);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.notice p{color:var(--ink-soft); font-size:.9rem; line-height:1.6}
.notice b{color:var(--ink-t)}

/* ---------- Light footer ---------- */
.lfoot{border-top:1px solid var(--line); padding:clamp(30px,4vw,48px) 0; background:var(--paper)}
.lfoot__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.lfoot__in a{color:var(--ink-soft); transition:color .2s}
.lfoot__in a:hover{color:var(--red)}
.lfoot__links{display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,28px)}
.lfoot__tag{color:var(--red); font-weight:700}

/* ---------- Shared responsive ---------- */
@media (max-width:760px){
  .talkfirst{flex-direction:column; align-items:flex-start}
  .talkfirst .btn{width:100%}
}