/* ------------------------------------------------------------------ */
/*  Hekate Sports — INDIE ZINE variant                                 */
/*  Riso print on cream: riso-purple + coral, charcoal ink.            */
/*  Bricolage Grotesque (display) · Courier Prime (zine body) ·        */
/*  Caveat (handwriting).                                              */
/* ------------------------------------------------------------------ */

:root{
  --paper:    #E9E9E3;   /* cold photocopy off-white (borrowed from punk) */
  --paper-2:  #D6D6CE;   /* dirtier photocopy grey */
  --ink:      #272320;   /* warm charcoal */
  --purple:   #6A4BC2;   /* riso purple (primary) */
  --purple-d: #4E3597;
  --coral:    #EF6A75;   /* riso coral (secondary) */
  --coral-d:  #D8505C;

  --disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'Courier Prime', ui-monospace, 'Courier New', monospace;
  --hand: 'Caveat', cursive;
  --maxw: 1120px;

  --sh: 4px 4px 0 rgba(39,35,32,.16);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--mono);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* faint riso grain */
  background-image:radial-gradient(circle at 1px 1px, rgba(39,35,32,.05) 1px, transparent 1.4px);
  background-size:6px 6px;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--coral);color:#fff;}

/* keyboard focus — strong ink ring on light, light ring on dark sections */
a:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:3px solid var(--ink);outline-offset:3px;border-radius:2px;
}
.cta a:focus-visible,.footer a:focus-visible{outline-color:#fff;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;}

/* ---- zine devices ---- */
.note{font-family:var(--hand);font-size:22px;color:var(--coral);transform:rotate(-3deg);display:inline-block;line-height:1.1;}
.note.p{color:var(--purple);}
/* highlighter swipe */
.hl{background:linear-gradient(transparent 6%, rgba(239,106,117,.52) 6%, rgba(239,106,117,.52) 92%, transparent 92%);padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.hl-p{background:linear-gradient(transparent 6%, rgba(106,75,194,.46) 6%, rgba(106,75,194,.46) 92%, transparent 92%);padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
/* hand-drawn cross-out through a word */
.strike{position:relative;display:inline-block;color:var(--purple);}
.strike::after{
  content:"";position:absolute;left:-3%;right:-3%;top:52%;height:.42em;transform:translateY(-50%);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4,13 C34,5 62,16 96,9 C128,3 156,16 196,8' fill='none' stroke='%23EF6A75' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.kick{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-d);}
.kick::before{content:"※ ";color:var(--coral);}

/* ---------------- CONTENTS BANNER ---------------- */
.banner{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:8px 12px;}
.banner b{color:var(--coral);font-weight:700;}

/* ---------------- NAV ---------------- */
nav{position:sticky;top:0;z-index:60;background:rgba(233,233,227,.85);backdrop-filter:blur(6px);border-bottom:2px solid var(--ink);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 30px;height:68px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.brand .mark{width:34px;height:34px;display:grid;place-items:center;background:var(--purple);border:2px solid var(--ink);border-radius:50%;transform:rotate(-4deg);box-shadow:var(--sh);}
.brand .mark span{width:7px;height:15px;background:linear-gradient(to top, #FBEAD0 0%, var(--coral) 45%, #C84A57 100%);border-radius:50% 50% 50% 50%/90% 90% 36% 36%;transform:rotate(5deg);transform-origin:50% 100%;}
@media(prefers-reduced-motion:no-preference){ nav .brand .mark span{animation:flicker 5.6s infinite;} }
@keyframes flicker{
  0%,100%{opacity:1;transform:rotate(5deg) skewX(0deg) scale(1);box-shadow:0 0 5px 1px rgba(239,106,117,.6);}
  12%{opacity:.82;transform:rotate(7deg) skewX(-7deg) scale(.94,1.05);box-shadow:0 0 3px 0 rgba(239,106,117,.35);}
  24%{opacity:1;transform:rotate(3deg) skewX(6deg) scale(.98,1.03);box-shadow:0 0 7px 2px rgba(239,106,117,.75);}
  36%{opacity:.66;transform:rotate(6deg) skewX(-3deg) scale(1,.96);}
  48%{opacity:1;transform:rotate(4deg) skewX(8deg) scale(.94,1.06);box-shadow:0 0 6px 1px rgba(239,106,117,.7);}
  60%{opacity:.88;transform:rotate(7deg) skewX(-2deg) scale(1,1);}
  72%{opacity:1;transform:rotate(3deg) skewX(5deg) scale(.97,1.04);box-shadow:0 0 8px 2px rgba(239,106,117,.8);}
  84%{opacity:.6;transform:rotate(6deg) skewX(-6deg) scale(1,.98);box-shadow:0 0 2px 0 rgba(239,106,117,.3);}
}
.brand b{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.01em;}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav-links a{font-family:var(--mono);font-size:15px;font-weight:700;}
.nav-links a:not(.btn):hover{color:var(--purple);text-decoration:underline wavy var(--coral);}

/* ---------------- BUTTONS ---------------- */
.btn{
  font-family:var(--mono);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em;
  padding:11px 20px;border:2px solid var(--ink);background:#3C362F;color:var(--paper);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:3px;
  box-shadow:var(--sh);transition:transform .1s, box-shadow .1s, background .15s;
}
.btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(39,35,32,.16);background:#4D463D;}
.btn-lg{font-size:19px;padding:14px 26px;}
.btn-sm{font-size:14px;padding:9px 16px;font-family:var(--mono);font-weight:700;}
.btn-purple{background:var(--purple);color:#fff;}
.btn-purple:hover{background:var(--purple-d);}

.link-hand{font-family:var(--hand);font-size:24px;color:var(--purple);border-bottom:2px solid var(--coral);transform:rotate(-1deg);display:inline-block;}
.link-hand:hover{color:var(--coral);}

/* ---------------- HERO ---------------- */
.hero{position:relative;padding:34px 0 54px;}
.hero-grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:44px;align-items:center;}
.hero h1{
  font-family:var(--disp);font-weight:800;font-size:clamp(48px,6.6vw,92px);line-height:.98;
  letter-spacing:-.02em;margin:4px 0 0;
  text-shadow:3px 3px 0 rgba(239,106,117,.35); /* riso misregistration */
}
.hero .deck{font-family:var(--mono);font-size:18px;line-height:1.55;max-width:42ch;margin:16px 0 10px;}
.hero .deck b{color:var(--purple-d);font-weight:700;}
.hero .deck.deck-em{font-size:22px;}
.hero .note-row{margin:0 0 26px;}
.hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.hero-foot{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap;}
.hero-foot span{font-family:var(--mono);font-weight:700;font-size:12px;border:2px solid var(--ink);padding:6px 11px;background:var(--paper-2);border-radius:3px;}
.hero-foot span:nth-child(2){transform:rotate(-1.5deg);background:#fff;}
.hero-foot span:nth-child(3){transform:rotate(1deg);}

/* taped photo (washi) */
.taped{position:relative;transform:rotate(1.8deg);}
.hero .taped{transform:rotate(1.8deg) translateY(-56px);}
.taped .shot{position:relative;border:6px solid #fff;background:#fff;box-shadow:var(--sh), 0 18px 30px -22px rgba(39,35,32,.5);}
.taped .shot img{width:100%;display:block;filter:saturate(.92);}
/* hero caption hugs the crisp right edge of the faded image */
.hero .taped .cap{text-align:right;}
/* right-image features (02, 04) — caption hugs the right like the hero */
.feat-grid:not(.flip) .taped .cap{text-align:right;}
.taped .cap{font-family:var(--hand);font-size:21px;margin-top:18px;transform:rotate(-1.5deg);color:var(--ink);}
.taped .cap b{color:var(--purple);}

.posthero{padding:34px 0 6px;}

/* ---------------- CONTENTS STRIP (quiet ticker) ---------------- */
.contents{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--paper-2);}
.contents-in{max-width:var(--maxw);margin:0 auto;padding:14px 30px;display:flex;gap:30px;flex-wrap:wrap;align-items:baseline;}
.contents-in .lead{font-family:var(--hand);font-size:28px;color:var(--purple);}
.contents-in span{font-family:var(--mono);font-size:16px;font-weight:700;}
.contents-in span b{color:var(--purple-d);}

/* ---------------- FEATURES ---------------- */
.feature{padding:80px 0;}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
/* give the media side more room where the screenshot has readable detail */
.feat-grid.media-wide{grid-template-columns:.82fr 1.18fr;}
.feat-grid.flip.media-wide{grid-template-columns:1.18fr .82fr;}
.feat-grid.flip .feat-copy{order:2;}
.feat-num{font-family:var(--disp);font-weight:800;font-size:46px;color:var(--coral-d);line-height:1;}
.feat-copy h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:1.22;margin:4px 0 0;letter-spacing:-.015em;}
.feat-copy p{font-family:var(--mono);font-size:17px;line-height:1.6;margin:20px 0 0;max-width:48ch;}
.feat-list{margin:24px 0 0;list-style:none;}
.feat-list li{position:relative;padding:11px 0 11px 26px;border-bottom:1.5px dashed rgba(39,35,32,.28);font-family:var(--mono);font-size:15.5px;}
.feat-list li::before{content:"→";position:absolute;left:0;top:11px;color:var(--purple);font-weight:700;}
.feat-list li em{font-style:normal;font-weight:700;color:var(--purple-d);}
.feat-grid.flip .taped{transform:rotate(-1.8deg);}

/* placeholder */
.shot.placeholder{border:3px dashed var(--ink);min-height:300px;display:grid;place-items:center;text-align:center;padding:26px;background:var(--paper-2);box-shadow:var(--sh);}
.shot.placeholder p{font-family:var(--hand);font-size:24px;color:var(--purple);max-width:16ch;}

/* ---------------- ROLES (contributors) ---------------- */
.roles{background:#fff;padding:84px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.roles-head{margin-bottom:40px;}
.roles-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(36px,5vw,68px);line-height:.95;margin:6px 0 12px;letter-spacing:-.02em;}
.roles-head h2 em{font-style:normal;color:var(--purple);}
.roles-head p{font-family:var(--mono);font-size:17px;line-height:1.6;max-width:50ch;color:#534D45;}
.role{display:grid;grid-template-columns:.32fr .68fr;gap:30px;padding:20px 0;border-bottom:1.5px dashed rgba(39,35,32,.28);align-items:baseline;}
.role:hover .rname{color:var(--coral);}
.role .rname{font-family:var(--disp);font-weight:800;font-size:26px;display:flex;gap:12px;align-items:baseline;transition:color .12s;}
.role .rname .rn{font-family:var(--hand);font-size:24px;color:var(--coral-d);}
.role p{font-family:var(--mono);font-size:16px;line-height:1.6;color:#534D45;max-width:56ch;}

/* ---------------- CTA ---------------- */
.cta{position:relative;background:var(--purple);color:var(--paper);padding:92px 0;overflow:hidden;border-bottom:2px solid var(--ink);
  background-image:radial-gradient(circle at 1px 1px, rgba(20,16,30,.12) 1px, transparent 1.5px);background-size:7px 7px;background-color:var(--purple);}
.cta h2{font-family:var(--disp);font-weight:800;font-size:clamp(40px,6vw,82px);line-height:.96;margin:12px 0 0;max-width:15ch;text-shadow:3px 3px 0 rgba(239,106,117,.5);}
.cta .kick{color:#E9DFFB;}.cta .kick::before{color:var(--coral);}
.cta p{font-family:var(--mono);font-size:16px;margin:22px 0 32px;max-width:42ch;color:#E5DCF6;}
.cta .link-hand{color:var(--paper);border-color:var(--coral);}
.cta .link-hand:hover{color:var(--coral);}

/* ---------------- LIGHTBOX ---------------- */
.taped .shot img{cursor:zoom-in;}
.taped .shot img:focus-visible{outline:3px solid var(--coral);outline-offset:4px;}
html.lb-open{overflow:hidden;}

.lightbox{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(20,16,30,.88);backdrop-filter:blur(4px);
  cursor:zoom-out;
}
.lightbox[hidden]{display:none;}
@media(prefers-reduced-motion:no-preference){
  .lightbox:not([hidden]){animation:lb-fade .16s ease-out;}
}
@keyframes lb-fade{from{opacity:0;}to{opacity:1;}}
.lightbox-img{
  max-width:min(1400px,94vw);max-height:92vh;width:auto;height:auto;
  border:6px solid #fff;background:#fff;cursor:default;
  box-shadow:0 26px 70px -22px rgba(0,0,0,.75);
}
.lightbox-close{
  position:absolute;top:14px;right:20px;
  font-family:var(--disp);font-weight:700;font-size:34px;line-height:1;
  color:var(--paper);background:none;border:none;cursor:pointer;padding:4px 12px;
}
.lightbox-close:hover{color:var(--coral);}
.lightbox-close:focus-visible{outline:3px solid var(--coral);outline-offset:2px;}

/* ---------------- FOOTER ---------------- */
.footer{background:var(--ink);color:#A89F90;padding:44px 0;}
.footer-in{max-width:var(--maxw);margin:0 auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.footer .brand b{color:var(--paper);}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;}
.footer-links a{font-family:var(--mono);font-size:12px;font-weight:700;color:#B7AE9E;}
.footer-links a:hover{color:var(--coral);}
.footer .copy{font-family:var(--mono);font-size:11px;color:#A89F90;}

/* ================= SHARED MARKETING PAGES (pricing · legal · forms) ================= */
.page-hero{padding:60px 0 6px;text-align:left;}
.page-hero .kick{display:inline-block;margin-bottom:14px;}
.page-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5.2vw,66px);line-height:1.04;letter-spacing:-.02em;max-width:18ch;}
.page-hero .lede{font-family:var(--mono);font-size:17px;line-height:1.6;max-width:58ch;margin:18px 0 0;color:#534D45;}

.mkt-section{padding:56px 0;}
.mkt-section.tight{padding-top:8px;}
.section-head{max-width:var(--maxw);margin:0 auto 34px;padding:0 30px;}
.section-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4vw,50px);line-height:1.06;letter-spacing:-.02em;}
.section-head p{font-family:var(--mono);font-size:16px;line-height:1.6;max-width:56ch;margin:14px 0 0;color:#534D45;}

/* pricing cards */
.pricing-grid{max-width:var(--maxw);margin:0 auto;padding:0 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.pricing-card{position:relative;background:#fff;border:2px solid var(--ink);border-radius:4px;box-shadow:var(--sh);padding:30px 26px;display:flex;flex-direction:column;gap:16px;}
.pricing-card.featured{border-color:var(--purple);box-shadow:6px 6px 0 rgba(106,75,194,.28);}
.pricing-flag{position:absolute;top:-14px;left:22px;background:var(--coral);color:var(--ink);border:2px solid var(--ink);font-family:var(--mono);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;transform:rotate(-2deg);}
.pricing-amount{display:flex;align-items:baseline;gap:8px;margin:6px 0 4px;}
.pricing-amount .amount{font-family:var(--disp);font-weight:800;font-size:46px;line-height:1;}
.pricing-amount .unit{font-family:var(--mono);font-size:13px;color:#6B655C;}
.pricing-sub{font-family:var(--mono);font-size:14px;line-height:1.5;color:#534D45;}
.pricing-list{list-style:none;display:flex;flex-direction:column;gap:11px;}
.pricing-list li{display:flex;gap:10px;font-family:var(--mono);font-size:14px;line-height:1.45;align-items:flex-start;}
.pricing-list li svg{flex:none;margin-top:2px;color:var(--purple);}
.pricing-list li.includes{font-weight:700;color:var(--purple-d);border-bottom:1.5px dashed rgba(39,35,32,.28);padding-bottom:12px;}
.pricing-cta{margin-top:auto;justify-content:center;width:100%;}
.page-hero + .pricing-grid{margin-top:42px;}

/* volume tiers */
.volume{max-width:var(--maxw);margin:0 auto;padding:0 30px;display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;}
.volume-copy h3{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.06;margin:10px 0 12px;letter-spacing:-.015em;}
.volume-copy p{font-family:var(--mono);font-size:15px;line-height:1.6;color:#534D45;max-width:46ch;}
.volume-tiers{display:flex;flex-direction:column;gap:12px;}
.volume-tier{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--ink);border-radius:3px;background:var(--paper-2);padding:14px 18px;box-shadow:var(--sh);}
.volume-tier.highlight{background:#fff;border-color:var(--purple);}
.volume-count{font-family:var(--mono);font-weight:700;font-size:15px;}
.volume-price{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--purple);}

/* faq */
.faq-grid{max-width:var(--maxw);margin:0 auto;padding:0 30px;display:grid;grid-template-columns:1fr 1fr;gap:0 44px;}
.faq{padding:18px 0;border-bottom:1.5px dashed rgba(39,35,32,.28);}
.faq h3{font-family:var(--disp);font-weight:800;font-size:19px;margin-bottom:8px;}
.faq p{font-family:var(--mono);font-size:14px;line-height:1.6;color:#534D45;}
.faq a{color:var(--purple);border-bottom:2px solid var(--coral);}

/* legal / doc prose */
.doc{max-width:760px;margin:0 auto;padding:60px 30px 84px;}
.doc h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-.02em;}
.doc .subtitle{font-family:var(--mono);font-size:17px;line-height:1.55;color:#534D45;margin:16px 0 8px;}
.doc .updated{display:inline-block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--purple-d);}
.doc h2{font-family:var(--disp);font-weight:800;font-size:27px;margin:44px 0 12px;letter-spacing:-.01em;}
.doc h3{font-family:var(--disp);font-weight:700;font-size:18px;margin:26px 0 8px;color:var(--purple-d);}
.doc p{font-family:var(--mono);font-size:15px;line-height:1.7;margin:12px 0;color:var(--ink);}
.doc ul{list-style:none;margin:12px 0;display:flex;flex-direction:column;gap:9px;}
.doc li{position:relative;padding-left:24px;font-family:var(--mono);font-size:15px;line-height:1.6;}
.doc li::before{content:"→";position:absolute;left:0;color:var(--purple);font-weight:700;}
.doc a{color:var(--purple);border-bottom:2px solid var(--coral);}
.doc strong{color:var(--purple-d);font-weight:700;}

/* forms (data deletion) */
.info-box{border:2px solid var(--ink);border-radius:4px;background:var(--paper-2);box-shadow:var(--sh);padding:22px 24px;margin:24px 0;}
.info-box h2{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 12px;}
.info-box h2 svg{color:var(--purple);flex:none;}
.info-box ul{margin:0;}
.form-card{border:2px solid var(--ink);border-radius:4px;background:#fff;box-shadow:var(--sh);padding:26px 24px;margin:30px 0 0;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-family:var(--mono);font-weight:700;font-size:14px;margin-bottom:7px;}
.form-group .hint{font-family:var(--mono);font-size:12px;color:#6B655C;margin:0 0 7px;}
.form-group .opt{color:#6B655C;font-weight:500;}
.form-group input{width:100%;font-family:var(--mono);font-size:15px;padding:11px 13px;border:2px solid var(--ink);border-radius:3px;background:var(--paper);}
.form-group input:focus-visible{outline:3px solid var(--coral);outline-offset:2px;}
.checkbox-group{display:flex;gap:12px;align-items:flex-start;}
.checkbox-group input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--purple);}
.checkbox-group label{font-family:var(--mono);font-size:13px;line-height:1.5;}
.submit-btn{margin-top:22px;font-family:var(--mono);font-weight:700;font-size:14.5px;text-transform:uppercase;letter-spacing:.06em;padding:13px 22px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:3px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--sh);}
.submit-btn:disabled{opacity:.45;cursor:not-allowed;}
.submit-btn:not(:disabled):hover{background:#3C362F;transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(39,35,32,.16);}
.doc .fineprint{font-family:var(--mono);font-size:13px;line-height:1.6;color:#6B655C;margin-top:30px;}

/* ---------------- RESPONSIVE ---------------- */
/* Hero: blow the screenshot up and let it sit BEHIND the headline (desktop only). */
@media(min-width:861px){
  .hero{overflow:hidden;}
  .hero .hero-grid{display:block;position:relative;min-height:460px;}
  .hero .hero-copy{position:relative;z-index:2;max-width:540px;}
  .hero .taped{
    position:absolute;top:50%;right:clamp(-140px,-5vw,-24px);
    width:72%;max-width:960px;margin:0;z-index:1;
    transform:translateY(-50%) rotate(1.8deg);
    /* fade the left edge into the paper where the text column overlaps it */
    -webkit-mask-image:linear-gradient(to right, transparent 10%, #000 51%);
    mask-image:linear-gradient(to right, transparent 10%, #000 51%);
  }
}

/* Features: same blown-up + faded composition; fade points toward the text side (desktop only). */
@media(min-width:861px){
  .feature{overflow:hidden;}
  .feature .feat-grid{display:block;position:relative;min-height:480px;}
  .feature .feat-copy{position:relative;z-index:2;max-width:470px;}
  .feature .feat-grid.flip .feat-copy{margin-left:auto;}      /* flipped: copy hugs the right */

  .feature .taped{position:absolute;top:50%;width:62%;max-width:840px;margin:0;z-index:1;}
  /* image on the RIGHT (02, 04): bleed right, fade the left edge into the paper */
  .feature .feat-grid:not(.flip) .taped{
    right:clamp(-130px,-4.5vw,-22px);transform:translateY(-50%) rotate(-1.6deg);
    -webkit-mask-image:linear-gradient(to right, transparent 8%, #000 50%);
    mask-image:linear-gradient(to right, transparent 8%, #000 50%);
  }
  /* image on the LEFT (01, 03): bleed left, fade the right edge into the paper */
  .feature .feat-grid.flip .taped{
    left:clamp(-130px,-4.5vw,-22px);transform:translateY(-50%) rotate(1.6deg);
    -webkit-mask-image:linear-gradient(to left, transparent 8%, #000 50%);
    mask-image:linear-gradient(to left, transparent 8%, #000 50%);
  }
  /* Goals (02) is about reading the conversation — keep detail close to the text,
     even if that means a fairly abrupt fade. Slightly larger, but the extra width
     bleeds further off the right so the text-facing edge stays put. */
  .feature .feat-grid.media-wide .taped{
    width:66%;max-width:900px;right:clamp(-190px,-6.5vw,-62px);
    -webkit-mask-image:linear-gradient(to right, transparent 2%, #000 20%);
    mask-image:linear-gradient(to right, transparent 2%, #000 20%);
  }
}

@media(max-width:860px){
  .hero-grid,.feat-grid,.feat-grid.media-wide,.feat-grid.flip.media-wide{grid-template-columns:1fr;gap:42px;}
  .feat-grid.flip .feat-copy{order:0;}
  .role{grid-template-columns:1fr;gap:6px;}
  .nav-links{gap:16px;}
  .nav-links a.nav-sec{display:none;}
  .feature{padding:52px 0;}
  .pricing-grid{grid-template-columns:1fr;}
  .volume{grid-template-columns:1fr;gap:28px;}
  .faq-grid{grid-template-columns:1fr;gap:0;}
}