/* Template handoff pages reuse the site's existing paper/ink/orange typography and masthead. */
.template-resource { width:min(100%,1320px); margin:0 auto; padding:0 0 clamp(80px,9vw,150px); color:var(--ej-ink); font-family:var(--ej-display); }
.template-resource__topline { display:flex; align-items:center; justify-content:space-between; gap:22px; padding-bottom:18px; border-bottom:1px solid var(--ej-rule); }
.template-resource__eyebrow,.template-resource__back,.template-resource__supertitle,.template-resource__step,.template-resource__side-note>span,.template-resource__browser-bar,.template-resource__visual figcaption,.template-resource__bottom,.template-resource__small-note { font-family:var(--ej-mono); font-size:10px; font-weight:500; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; }
.template-resource__eyebrow { display:inline-flex; align-items:center; gap:11px; }
.template-resource__square { display:inline-block; width:8px; height:8px; background:var(--ej-accent); flex:0 0 8px; }
.template-resource__back { color:var(--ej-muted); }
.template-resource__back:hover,.template-resource__bottom a:hover { color:var(--ej-accent); }
.template-resource__intro { display:grid; grid-template-columns:minmax(0,1fr) 160px; align-items:end; gap:40px; padding:clamp(68px,9vw,132px) 0 clamp(70px,8vw,116px); }
.template-resource__intro-copy { max-width:975px; }
.template-resource__supertitle { margin:0 0 clamp(27px,3vw,40px); color:var(--ej-accent); }
.template-resource__intro h1 { max-width:13ch; margin:0; color:var(--ej-ink); font-family:var(--ej-display); font-size:clamp(54px,7.1vw,110px); font-weight:700; line-height:.93; letter-spacing:-.065em; text-wrap:balance; }
.template-resource__lead { max-width:650px; margin:clamp(30px,3.5vw,49px) 0 0; font-family:var(--ej-body); font-size:clamp(19px,1.5vw,23px); line-height:1.65; letter-spacing:-.018em; }
.template-resource__side-note { justify-self:end; display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:135px; color:var(--ej-muted); }
.template-resource__side-note strong { display:flex; align-items:flex-start; color:var(--ej-ink); font-size:clamp(80px,9vw,128px); font-weight:700; line-height:.8; letter-spacing:-.1em; }
.template-resource__note-star { margin:-3px 0 0 8px; color:var(--ej-accent); font-size:.25em; letter-spacing:0; }
.template-resource__content { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(310px,.82fr); gap:clamp(48px,5.5vw,90px); align-items:start; padding:clamp(40px,4.6vw,70px) 0 clamp(110px,12vw,190px); border-top:1px solid var(--ej-rule); }
.template-resource__visual { min-width:0; margin:0; }
.template-resource__browser { overflow:hidden; border:1px solid var(--ej-rule); background:#fffdf8; box-shadow:18px 22px 0 var(--ej-paper-deep); }
.template-resource__browser-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:46px; padding:0 16px; border-bottom:1px solid rgba(24,24,23,.1); background:#f8f6f1; color:#807b73; font-size:8px; }
.template-resource__window-dots { display:flex; gap:5px; }
.template-resource__window-dots i { display:inline-block; width:7px; height:7px; border:1px solid #c8c2b9; border-radius:50%; }
.template-resource__browser-index { color:var(--ej-accent); }
.template-resource__screenshot { display:block; width:100%; height:auto; background:#fff; }
.template-resource__visual figcaption { margin:31px 0 0; color:var(--ej-muted); font-size:9px; }
.template-resource__mockup { display:grid; min-height:440px; grid-template-columns:minmax(0,1fr) 42%; align-items:center; gap:clamp(12px,2vw,28px); padding:clamp(20px,3vw,42px); background:#e9eadb; }
.template-resource__mockup-copy { min-width:0; }
.template-resource__mockup-label { display:flex; gap:8px; align-items:center; color:#313d35; font-size:clamp(11px,1.1vw,16px); font-weight:700; letter-spacing:-.04em; }
.template-resource__mockup-label span { color:#fe8c54; }
.template-resource__mockup-rule { height:1px; margin:20px 0 50px; background:rgba(37,48,43,.22); }
.template-resource__mockup-kicker { color:#5f6b5f; font-family:var(--ej-mono); font-size:clamp(7px,.62vw,9px); line-height:1.6; letter-spacing:.05em; }
.template-resource__mockup-heading { margin:14px 0 0; color:#263c30; font-size:clamp(29px,3.5vw,59px); font-weight:700; line-height:1; letter-spacing:-.065em; }
.template-resource__mockup-heading em { color:#e17b49; font-style:normal; }
.template-resource__mockup-lines { display:grid; gap:8px; max-width:72%; margin-top:34px; }
.template-resource__mockup-lines i { height:5px; background:rgba(38,60,48,.2); }
.template-resource__mockup-lines i:nth-child(2) { width:88%; }
.template-resource__mockup-lines i:nth-child(3) { width:57%; }
.template-resource__mockup-checkout { min-width:0; padding:clamp(9px,1.4vw,22px); border:1px solid #e7e5df; background:#fffefa; box-shadow:0 15px 35px rgba(35,48,38,.11); }
.template-resource__mockup-cover { display:flex; justify-content:space-between; align-items:end; min-height:clamp(90px,12vw,160px); padding:clamp(11px,1.7vw,22px); background:#ceccbf; color:#263c30; }
.template-resource__mockup-cover span { font-size:clamp(16px,1.7vw,28px); font-weight:700; line-height:1; letter-spacing:-.06em; }
.template-resource__mockup-cover strong { font-size:12px; }
.template-resource__mockup-checkout-label { width:70%; height:8px; margin:21px 0 15px; background:#d7d5ce; }
.template-resource__mockup-field { height:29px; margin-top:8px; border:1px solid #e6e4de; }
.template-resource__mockup-field--short { width:60%; }
.template-resource__mockup-fake-button { margin-top:20px; padding:13px 5px; background:#263c30; color:white; font-family:var(--ej-mono); font-size:clamp(6px,.56vw,8px); text-align:center; }
.template-resource__actions { min-width:0; }
.template-resource__action-group { padding-top:8px; }
.template-resource__step { margin:0 0 25px; color:var(--ej-muted); font-weight:600; }
.template-resource__step span { margin-right:8px; color:var(--ej-accent); }
.template-resource__actions h2 { max-width:420px; margin:0 0 18px; font-family:var(--ej-display); font-size:clamp(34px,3vw,49px); font-weight:700; line-height:1.05; letter-spacing:-.05em; text-wrap:balance; }
.template-resource__action-group>p:not(.template-resource__step):not(.template-resource__disclosure):not(.template-resource__small-note) { max-width:390px; margin:0 0 28px; color:#686259; font-family:var(--ej-body); font-size:clamp(18px,1.45vw,21px); line-height:1.6; }
.template-resource__button { width:100%; min-height:63px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 22px; border:2px solid var(--ej-ink); color:var(--ej-paper); background:var(--ej-ink); font-family:var(--ej-display); font-size:clamp(12px,1.04vw,15px); font-weight:700; line-height:1.3; letter-spacing:-.01em; text-align:left; cursor:pointer; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.template-resource__button span { font-size:22px; line-height:1; flex:0 0 auto; }
.template-resource__button--primary:hover { border-color:var(--ej-accent); background:var(--ej-accent); color:var(--ej-ink); transform:translateY(-2px); }
.template-resource__button--secondary { border-color:var(--ej-ink); background:transparent; color:var(--ej-ink); }
.template-resource__button--secondary:hover { border-color:var(--ej-accent); background:var(--ej-accent); color:var(--ej-ink); transform:translateY(-2px); }
.template-resource__button--disabled { border-color:#aaa49b; background:#dedad2; color:#6c675f; cursor:not-allowed; }
.template-resource__button--outlined { background:transparent; }
.template-resource__small-note { margin:18px 0 0; color:var(--ej-muted); font-size:9px; }
.template-resource__action-group--second { margin-top:clamp(48px,5vw,72px); padding-top:clamp(42px,4vw,60px); border-top:1px solid var(--ej-rule); }
.template-resource__disclosure { max-width:415px; margin:22px 0 0; color:var(--ej-muted); font-family:var(--ej-body); font-size:clamp(14px,1vw,16px); line-height:1.7; }
.template-resource__disclosure strong { color:var(--ej-ink); font-weight:700; }
.template-resource__key-help,.template-resource__key-feedback { margin:14px 0 0; font-family:var(--ej-body); font-size:15px; line-height:1.6; color:var(--ej-muted); overflow-wrap:anywhere; }
.template-resource__bottom { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:28px; border-top:1px solid var(--ej-rule); color:var(--ej-muted); }
.template-resource__bottom-icon { color:var(--ej-accent); font-size:32px; }
.template-resource__bottom p { flex:1; }
.template-resource__bottom a { color:var(--ej-ink); font-weight:700; }
@media (max-width:900px) {
  .template-resource__content { grid-template-columns:1fr; gap:75px; }
  .template-resource__visual { max-width:780px; }
  .template-resource__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
  .template-resource__action-group--second { margin:0; padding:8px 0 0 30px; border-top:0; border-left:1px solid var(--ej-rule); }
  .template-resource__button { font-size:12px; }
}
@media (max-width:650px) {
  .template-resource__topline { align-items:flex-start; gap:15px; }
  .template-resource__eyebrow,.template-resource__back { font-size:8px; }
  .template-resource__intro { display:block; padding:63px 0 69px; }
  .template-resource__intro h1 { max-width:12ch; font-size:clamp(48px,11.5vw,74px); }
  .template-resource__lead { margin-top:28px; font-size:19px; }
  .template-resource__side-note { display:none; }
  .template-resource__content { padding:43px 0 95px; gap:65px; }
  .template-resource__browser { box-shadow:9px 12px 0 var(--ej-paper-deep); }
  .template-resource__browser-bar { min-height:39px; padding:0 10px; font-size:7px; }
  .template-resource__mockup { min-height:270px; padding:15px; }
  .template-resource__mockup-rule { margin:12px 0 30px; }
  .template-resource__mockup-heading { font-size:clamp(25px,6vw,40px); }
  .template-resource__mockup-cover { padding:9px; min-height:85px; }
  .template-resource__mockup-cover span { font-size:clamp(13px,3.2vw,20px); }
  .template-resource__mockup-checkout-label { margin:15px 0 10px; height:5px; }
  .template-resource__mockup-field { height:20px; margin-top:6px; }
  .template-resource__mockup-fake-button { margin-top:12px; padding:8px 2px; }
  .template-resource__actions { display:block; }
  .template-resource__actions h2 { font-size:38px; }
  .template-resource__action-group--second { margin-top:56px; padding:50px 0 0; border-top:1px solid var(--ej-rule); border-left:0; }
  .template-resource__button { min-height:63px; font-size:13px; }
  .template-resource__bottom { flex-wrap:wrap; gap:16px; font-size:8px; }
  .template-resource__bottom-icon { font-size:24px; }
  .template-resource__bottom a { width:100%; margin-top:10px; }
}
@media (prefers-reduced-motion:reduce) { .template-resource__button { transition:none; } .template-resource__button:hover { transform:none; } }