/* Off By Four — styles. Mobile first. */
@font-face{font-family:"Archivo Black";src:url(/fonts/ArchivoBlack-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/LibreCaslonText-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/LibreCaslonText-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/LibreCaslonText-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#F8F5EE;
  --ink:#141414;
  --stone:#6B665C;
  --rule:#DDD6C8;
  --red:#B5402A;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --block:"Archivo Black","Arial Black",Impact,sans-serif;
  --gutter:1.5rem;
  /* paper grain: a tiny SVG noise tile (CSS only, no image request) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .15 0 0 0 -1.1 .62'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
  /* registration mark (printer's cross) with a slightly off-register red ghost */
  --reg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke-width='.8'%3E%3Cg stroke='%23B5402A' opacity='.45' transform='translate(.7 .5)'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Cpath d='M8 1v14M1 8h14'/%3E%3C/g%3E%3Cg stroke='%23857E71'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Cpath d='M8 1v14M1 8h14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --frame:#CDC4B2;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper) var(--grain) 0 0/220px 220px;color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:700;margin:0;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem var(--gutter);max-width:72rem;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:-.02em}
.brand-mark{width:1.15rem;height:1.15rem;display:block}
.header-link{font-size:.9rem;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}

/* Hero — echoes the ad */
.hero{position:relative;text-align:center;padding:3.5rem var(--gutter) 5rem;max-width:62rem;margin:0 auto}
.ai{font-family:var(--block);font-size:clamp(8.5rem,50vw,27rem);line-height:.78;letter-spacing:-.045em;margin:0 0 .06em;padding-right:.04em;
  /* letterpress: ink spreads a hair into the paper, edges slightly rough (SVG filter #ink in index.html) */
  text-shadow:0 0 1px rgba(20,20,20,.3);filter:url(#ink)}
.more{font-weight:700;font-size:clamp(2.3rem,11vw,4.6rem);letter-spacing:-.045em;line-height:1;margin:0 0 1.6rem}
.not-just{list-style:none;padding:0;margin:0 auto 3.25rem;font-size:clamp(1.15rem,4.6vw,1.55rem);line-height:1.35;display:inline-block;text-align:left}
.not-just li{position:relative;padding-left:1.4em;margin:.45em 0}
.not-just li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--stone)}
h1{font-size:clamp(2.15rem,8.6vw,3.7rem);letter-spacing:-.045em;line-height:1.08;margin:0 0 1.25rem}
.lede{font-size:clamp(1.1rem,4.3vw,1.4rem);line-height:1.45;max-width:24em;margin:0 auto 2.25rem}

.button{display:inline-block;font:inherit;font-weight:700;font-size:1rem;letter-spacing:-.01em;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:.95rem 1.8rem;text-decoration:none;cursor:pointer;transition:background .15s}
.button:hover{background:var(--red);color:var(--paper)}
.button[disabled]{opacity:.6;cursor:progress}

/* Sections */
.block{padding:4.5rem var(--gutter);max-width:62rem;margin:0 auto;text-align:center}
.block.narrow{max-width:38rem}
.block.wide{max-width:72rem}
.block h2{font-size:clamp(1.85rem,6.6vw,2.6rem);margin-bottom:1.25rem}
.block.narrow p{font-size:1.125rem}
.kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:1rem}
.rule{border:0;height:1px;background:var(--rule);max-width:8rem;margin:0 auto}

.steps{list-style:none;padding:0;margin:3rem 0 0;display:grid;gap:2.5rem;text-align:center}
.steps li{max-width:20rem;margin:0 auto}
.num{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border:1.5px solid var(--ink);border-radius:50%;font-weight:700;font-size:1rem;margin-bottom:1rem;line-height:1}
.steps h3,.ways h3{font-size:1.35rem;margin-bottom:.5rem}
.steps p,.ways p{margin:0;color:#2b2925}

.ways{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid var(--rule)}
.ways article{padding:2rem .5rem;border-bottom:1px solid var(--rule)}
.ways p{max-width:22rem;margin:0 auto}

/* Why Off By Four — the inverted moment */
.why{background:var(--ink);color:var(--paper);text-align:center;padding:5rem var(--gutter) 5.5rem;margin:3rem 0 0}
.why > *{max-width:36rem;margin-left:auto;margin-right:auto}
.why .why-q{font-style:italic;font-size:1.3rem;color:#CFC8B9;margin-bottom:1rem}
.why h2{font-size:clamp(1.9rem,7vw,2.9rem);margin-bottom:1.5rem;max-width:34rem}
.why p{color:#D9D3C6;font-size:1.125rem}
.why p:last-child{margin-bottom:0}

/* Contact */
.contact{padding:4.5rem var(--gutter) 5rem;max-width:44rem;margin:0 auto;text-align:center}
.contact h2{font-size:clamp(2rem,7.4vw,3rem);margin-bottom:1rem}
.contact-sub{color:var(--stone);margin-bottom:2.5rem}
.form{display:grid;gap:1.1rem;text-align:left}
.field label{display:block;font-size:.9rem;font-weight:700;margin-bottom:.35rem;letter-spacing:-.01em}
.opt{font-weight:400;color:var(--stone)}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#FFFDF8;border:1px solid #CFC7B7;border-radius:6px;padding:.75rem .85rem;transition:border-color .15s}
.field textarea{resize:vertical;min-height:7.5rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,20,.08)}
.field [aria-invalid="true"]{border-color:var(--red)}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-top:.6rem;text-align:center}
.status{margin:0;min-height:1.6em;font-size:1rem}
.status.ok{color:var(--ink)}
.status.err{color:var(--red)}
.direct{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule)}
.direct p{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:.75rem}
.direct ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;font-size:1.15rem}

/* Footer */
.site-footer{text-align:center;padding:3rem var(--gutter) 3.5rem;border-top:1px solid var(--rule)}
.site-footer .brand-mark{width:1.6rem;height:1.6rem;margin:0 auto .75rem}
.foot-name{font-weight:700;letter-spacing:-.02em;margin:0 0 .2rem}
.foot-line{font-style:italic;color:var(--stone);margin-bottom:1.25rem}
.foot-small{font-size:.85rem;color:var(--stone);margin:0}

@media (min-width:44rem){
  :root{--gutter:2.5rem}
  .hero{padding-top:5rem;padding-bottom:7rem}
  h1{font-size:clamp(3rem,4.6vw,4rem)}
  .contact{padding-top:6rem}
  .block{padding:6rem var(--gutter)}
  .steps{grid-template-columns:repeat(2,1fr);gap:3.5rem 3rem}
  .ways{grid-template-columns:repeat(3,1fr);border-top:0}
  .ways article{border-bottom:0;padding:1rem 1.75rem;border-left:1px solid var(--rule)}
  .ways article:first-child{border-left:0}
  .why{padding:7rem var(--gutter) 7.5rem}
  .form{grid-template-columns:1fr 1fr;gap:1.25rem 1.25rem}
  .full{grid-column:1/-1}
  .direct ul{flex-direction:row;justify-content:center;gap:2.5rem}
}
@media (min-width:68rem){
  .steps{grid-template-columns:repeat(4,1fr);gap:2.5rem}
  .steps li{max-width:none}
}
.ai.e404{font-size:clamp(6rem,34vw,16rem)}

/* ───────── Motion & small touches ───────── */
:root{--ease:cubic-bezier(.22,.61,.36,1)}

/* Live footer line */
.foot-live{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem;font-size:.9rem;color:var(--stone);margin:0 0 1.25rem;min-height:1.6em}


/* Strike-through for the "AI is more than…" lines (drawn only when animating) */
.x{position:relative;display:inline-block;color:var(--stone)}
.x::after{content:"";position:absolute;left:-.12em;right:-.12em;top:.72em;height:2px;border-radius:2px;background:var(--red);transform:rotate(-.6deg);box-shadow:1px 1px 0 rgba(181,64,42,.3)}

/* Links: underline redraws from the left on hover */
.direct a,.foot-small a,.header-link{text-decoration:none;border-bottom:0;padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.header-link{padding-bottom:2px}

/* Success panel */
.sent{text-align:center;padding:2.5rem 1rem 1rem}
.sent-title{font-size:1.9rem;margin-bottom:.75rem;outline:none}
.sent p{margin:0;font-size:1.1rem}
.form.leaving{opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}

@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes strike{to{transform:scaleX(1)}}
  @keyframes dim{to{color:var(--stone)}}
  @keyframes redraw{from{background-size:0 1px}to{background-size:100% 1px}}

  /* Hero sequence: AI → is more than → the flip board starts turning → headline lands (static from then on) */
  .hero .ai{animation:rise 1s var(--ease) .1s both}
  .hero .more{animation:rise .8s var(--ease) .45s both}
  .hero .hb-wrap{animation:fade .6s ease .7s both}
  .hero h1{animation:rise .9s var(--ease) 1.2s both}
  .hero .lede{animation:rise .8s var(--ease) 1.45s both}
  .hero .button{animation:rise .8s var(--ease) 1.65s both}
  .hero .hero-aside{animation:fade .8s ease 2s both}

  /* Scroll reveal (class added by JS only) */
  .motion .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
  .motion .reveal.in{opacity:1;transform:none}

  /* Split-flap pieces (logo flip, 4:00, step numbers, boards) live in /mark-motion.css */
  /* Hover touches */
  .button{transition:background .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
  @media (hover:hover){
    .button:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(20,20,20,.45)}
    .button:active{transform:translateY(0);box-shadow:none}
    .ways article,.steps li{transition:transform .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
    .ways article:hover{transform:translateY(-4px);background:#FFFDF8;box-shadow:0 10px 24px -18px rgba(20,20,20,.35);border-radius:10px}
    .direct a:hover,.foot-small a:hover,.header-link:hover{animation:redraw .45s var(--ease)}
  }
}
@media (hover:hover){.ways article{border-radius:10px}}
@media print{.motion .reveal{opacity:1!important;transform:none!important}}

/* Playful italic asides */
.aside{font-style:italic;color:var(--stone)}
p.aside{font-size:1rem;margin-top:-.25rem}
.hero .hero-aside{margin:1.1rem 0 0;font-size:.98rem}
.why .why-aside{color:#B9B2A4;margin-top:1.25rem;font-size:1rem}
.steps .aside,.ways .aside{white-space:nowrap}
.field input::placeholder,.field textarea::placeholder{color:#A39C8F;font-style:italic;opacity:1}
img.brand-mark{display:block}

/* Book a consultation (home) */
.book{width:calc(100% - 2*var(--gutter));max-width:40rem;margin:4rem auto;padding:3rem 1.5rem 2.75rem;text-align:center;border:1px solid var(--rule);border-radius:14px;background:#FBF9F4}
.book h2{font-size:clamp(1.75rem,6.2vw,2.4rem);margin-bottom:1rem}
.book p{font-size:1.1rem}
.book .book-deal{margin-bottom:1.75rem}
.book .book-deal strong{font-weight:700}
.book p.aside{margin:1.1rem 0 0;font-size:.98rem}
@media (min-width:44rem){.book{padding:3.75rem 3rem 3.25rem;margin:5.5rem auto}}

/* /start page */
.start-hero{text-align:center;padding:3rem var(--gutter) 1.5rem;max-width:42rem;margin:0 auto}
.start-hero h1{font-size:clamp(2.3rem,8vw,3.6rem);margin-bottom:1rem}
.start-hero .lede{margin-bottom:0}
.deal{max-width:40rem;width:calc(100% - 2*var(--gutter));margin:2.25rem auto 0;border:1px solid var(--rule);border-radius:14px;background:#FBF9F4;padding:1.75rem 1.5rem}
.deal ol{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.deal li{display:flex;gap:1rem;align-items:baseline}
.deal .n{flex:none;display:inline-grid;place-items:center;width:2rem;height:2rem;border:1.5px solid var(--ink);border-radius:50%;font-weight:700;font-size:.9rem;line-height:1}
.deal li div{flex:1}
.deal b{font-weight:700}
.deal .fine{margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid var(--rule);font-size:1rem}
.start-form{max-width:40rem;width:calc(100% - 2*var(--gutter));margin:3rem auto 0;padding-bottom:4.5rem}
.field select{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#FFFDF8;border:1px solid #CFC7B7;border-radius:6px;padding:.75rem .85rem;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 1.15rem) 1.2rem,calc(100% - .8rem) 1.2rem;background-size:.35rem .35rem;background-repeat:no-repeat}
.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,20,.08)}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem;line-height:1.5;text-align:left}
.check input{flex:none;width:1.2rem;height:1.2rem;margin:.2rem 0 0;accent-color:var(--ink)}
.check.invalid{color:var(--red)}
.sent .pay{margin:1.75rem 0 1.5rem}
.sent .next{font-size:1.1rem;margin-top:1.25rem}
.deal .fine .aside{display:block;margin-top:.25rem}

/* /start after payment: deposit check + booking */
.deposit{padding-top:1rem}
.deposit .kicker{margin:0 0 .6rem}
.deposit .sent-title{font-size:clamp(1.9rem,6.4vw,2.6rem)}
.deposit .next{max-width:30rem;margin-left:auto;margin-right:auto}
.deposit .next b{font-weight:700}
.dep-checking-text{font-weight:700;font-size:1.25rem!important;letter-spacing:-.01em;margin-bottom:.35rem!important}
.button-big{font-family:var(--block);font-weight:400;font-size:1.2rem;letter-spacing:-.005em;padding:1.15rem 2.4rem;background:var(--red)}
.button-big:hover{background:var(--ink)}
.button-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.button-quiet:hover{background:var(--ink);color:var(--paper)}
.deposit .pay{margin:1.75rem 0 1rem}
.deposit p.aside{margin-top:0}
.dep-help{margin-top:1rem!important}
.dep-help a,.deposit #book-no a{color:var(--ink)}
.dep-foot{margin-top:2rem!important}
#book-no{margin-top:1.5rem}
.book-embed{margin:2rem auto 0;text-align:center}
.book-embed summary{display:inline-block;cursor:pointer;font-size:.95rem;color:var(--stone);list-style:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.book-embed summary::-webkit-details-marker{display:none}
.book-embed summary::after{content:" \2193"}
.book-embed[open] summary::after{content:" \2191"}
.book-embed summary:hover{color:var(--red)}
.frame-wrap{margin-top:1.25rem;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:#fff}
.frame-wrap iframe{display:block;width:100%;height:42rem;border:0}
@media (min-width:44rem){.frame-wrap iframe{height:46rem}}
.sent .next ~ p.aside{margin-top:1.25rem}

/* ───────── Hero flip board (the endless "is more than…" departures board) ─────────
   16 columns × 2 rows of character cards. Sizes are in container units, so the cards scale with
   the board and the board height never changes (no layout shift). JS fills it (main.js). */
.hb-wrap{display:none;position:relative;margin:0 auto clamp(2.5rem,5vw,3.75rem)}
.motion .hb-wrap{display:block}
.motion .not-just{display:none}
.hb{width:min(100%,44rem);margin:0 auto;container-type:inline-size;display:grid;gap:1.8cqw;padding:0;
  /* desktop/tablet: one row of 14 cards; card width, gap and pitch (card + gap) in board-width units */
  --tw:6.5857cqw;--tg:.6cqw;--tp:7.1857cqw;--th:8.96cqw;--tf:8.44cqw}
.hb-row+.hb-row{display:none}
@media (max-width:37.49rem){
  /* mobile: two rows of 9 larger cards (~37px at 390 wide); lines break on word boundaries */
  .hb{--tw:10.311cqw;--tg:.9cqw;--tp:11.211cqw;--th:14.02cqw;--tf:13.22cqw;width:calc(100% - 1.5rem)}
  .hb-row+.hb-row{display:flex}
}
.hb-row{position:relative;display:flex;gap:var(--tg);height:var(--th)}
/* quieter cards than the clocks: flat ink, a hairline seam, a whisper of shading, no pins or dot screen */
.hb .sf{font-size:var(--tf);width:var(--tw);height:var(--th);line-height:var(--th);--gap:max(1px,.3cqw);--r:.55cqw}
.hb .sf b{font-size:.74em;text-shadow:none}
.hb .sf::before,.hb .sf::after{display:none}
.hb .sf-t,.hb .sf-ft{background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%)}
.hb .sf-b,.hb .sf-fb{background-image:none;box-shadow:none}
/* an empty slot: a pale, unprinted card */
.hb .e{background-color:#ECE6DA;background-image:none}
.hb .sf-b.e,.hb .sf-fb.e{background-image:none}
.hb .e b{visibility:hidden}
/* red pen stroke, slightly off-register */
.hb-x{position:absolute;z-index:4;top:50%;left:calc(var(--s,0)*var(--tp) - .7cqw);width:calc(var(--n,0)*var(--tp) - var(--tg) + 1.4cqw);height:max(3px,.85cqw);margin-top:max(-1.5px,-.42cqw);
  background:linear-gradient(90deg,#B5402A,#A93A26 40%,#B5402A 75%,#BC4A33);border-radius:1cqw .6cqw .8cqw 1cqw;
  box-shadow:.25cqw .2cqw 0 rgba(181,64,42,.28);transform:rotate(var(--rot,-.7deg)) scaleX(0);transform-origin:left center;pointer-events:none}
.hb-x.on{transform:rotate(var(--rot,-.7deg)) scaleX(1);transition:transform .42s cubic-bezier(.6,.1,.3,1)}
.hb-x.fade{opacity:0;transition:opacity .2s ease}
.hb-row+.hb-row .hb-x{--rot:.5deg}
.hb.crossed .sf:not(:has(.e)) b{color:#CFC8B9}
/* margin note on hover: a pencilled aside */
.hb-note{position:absolute;right:0;bottom:-1.9rem;margin:0;font-style:italic;font-size:.95rem;color:var(--red);opacity:0;transform:translateY(-3px) rotate(-1.5deg);transition:opacity .3s,transform .3s;pointer-events:none}
.hb-note::before{content:"\2190\00a0";font-style:normal}
@media (hover:hover){.hb-wrap:hover .hb-note,.not-just:hover+.hb-wrap .hb-note{opacity:1;transform:rotate(-1.5deg)}}
.not-just{position:relative}
.not-just::after{content:"\2190\00a0nice, but not a system.";position:absolute;left:100%;bottom:.2em;margin-left:1rem;white-space:nowrap;font-style:italic;font-size:.95rem;color:var(--red);opacity:0;transform:rotate(-2deg);transition:opacity .3s}
@media (hover:hover) and (min-width:56rem){.not-just:hover::after{opacity:1}}

/* ───────── Vintage print touches (quiet, CSS/SVG only) ───────── */
::selection{background:var(--red);color:var(--paper)}
/* warm vignette at the edges of the page, like an old magazine page */
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;background:radial-gradient(ellipse 120% 95% at 50% 45%,rgba(120,85,30,0) 62%,rgba(120,85,30,.075) 100%)}
/* the hero is "the ad": a fine double-rule frame with registration crosses at the corners */
.hero::before{content:"";position:absolute;inset:.85rem;border:1px solid var(--frame);outline:1px solid var(--frame);outline-offset:-5px;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--reg) 0 0/14px 14px no-repeat,var(--reg) 100% 0/14px 14px no-repeat,var(--reg) 0 100%/14px 14px no-repeat,var(--reg) 100% 100%/14px 14px no-repeat}
.hero{padding-left:calc(var(--gutter) + .5rem);padding-right:calc(var(--gutter) + .5rem)}
@media (max-width:30rem){.hero{padding-left:1.4rem;padding-right:1.4rem}.hero::before{inset:.55rem}}
/* section dividers: thin double rules with a registration cross */
.rule{height:16px;max-width:15rem;background:var(--reg) 50% 50%/16px 16px no-repeat,
  linear-gradient(var(--frame),var(--frame)) 0 6px/calc(50% - 15px) 1px no-repeat,linear-gradient(var(--frame),var(--frame)) 0 9px/calc(50% - 15px) 1px no-repeat,
  linear-gradient(var(--frame),var(--frame)) 100% 6px/calc(50% - 15px) 1px no-repeat,linear-gradient(var(--frame),var(--frame)) 100% 9px/calc(50% - 15px) 1px no-repeat}
/* small-caps labels with wide tracking */
.kicker,.direct p{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase}
/* the dark section gets a fine dot screen */
.why{background:var(--ink) radial-gradient(rgba(248,245,238,.045) .7px,transparent 1.1px) 0 0/4px 4px}
.book,.deal{background:#FBF9F4 var(--grain) 0 0/220px 220px;box-shadow:inset 0 0 0 4px #FBF9F4,inset 0 0 0 5px #E7E0D2}
.site-footer{border-top:3px double var(--frame)}
.ways{border-top-style:double;border-top-width:3px;border-top-color:var(--frame)}
@media (min-width:44rem){.ways{border-top:0}}

/* Back to the top of the hour */
.to-top{margin:0 0 1rem;font-size:.85rem}
.to-top a{color:var(--stone);text-decoration:none;font-style:italic}
.to-top a:hover{color:var(--red)}

/* Focus: a pencil underline (graphite, slightly hand-drawn) */
:focus-visible{outline:none}
a:focus-visible,summary:focus-visible{outline:none;border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6c14-1.6 30-.4 45-1.1s33-.9 48-.2 18 .5 25 .1' fill='none' stroke='%23B5402A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 100%;background-size:100% 6px;padding-bottom:4px}
.button:focus-visible,button:focus-visible{outline:1.5px solid var(--red);outline-offset:4px;background-image:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.check input:focus-visible{outline:1.5px solid var(--red);outline-offset:3px}
.brand:focus-visible{background-position:0 100%}

/* Easter eggs: 4 o'clock note, logo speech line */
.four-note{position:fixed;left:1rem;bottom:1rem;z-index:40;display:flex;align-items:center;gap:.9rem;max-width:calc(100% - 2rem);padding:.8rem .8rem .8rem 1.1rem;background:var(--paper) var(--grain) 0 0/220px 220px;border:1px solid var(--frame);outline:1px solid var(--frame);outline-offset:-5px;box-shadow:0 10px 26px -18px rgba(20,20,20,.5);font-size:1rem}
.four-note p{margin:0;font-weight:700;letter-spacing:-.01em}
.four-note p i{font-weight:400;color:var(--stone)}
.four-note button{flex:none;font:inherit;font-size:1.2rem;line-height:1;width:2rem;height:2rem;border:0;border-radius:50%;background:transparent;color:var(--stone);cursor:pointer}
.four-note button:hover{color:var(--red)}
.mini-clock.four .sf{--sf-bg:var(--red)}
.brand{position:relative}
.bm-say{position:absolute;left:calc(100% + .6rem);top:50%;white-space:nowrap;font-style:italic;font-weight:400;font-size:.9rem;color:var(--red);transform:translateY(-50%);pointer-events:none}
.bm .sf{position:absolute;left:50%;top:50%;font-size:1.48rem;margin:-.53em 0 0 -.39em;z-index:3}
@media (prefers-reduced-motion:no-preference){
  @keyframes say{0%{opacity:0;transform:translate(-4px,-50%)}12%,80%{opacity:1;transform:translate(0,-50%)}100%{opacity:0;transform:translate(0,-50%)}}
  .bm-say{animation:say 2.6s ease both}
  @keyframes note-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .four-note{animation:note-in .5s var(--ease) both}
}
.e404-board{font-size:1.3rem;margin:0 auto 2rem}
@media (min-width:44rem){.e404-board{font-size:1.7rem}}

/* ───────── Print: a clean one-page vintage ad ───────── */
@media print{
  @page{size:letter;margin:.5in}
  body{background:#fff;font-size:11pt}
  body::after,.skip,.site-header .header-link,.hb-wrap,.hero-aside,.to-top,.foot-live,main > :not(.hero),.site-footer .foot-line{display:none!important}
  .hero{max-width:none;padding:.45in .5in .4in;border:0;page-break-inside:avoid;break-inside:avoid}
  .site-header{padding:0 0 .15in}
  .site-footer .brand-mark{display:none!important}
  .site-footer{break-before:avoid}
  .hero::before{inset:0}
  .hero::after{inset:0}
  .not-just{display:inline-block!important}
  .hero .ai{font-size:170pt;filter:none}
  .hero .more{font-size:40pt;margin-bottom:18pt}
  .hero h1{font-size:30pt}
  .hero .button{background:none;color:var(--ink);padding:0;border-radius:0;font-size:14pt;border-bottom:1px solid var(--ink)}
  .hero .button::after{content:" \2014  offbyfour.com/start"}
  .site-footer{border:0;padding:.2in 0 0}
  *{animation:none!important;transition:none!important}
}

/* Email + WhatsApp links: subtle hairline underline in the text colour, red on hover, pencil underline on focus */
a[href^="mailto:"],a[href^="https://wa.me/"]{color:inherit;text-decoration:none;padding-bottom:1px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
a[href^="mailto:"]:hover,a[href^="https://wa.me/"]:hover{color:var(--red)}
.status a{color:inherit}
.e404-contact{margin:1.75rem 0 0;font-size:.95rem}