/* Nevano: "Shoreline". Clear water over warm beach sand.
   The scrollcraft engine files are untouched; this file themes its tokens and
   styles the page's own markup. */

:root {
  --sand: #F8EEDF;
  --sand-hi: #FDF7EC;
  --sand-lo: #F5E6CF;
  --sand-deep: #EADBC4;
  --sea: #0F80A3;
  --sea-hover: #0C6E8C;
  --ink: #0F3A4A;
  /* Brief muted #5B7276, darkened one step so small text passes 4.5:1 on sand. */
  --muted: #4F676B;
  --gold: #C99A55;
  --line: rgba(15, 58, 74, .14);
  --line-strong: rgba(15, 58, 74, .28);
  --water-1: #F1F5EC;
  --water-2: #A6DCEB;
  --water-3: #3FA6CC;

  --sc-canvas: var(--sand);
  --sc-surface: var(--sand-hi);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--muted);
  --sc-accent: var(--sea);
  --sc-accent-ink: #fff;
  --sc-font-display: "Mona Sans", system-ui, sans-serif;
  --sc-font-text: "Mona Sans", system-ui, sans-serif;
  --sc-shadow-color: 195 60% 12%;

  --gut: clamp(20px, 4.5vw, 72px);
  --barh: 84px;
  --maxw: 1240px;
  --r: 10px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

html { scroll-padding-top: 76px; }
body { background: var(--sand); color: var(--ink); font-size: 17px; line-height: 1.55; }
h1, h2, h3 { margin: 0; font-weight: 600; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.04; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
em { font-style: normal; }

/* Reveals only hide content when scripts are running. */
html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > * { opacity: 1; transform: none; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: var(--r); border: 1.5px solid transparent; font: 600 16px/1.2 var(--sc-font-text); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.btn--sea { background: var(--sea); color: #fff; }
.btn--sea:hover { background: var(--sea-hover); transform: translateY(-1px); }
.btn--line { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); background: rgba(15, 58, 74, .05); }

/* Read by screen readers, not shown on screen. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ph { display: inline-block; font-size: 14px; font-weight: 600; color: #7A4E12; background: #FBE7C2; padding: 2px 8px; border-radius: 6px; }

/* ---------------------------------------------------------------- header -- */
.bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--barh); padding: 0 var(--gut); background: rgba(253, 247, 236, 0); transition: background-color .3s, box-shadow .3s; }
.bar.is-stuck { background: rgba(253, 247, 236, .92); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.brand { font-weight: 650; font-stretch: 118%; font-size: 21px; letter-spacing: .01em; text-decoration: none; padding: 8px 0; }
.bar__nav { display: flex; gap: 6px; }
.bar__nav a { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 12px 12px; border-radius: 8px; }
.bar__nav a:hover { color: var(--ink); background: rgba(15, 58, 74, .05); }
.bar__menu { display: none; }

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--barh)); padding-top: var(--barh); background: linear-gradient(180deg, var(--sand-hi) 0%, var(--sand-lo) 100%); }
.hero__sun { position: absolute; width: 900px; height: 900px; right: -220px; top: -520px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .38), rgba(140, 205, 230, .12) 55%, transparent); }
.hero__inner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: clamp(32px, 5vh, 72px) var(--gut) clamp(32px, 5vh, 52px); }
.hero h1 { font-size: clamp(42px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -0.025em; }
.hero h1 span { display: block; text-wrap: balance; }
/* Brief: second line in a clear-water gradient. The light end is one step
   deeper than #2DA9CF so the lightest letters still pass 3:1 for large text. */
.hero__sea { background: linear-gradient(90deg, #0E78A0 0%, #1B8DB5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero__side { flex: 0 0 auto; max-width: 360px; padding-bottom: 8px; }
.hero__side p { font-size: 19px; color: var(--muted); margin-bottom: 26px; }
.hero__btns { display: flex; gap: 12px; }

/* ----------------------------------------------------------------- lanes -- */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--sand-lo); }
/* Each lane: the photo on top, sized so the phone in it is always shown whole,
   then the words on plain sand underneath. */
.lane { --photo-h: clamp(440px, 34.7vw, 640px); --fx: .5; --fy: .5; --cx: .5; --cy: .465; --zoom: 1;
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding-top: var(--photo-h); background: var(--sand); overflow: hidden; isolation: isolate; text-decoration: none; color: var(--ink); }
.lane--web { --fx: .5; --fy: .505; }
.lane--ads { --fx: .52; --fy: .508; }
.lane__plane { position: absolute; inset: -30px 0 auto; height: calc(var(--photo-h) + 60px); z-index: -2; overflow: hidden; }
.lane__zoom { position: absolute; inset: 0; transition: transform .9s var(--ease); }
.lane:hover .lane__zoom { transform: scale(1.025); }
/* A short fade where the photo meets the sand, kept below the phone. */
.lane::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--photo-h) + 100px); z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, var(--sand) 0, var(--sand) 100px, rgba(248, 238, 223, 0) 140px); }

/* The photo frame. Without JS it is a plain cover image and the phone screen
   stays blank. With JS it is set to the photo's own pixel size and scaled, so
   the drawn screen lines up with the phone in the picture. */
.frame { position: absolute; inset: 0; }
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame .screen { display: none; }
.frame.is-placed { inset: auto; left: 0; top: 0; width: 1000px; height: 1241.4px; transform-origin: 0 0; }
.frame.is-placed > img { object-fit: fill; }
.frame.is-placed .screen { display: block; }

/* Screens are laid out at a real phone size (390 x 844) and mapped onto the
   photo with a perspective transform. */
.screen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; overflow: hidden; border-radius: 46px; background: #fff; color: #111; font: 400 15px/1.35 "Mona Sans", system-ui, sans-serif; }
.screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 38%), linear-gradient(0deg, rgba(255, 196, 140, .07), rgba(255, 196, 140, .07)); }
.screen__status { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 46px; padding: 14px 0 0 34px; font-weight: 650; font-size: 16px; }
.screen__notch { position: absolute; z-index: 4; top: 0; left: 23%; width: 54%; height: 33px; background: #0B1114; border-radius: 0 0 20px 20px; }
/* Matches the top of the sister site shown on this screen (red and black). */
.screen--site { background: #121212; }
.screen--site .screen__status { background: #222020; color: #F5F2EE; }
.screen__scroll { position: absolute; left: 0; right: 0; top: 46px; bottom: 0; overflow: hidden; }
.screen__shot { width: 390px; height: auto; max-width: none; will-change: transform; }

.screen--ad { background: #fff; }
.ad__head { display: flex; align-items: center; gap: 10px; padding: 56px 14px 10px; }
.ad__av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--water-3), var(--gold)); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E3E3E3; }
.ad__who { display: flex; flex-direction: column; line-height: 1.2; }
.ad__who b { font-weight: 650; font-size: 15px; }
.ad__who small { font-size: 13px; color: #6B6B6B; }
.ad__more { margin-left: auto; font-size: 22px; letter-spacing: 1px; color: #333; }
.ad__media { position: relative; width: 390px; height: 488px; overflow: hidden; background: #E9E4DC; }
.ad__track { display: flex; width: 1170px; height: 100%; will-change: transform; }
.ad__track img { width: 390px; height: 488px; object-fit: cover; flex: 0 0 auto; max-width: none; }
.ad__count { position: absolute; right: 12px; top: 12px; padding: 3px 10px; border-radius: 99px; background: rgba(20, 20, 20, .62); color: #fff; font-size: 13px; font-weight: 600; }
.ad__cta { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #F2F4F5; border-bottom: 1px solid #E6E6E6; font-size: 15px; font-weight: 600; }
.ad__btn { padding: 7px 14px; border-radius: 8px; background: var(--sea); color: #fff; font-size: 14px; }
.ad__dots { display: flex; justify-content: center; gap: 5px; padding: 12px 0 8px; }
.ad__dots i { width: 7px; height: 7px; border-radius: 50%; background: #CFCFCF; }
.ad__dots i.is-on { background: var(--sea); }
.ad__cap { padding: 0 14px; font-size: 15px; }
.ad__cap b { font-weight: 650; }
.ad__caps { display: inline-grid; }
.ad__caps span { grid-area: 1 / 1; transition: opacity .3s; }
.ad__caps span + span { opacity: 0; }

/* Lane copy sits on the sand scrim at the foot of each lane */
.lane__copy { padding: 8px var(--gut) clamp(32px, 6vh, 56px); }
.lane__for { font-size: 15px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.lane h3 { font-size: clamp(38px, 4vw, 60px); letter-spacing: -0.02em; font-stretch: 112%; }
.lane__price { font-size: 21px; font-weight: 600; color: var(--sea-hover); margin-top: 12px; }
.lane__note { color: #3E585D; font-size: 16px; margin-top: 2px; }
.lane__go { display: inline-block; margin-top: 18px; padding: 6px 0; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 7px; text-decoration-thickness: 2px; transition: text-underline-offset .25s var(--ease); }
.lane:hover .lane__go { text-underline-offset: 10px; }
.lane:focus-visible { outline: 3px solid var(--sea); outline-offset: -6px; border-radius: 4px; }

/* -------------------------------------------------------------- sections -- */
.sec { position: relative; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--gut); }
.sec > h2, .sec__head h2, .example__text h2, .terms__head h2 { font-size: clamp(36px, 4.6vw, 64px); }
.lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); max-width: 40ch; margin-top: 18px; text-wrap: pretty; }
h3 { font-size: 22px; letter-spacing: -0.01em; font-stretch: 106%; }

/* Websites: three prices on one ruled band, not three boxes */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.tier { padding: 36px 32px 40px; }
.tier:first-child { padding-left: 0; }
.tier + .tier { border-left: 1px solid var(--line); }
.tier h3 { font-size: 19px; font-weight: 600; color: var(--muted); font-stretch: 100%; letter-spacing: 0; }
.tier__price { margin-top: 14px; font-size: clamp(44px, 5vw, 68px); font-weight: 600; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1; color: var(--sea); }
.tier__price span { display: block; margin-top: 8px; font-size: .42em; letter-spacing: -0.01em; color: var(--ink); }
.tier__split { margin-top: 14px; font-weight: 600; font-size: 16px; }
.tier__what { margin-top: 8px; color: var(--muted); font-size: 16px; max-width: 30ch; }

.web__more { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(48px, 6vw, 72px); }
.incl h3 { margin-bottom: 18px; }
.incl ul { display: grid; gap: 0; }
.incl li { position: relative; padding: 13px 0 13px 30px; border-bottom: 1px solid var(--line); font-size: 17px; }
.incl li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 13px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.web__act p { color: var(--muted); margin-bottom: 24px; max-width: 34ch; }

/* Meta ads: its own shallow-water band, full width */
.ads { max-width: none; background: linear-gradient(180deg, var(--water-1) 0%, #E2F2F2 55%, #D3ECF0 100%); }
.ads > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.ads__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.plan { text-align: right; flex: 0 0 auto; }
.plan__price { font-size: clamp(64px, 9vw, 132px); font-weight: 600; font-stretch: 112%; letter-spacing: -0.04em; line-height: .92; color: var(--sea); }
.plan__price span { font-size: .22em; letter-spacing: -0.01em; color: var(--ink); font-stretch: 100%; }
.plan__sub { margin-top: 10px; font-size: 19px; font-weight: 600; }
.ads__body { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(48px, 6vw, 80px); align-items: start; }
.incl--ads li { border-bottom-color: rgba(15, 58, 74, .12); }

/* The split: one bill to us, a separate one to Meta */
.split { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 4px rgba(15, 58, 74, .06), 0 18px 40px -16px rgba(15, 58, 74, .22); }
.split__part { padding: 30px 28px 32px; background: rgba(255, 255, 255, .78); }
.split__part--meta { background: var(--ink); color: #EAF4F6; }
.split__label { font-size: 15px; font-weight: 600; color: var(--muted); }
.split__part--meta .split__label { color: #A9CBD3; }
.split__num { text-wrap: balance; margin: 8px 0 10px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.1; }
.split__part p:last-child { font-size: 16px; }
.split__part--meta .split__num { color: #fff; }
.ads__foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid rgba(15, 58, 74, .16); }
.ads__foot p { max-width: 52ch; color: var(--muted); }
.ads__foot .btn { flex: 0 0 auto; }

/* How it works: two paths with a tide line that draws in */
.how__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); margin-top: clamp(40px, 5vw, 72px); }
.how__col h3 { margin-bottom: 24px; }
.steps { position: relative; counter-reset: s; }
.steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, var(--gold), rgba(201, 154, 85, .3)); transform-origin: top; }
.motion .steps::before { transform: scaleY(clamp(0, calc((var(--sc-p, 1) - .18) * 2.6), 1)); }
.how__col--ads .steps::before { background: linear-gradient(180deg, var(--water-3), rgba(63, 166, 204, .3)); }
.steps li { position: relative; padding: 4px 0 28px 52px; counter-increment: s; color: var(--muted); max-width: 44ch; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); border: 2px solid var(--gold); font-size: 14px; font-weight: 650; color: var(--ink); }
.how__col--ads .steps li::before { border-color: var(--water-3); }
.steps strong { display: block; color: var(--ink); font-weight: 600; font-size: 18px; margin-bottom: 2px; }

/* What you own: two big plain lines */
.own { padding-top: clamp(40px, 6vw, 80px); }
.own > h2 { font-size: 19px; font-stretch: 100%; letter-spacing: 0; color: var(--muted); font-weight: 600; margin-bottom: 24px; }
.own__line { font-size: clamp(28px, 3.6vw, 50px); font-weight: 550; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.16; max-width: 24ch; text-wrap: balance; }
.own__line + .own__line { margin-top: 22px; margin-left: clamp(0px, 12vw, 200px); color: #2A5260; }
.own__line em { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: .16em; }

/* Example work */
.example { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.example__text p { margin-top: 18px; color: var(--muted); max-width: 36ch; }
.browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(15, 58, 74, .06), 0 24px 50px -20px rgba(15, 58, 74, .28); }
.browser__bar { display: flex; gap: 7px; padding: 12px 14px; background: #F3EBDD; }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #DCCDB5; }
.browser__view { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 24px; text-align: center; background: repeating-linear-gradient(135deg, #FBF6EE 0 14px, #F7F0E4 14px 28px); }
.example__label { display: inline-block; margin-top: 16px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--gold); color: #7A5520; font-size: 15px; font-weight: 600; }

/* Terms: expand / collapse */
.terms { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.terms__head p { margin-top: 18px; color: var(--muted); }
.fold { border-top: 1px solid var(--line-strong); }
.fold:last-child { border-bottom: 1px solid var(--line-strong); }
.fold summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 22px 52px 22px 0; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: ""; position: absolute; right: 8px; top: 30px; width: 12px; height: 12px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .3s var(--ease); }
.fold[open] summary::after { transform: translateY(5px) rotate(225deg); }
.fold summary:hover .fold__t { color: var(--sea-hover); }
.fold__t { display: block; font-size: 22px; font-weight: 600; font-stretch: 106%; transition: color .2s; }
.fold__s { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.fine { padding: 0 0 28px; }
.fine > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.fine dt { font-weight: 600; }
.fine dd { color: #2D4D58; }

/* Contact */
.contact { max-width: none; background: linear-gradient(180deg, var(--sand) 0%, #F7EBD9 100%); }
.contact > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.contact__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 7vw, 120px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.request { display: grid; gap: 20px; }
.request__job { border: 0; padding: 0; margin: 0; }
.request__job legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.choice { display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(15, 58, 74, .07); }
.choice__opt { position: relative; }
.choice__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__opt span { display: block; min-width: 120px; padding: 12px 20px; border-radius: 9px; text-align: center; font-weight: 600; color: var(--muted); transition: background-color .2s, color .2s, box-shadow .2s; }
.choice__opt input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 58, 74, .12), 0 4px 10px -4px rgba(15, 58, 74, .2); }
.choice__opt input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }
.row { display: grid; gap: 7px; }
.row label { font-weight: 600; font-size: 16px; }
.row input, .row textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: rgba(255, 255, 255, .7); font-size: 17px; transition: border-color .2s, background-color .2s; }
.row input:hover, .row textarea:hover { border-color: rgba(15, 58, 74, .45); }
.row input:focus, .row textarea:focus { outline: none; border-color: var(--sea); background: #fff; box-shadow: 0 0 0 3px rgba(15, 128, 163, .2); }
.row textarea { resize: vertical; min-height: 120px; }
.request__ph { font-size: 15px; color: var(--muted); }
.request .btn { justify-self: start; }
.request__status { display: none; padding: 14px 16px; border-radius: var(--r); background: #FBE7C2; color: #5A3A0C; font-size: 16px; }
.request__status.is-shown { display: block; }
.request__status a { font-weight: 600; }
.request__status[data-kind="ok"] { background: #DCEFE6; color: #17432F; }
/* Spam trap for bots: kept off screen, never shown to people. */
.request__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.request .btn:disabled { opacity: .7; cursor: progress; }
.direct { padding: 30px; border-radius: 16px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); }
.direct h3 { margin-bottom: 18px; }
.direct dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.direct dt { font-size: 15px; color: var(--muted); font-weight: 500; }
.direct dd { font-size: 19px; font-weight: 600; }
.direct dd a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; text-decoration-thickness: 2px; display: inline-block; padding: 4px 0; }
.direct dd a:hover { color: var(--sea-hover); }
.direct div:last-child dd { font-size: 16px; font-weight: 400; color: var(--muted); }

/* Footer */
.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding: 56px var(--gut) 40px; background: var(--ink); color: #D5E4E8; }
.foot__brand { font-size: clamp(44px, 7vw, 96px); font-weight: 650; font-stretch: 118%; letter-spacing: -0.02em; line-height: .9; color: #FDF7EC; }
.foot__by { margin-top: 14px; font-size: 18px; }
.foot__small { max-width: 46ch; font-size: 14px; color: #A9C3CA; display: grid; gap: 8px; text-align: right; }

/* ----------------------------------------------------------- breakpoints -- */
@media (max-width: 1080px) {
  .lane { --photo-h: 500px; --zoom: 1.08; --cy: .4; }
  .lane::after { background: linear-gradient(0deg, var(--sand) 0, var(--sand) 100px, rgba(248, 238, 223, 0) 230px); }
  .lane__copy { padding-top: 4px; padding-bottom: 40px; }
  .tier { padding: 30px 22px 34px; }
  .web__more, .ads__body, .terms, .example { grid-template-columns: 1fr; }
  .ads__top { flex-direction: column; align-items: flex-start; }
  .plan { text-align: left; }
  .contact__cols { grid-template-columns: 1fr; }
  .direct { max-width: 560px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 64px; }
  :root { --barh: 64px; }
  .bar__menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 9px; background: transparent; font-weight: 600; font-size: 15px; cursor: pointer; }
  .bar__nav { display: none; position: absolute; left: 12px; right: 12px; top: 100%; flex-direction: column; gap: 0; padding: 8px; border-radius: 14px; background: var(--sand-hi); box-shadow: 0 18px 40px -12px rgba(15, 58, 74, .3); }
  .bar.is-open .bar__nav { display: flex; }
  .bar.is-open { background: rgba(253, 247, 236, .97); }
  .bar__nav a { padding: 14px 14px; font-size: 17px; color: var(--ink); }
  .hero__sun { width: 560px; height: 560px; right: -260px; top: -300px; }
  .hero__inner { flex-direction: column; align-items: stretch; gap: 18px; padding: 24px var(--gut) 28px; }
  .hero h1 { font-size: clamp(38px, 11vw, 46px); }
  .hero__side { max-width: none; }
  .hero__side p { font-size: 17px; margin-bottom: 22px; }
  .hero__btns .btn { flex: 1; padding: 0 16px; }

  .lanes { grid-template-columns: 1fr; }
  .lane h3 { font-size: 40px; }

  .sec { padding-top: 72px; padding-bottom: 72px; }
  .tiers { grid-template-columns: 1fr; border-bottom: 0; }
  .tier, .tier:first-child { padding: 26px 0 28px; }
  .tier + .tier { border-left: 0; border-top: 1px solid var(--line); }
  .tiers { border-bottom: 1px solid var(--line-strong); }
  .web__act .btn, .ads__foot .btn { width: 100%; }
  .split { grid-template-columns: 1fr; }
  .ads__foot { flex-direction: column; align-items: stretch; }
  .how__cols { grid-template-columns: 1fr; gap: 48px; }
  .own__line + .own__line { margin-left: 0; }
  .fine > div { grid-template-columns: 1fr; gap: 2px; }
  .fold__t { font-size: 20px; }
  .choice { display: flex; }
  .choice__opt { flex: 1; }
  .choice__opt span { min-width: 0; }
  .request .btn { justify-self: stretch; }
  .direct { padding: 22px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot__small { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .lane__zoom, .btn, .lane__go, .fold summary::after { transition: none; }
  .lane:hover .lane__zoom { transform: none; }
}