/* /restaurants/: the restaurant offer. Same tokens, fonts and section rhythm (--sec, --head) as the zxn.uk home and /websites/ pages: light paper and ink, one action colour
   (orange, .gy-btn in style.css), flat 1.5px ink rules, small square markers instead of pills. Locked with Ed on 2026-11-06: all light (no dark bands), screenshots and phones
   with no frame or outline (a soft shadow only), and almost no motion (one entrance on load). Pictures are real captures or plainly labelled diagrams. Phone first: the hero phones scroll sideways on a phone, and desktop screenshots are cropped to the left of the page so the headline is readable at that size. */
.rest{overflow-x:clip}
.rest figure{margin:0}
.rest figcaption,.rs-cap{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--muted);text-align:center}
.rs-small{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.rs-tag{margin:0;display:flex;align-items:center;font:700 13px/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.rs-tag:before{content:"";flex:none;width:9px;height:9px;margin-right:9px;background:var(--orange);border:1px solid #11111140}
.rs-tag--package:before{background:var(--green)}.rs-tag--addon:before{background:var(--blue)}

/* Hero: the promise in big type on the left, three real phone screens on the right */
.rs-kicker{margin:0;font:700 13px/1.35 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.rs-pt{font-style:normal;color:var(--mark)}
.rs-nb{white-space:nowrap}
.rs-lead{max-width:34em;margin:clamp(18px,2.4vw,28px) 0 0;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--ink-soft)}
.rs-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:clamp(24px,3vw,36px) 0 0}
.rs-link{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* Hero: plain paper, centred headline, a row of four real home pages, facts under it. One quiet entrance on load only (off under reduced motion). */
.rs-hero{padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,72px);border-bottom:1.5px solid var(--ink)}
.rs-hero-top{display:grid;justify-items:center;text-align:center}
.rs-hero h1{margin:18px 0 0;max-width:12.5em;font:700 clamp(44px,8vw,112px)/.93 var(--display);letter-spacing:-.06em}
.rs-hero .rs-lead{max-width:36em}
.rs-hero .rs-cta{justify-content:center}
.rs-band{margin-top:clamp(32px,4vw,56px);padding-block:clamp(28px,4vw,52px);border-block:1.5px solid var(--ink)}
.rs-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2vw,28px);padding-inline:16px}
.rs-ph{flex:none}
.rs-ph .rs-device{--pw:clamp(160px,19vw,270px)}
@media(max-width:899px){.rs-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 30px;scroll-padding-inline:20px}.rs-ph{scroll-snap-align:center}.rs-ph .rs-device{--pw:210px}.rs-band{padding-bottom:0}}
@media(max-width:400px){.rs-hero h1{font-size:40px}.rs-cta .gy-btn{padding-inline:12px;font-size:16px}}
@keyframes rs-rise{from{opacity:.01;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .rs-hero-top>*{animation:rs-rise .65s cubic-bezier(.2,.7,.2,1) both}
  .rs-hero-top>:nth-child(2){animation-delay:.07s}.rs-hero-top>:nth-child(3){animation-delay:.14s}.rs-hero-top>:nth-child(4){animation-delay:.21s}
  .rs-ph{animation:rs-rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:.3s}
  .rs-ph:nth-child(2){animation-delay:.38s}.rs-ph:nth-child(3){animation-delay:.46s}.rs-ph:nth-child(4){animation-delay:.54s}.rs-ph:nth-child(5){animation-delay:.62s}
}

@media(max-width:620px){.rs-cta{display:grid;justify-items:start}.rs-cta .gy-btn{width:100%}.rs-hero .rs-cta{justify-items:center}}

/* A phone: the capture inside a slim ink phone body, with a soft shadow. No white line. */
.rs-device{width:var(--pw,clamp(150px,40vw,220px));padding:8px;background:var(--ink);border-radius:30px;box-shadow:0 22px 40px -22px rgba(17,17,17,.5),0 6px 14px -8px rgba(17,17,17,.3)}
.rs-device img{display:block;width:100%;height:auto;aspect-ratio:800/1722;object-fit:cover;object-position:top;border-radius:22px;background:var(--paper-2);padding-top:4.5%}
/* the strip of breathing room above each screen takes that screen's own top colour */
.rs-device img[src*="scr-lg-"]{background-color:#000}
.rs-device img[src*="scr-rr-"]{background-color:#fec000}
.rs-device img[src*="scr-sf-"]{background-color:#faebd7}

/* Section headings */
.rs-feats h2,.rs-portal h2,.rs-quoted h2,.rs-mails h2,.rs-price h2{margin:14px 0 0;font:700 clamp(30px,4.2vw,54px)/1.02 var(--display);letter-spacing:-.045em}
.rs-feats .gy-tag,.rs-portal .gy-tag,.rs-quoted .gy-tag,.rs-mails .gy-tag,.rs-price .gy-tag{display:block}

.rs-win .desk{box-shadow:5px 6px 0 #11111126}

/* Why us: four numbered reasons in a ruled row */
.rs-why{list-style:none;margin:var(--head) 0 0;padding:0;display:grid;gap:0;border-top:1.5px solid var(--ink)}
.rs-why li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:4px 12px;padding-block:20px;border-bottom:1px solid var(--line)}
.rs-why b{grid-row:1/3;padding-top:.35em;font:700 14px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.rs-why h3{margin:0;font:700 clamp(22px,2.2vw,28px)/1.1 var(--display);letter-spacing:-.035em}
.rs-why p{margin:0;max-width:34em;font-size:16px;line-height:1.5;color:var(--ink-soft)}
@media(min-width:1000px){.rs-why{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;border-bottom:0}.rs-why li{display:block;border-bottom:0;padding-block:24px 0}.rs-why b{display:block;margin-bottom:12px;padding:0}.rs-why p{margin-top:10px}}

/* Feature rows: a rule above each, the words on one side and three real screens on the other, each with a caption */
.rs-feats{padding-block:var(--sec)}
.rs-group{margin:clamp(40px,6vw,72px) 0 0;font:700 clamp(22px,2.6vw,30px)/1.1 var(--display);letter-spacing:-.035em}
.rs-feat-list{list-style:none;margin:clamp(16px,2vw,24px) 0 0;padding:0}
.rs-feat{display:grid;gap:28px;align-items:center}
.rs-feat-list .rs-feat{padding-block:clamp(36px,5vw,64px);border-top:1.5px solid var(--ink)}
.rs-feat-copy{min-width:0}
.rs-feat h3{margin:14px 0 0;font:700 clamp(26px,3vw,40px)/1.05 var(--display);letter-spacing:-.04em}
.rs-feat p{max-width:34em;margin:14px 0 0;font-size:17px;line-height:1.55}
.rs-feat .rs-tag{margin:0}
.rs-feat .rs-small{font-size:15px}
.rs-feat .gy-ticks{margin-top:18px}
.rs-more{padding-left:16px;border-left:3px solid var(--orange);font-size:16px!important}
.rs-feat-vis{container-type:inline-size;min-width:0;display:grid;justify-items:center;gap:18px}
.rs-feat-vis .rs-cap{margin:0;max-width:30em}
.rs-3d .rs-device{--pw:clamp(190px,56vw,236px)}
.rs-strip{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px);align-items:start}
.rs-strip li{min-width:0;display:grid;gap:12px;justify-items:center}
.rs-strip .rs-device{width:100%}
.rs-strip .rs-cap{margin:0;font-size:14px;line-height:1.35;max-width:16em}
.rs-cap b{display:block;margin-bottom:1px;font-size:15px;color:var(--ink)}
@media(min-width:900px){.rs-feat{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px)}.rs-feat--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.rs-feat--flip .rs-feat-copy{order:2}}
/* On a phone the three screens are a swipeable row, each one big enough to read. */
@media(max-width:699px){
  .rs-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:6px 2px 22px;-webkit-overflow-scrolling:touch}
  .rs-strip li{flex:0 0 min(66%,250px);scroll-snap-align:center}
}

/* Portal: four real phone screens of the portal (sample data) and eight things that come with the monthly price */
.rs-portal{padding-block:var(--sec);border-top:1.5px solid var(--ink)}
.rs-cap--wide{max-width:none!important;margin:18px 0 0!important}
.rs-strip--4{margin-top:var(--head)}
@media(min-width:700px){.rs-strip--4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;margin-inline:auto}}
@media(min-width:1000px){.rs-strip--4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
.rs-portal .rs-cta{justify-content:center}
.rs-perks{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;gap:0 clamp(24px,3vw,44px)}
.rs-perks li{padding-block:20px 22px;border-top:1.5px solid var(--ink)}
.rs-perks h3{margin:0;display:flex;align-items:center;font:700 clamp(19px,1.8vw,22px)/1.2 var(--display);letter-spacing:-.03em}
.rs-perks h3:before{content:"";flex:none;width:9px;height:9px;margin-right:10px;background:var(--orange);border:1px solid #11111140}
.rs-perks p{margin:8px 0 0;max-width:32em;font-size:16px;line-height:1.5;color:var(--ink-soft)}
@media(min-width:700px){.rs-perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.rs-perks{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Quoted: a light tinted band between two ink rules, one extra per row with its own picture */
.rs-quoted{background:var(--paper-2);border-block:1.5px solid var(--ink);padding-block:var(--sec)}
.rs-ex{margin-top:var(--head)}
.rs-n{margin:0 0 8px!important;font:700 clamp(40px,4.4vw,56px)/1 var(--display)!important;letter-spacing:-.06em;color:#11111126;font-variant-numeric:tabular-nums}
.rs-ex .rs-3d .rs-device{--pw:clamp(190px,56vw,250px)}
.rs-ex .rs-win{width:100%}
.rs-small a{color:inherit;font-weight:650;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;white-space:nowrap}
.rs-more-list{list-style:none;margin:clamp(14px,2vw,22px) 0 0;padding:0;display:grid;gap:0 clamp(24px,3vw,44px);border-top:1.5px solid var(--ink)}
.rs-more-list li{display:grid;gap:2px;padding-block:16px;border-bottom:1px solid #11111133}
.rs-more-list b{font:700 17px/1.3 var(--body)}
.rs-more-list span{font-size:15px;line-height:1.45;color:var(--ink-soft)}
@media(min-width:700px){.rs-more-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.rs-more-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Email examples: the same newsletter in three restaurants' own styles */
/* The year: what changes on the website, and when. Plain text, no pictures of things we have not built. */
.rs-mails{padding-block:var(--sec)}
.rs-mail-one{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
.rs-mail-copy{min-width:0}
.rs-mail-pic{min-width:0;width:100%;max-width:380px;margin-inline:auto}
.rs-mail-pic .rs-cap{text-align:left}
@media(min-width:900px){.rs-mail-one{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,88px)}}
.rs-mail{margin:0;background:#fff;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:5px 6px 0 #11111126}
.rs-mail figcaption{display:grid;gap:2px;margin:0;padding:17px 16px;border-bottom:1.5px solid var(--ink);background:var(--paper-2);text-align:left;font-size:14px;line-height:1.35;color:var(--ink-soft)}
.rs-mail figcaption b{font-size:15px;color:var(--ink)}
.rs-mail img{display:block;width:100%;height:auto}
.rs-mail-facts{margin:clamp(20px,2.4vw,28px) 0 0;max-width:42em}
.rs-mails .rs-cta{margin-top:clamp(24px,3vw,36px)}




/* Price: one white card with an ink border and the orange offset shadow, the extras listed beside it */
.rs-price{padding-block:var(--sec)}
.rs-price-grid{display:grid;gap:clamp(32px,5vw,64px);margin-top:var(--head)}
.rs-price-card{min-width:0;padding:clamp(22px,3vw,36px);border:1.5px solid var(--ink);border-radius:10px;background:#fff;box-shadow:6px 7px 0 var(--orange)}
.rs-extras{min-width:0}
.rs-deal{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:2px}
.rs-deal li{font:700 clamp(30px,4.4vw,48px)/1.08 var(--display);letter-spacing:-.05em}
.rs-extras h3{margin:0;font:700 26px/1.1 var(--display);letter-spacing:-.035em}
.rs-extras ul{list-style:none;margin:14px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.rs-extras li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.rs-extras li b{font-size:17px;line-height:1.3}
.rs-extras li span{font:700 12px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
@media(min-width:900px){.rs-price-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}}

/* Form band and close: a stepped form of its own. One question at a time with tiles to tap; without script every question is on the page. */
.rs-form-band{padding-block:var(--sec);background:var(--paper-2);border-top:1.5px solid var(--ink)}
.rs-form-in{display:grid;gap:28px}
.rs-form{display:grid;gap:22px;padding:clamp(20px,3vw,32px);background:#fff;border:1.5px solid var(--ink);border-radius:10px;box-shadow:5px 6px 0 #11111126}
.rs-form fieldset{min-width:0;margin:0;padding:0;border:0}
.rs-form fieldset[hidden],.rs-form [hidden]{display:none!important}
.rs-form legend{padding:0;margin:0 0 16px;font:700 clamp(24px,3vw,32px)/1.1 var(--display);letter-spacing:-.04em}
.rs-form legend small{display:block;margin-top:6px;font:500 15px/1.3 var(--body);letter-spacing:0;color:var(--muted)}
.rs-prog{display:grid;gap:8px}
.rs-prog-t{margin:0;font:700 13px/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.rs-bar{height:6px;background:var(--paper-2);border:1px solid #11111140}
.rs-bar i{display:block;height:100%;width:33.34%;background:var(--orange)}
.rs-bar i[data-step="2"]{width:66.67%}.rs-bar i[data-step="3"]{width:100%}
.rs-tiles{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rs-tiles--one{grid-template-columns:minmax(0,1fr)}
.rs-tile{position:relative;display:block;min-width:0}
.rs-tile input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.rs-tile span{display:flex;align-items:center;min-height:52px;padding:10px 14px 10px 44px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;font:650 16px/1.25 var(--body);position:relative}
.rs-tile span:before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border:1.5px solid var(--ink);background:#fff}
.rs-tiles--one .rs-tile span:before{border-radius:50%}
.rs-tile input:checked+span{background:color-mix(in srgb,var(--orange) 35%,#fff);box-shadow:3px 4px 0 var(--ink)}
.rs-tile input:checked+span:before{background:var(--ink);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--orange) 35%,#fff)}
.rs-tile input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
@media(hover:hover){.rs-tile span:hover{background:var(--paper-2)}.rs-tile input:checked+span:hover{background:color-mix(in srgb,var(--orange) 35%,#fff)}}
.rs-fields{display:grid;gap:16px}
.rs-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.rs-nav .send-row{margin:0}
.rs-back{min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:650 16px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rs-next-btn{min-width:140px}
@media(max-width:699px){.rs-tiles{grid-template-columns:minmax(0,1fr)}.rs-nav .gy-btn{flex:1 1 auto}}
@media(min-width:1000px){.rs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rs-form-copy h2{margin:0;font:700 clamp(30px,4.2vw,54px)/1.02 var(--display);letter-spacing:-.045em}
.rs-reach{display:flex;flex-wrap:wrap;gap:0 20px;margin:20px 0 0}
.rs-reach a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:var(--ink);text-underline-offset:3px}
.rs-next{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.rs-next li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:8px;align-items:baseline;font-size:16px;line-height:1.45}
.rs-next b{font:700 22px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.rest .gy-close{background:var(--paper);color:var(--ink);border-top:1.5px solid var(--ink)}
.rest .gy-close h2{color:var(--ink)}
.rest .gy-close-in>p:not(.gy-cta){color:var(--ink-soft)}
.rs-side{margin:18px 0 0}
.rs-side a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:650;text-underline-offset:3px}
@media(min-width:900px){.rs-form-copy{position:sticky;top:96px}.rs-form-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}}

/* Not motion on its own: a small lift when the pointer is over a browser frame. */
@media(hover:hover){.rs-win .desk{transition:transform .15s ease,box-shadow .15s ease}.rs-win:hover .desk{transform:translate(-2px,-2px);box-shadow:8px 9px 0 #11111126}}

/* Things we have not built yet: compact cards with a small icon, never a drawn example screen, so nothing on the page can be mistaken for a product we have. */
.rs-soon{list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;display:grid;gap:clamp(16px,2vw,24px)}
@media(min-width:800px){.rs-soon{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rs-soon-card{display:grid;align-content:start;gap:12px;min-width:0;padding:clamp(20px,2.6vw,30px);background:#fff;border:1.5px solid var(--ink);border-radius:10px;box-shadow:5px 6px 0 #11111126}
.rs-soon-top{display:flex;align-items:center;gap:14px}
.rs-soon-card h3{margin:0;font:700 clamp(22px,2.2vw,28px)/1.1 var(--display);letter-spacing:-.035em}
.rs-soon-card p{margin:0;font-size:16.5px;line-height:1.5}
.rs-soon-card .rs-small{font-size:15px;color:var(--muted)}
.rs-soon-card .gy-ticks{margin:0}
.rs-ico{flex:none;width:56px}
.rs-ico svg{display:block;width:100%;height:auto;fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.rs-ico .bg{fill:var(--orange);stroke:none}
.rs-ico .w{fill:#fff}
.rs-ico .k{fill:var(--ink);stroke:none}

/* Sideways rows scroll by swipe or arrow keys; no scrollbar is drawn. */
.rs-row{scrollbar-width:none}
.rs-row::-webkit-scrollbar{display:none}

/* "Swipe  2 of 4" with arrows under a sideways row (built by restaurants.js; hidden when the row has nothing to scroll). */
.rs-swipe{display:flex;align-items:center;justify-content:center;gap:16px;margin:6px 0 0}
.rs-swipe[hidden]{display:none}
.rs-swipe-t{margin:0;min-width:7.5em;text-align:center;font-size:15px;font-weight:650;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rs-swipe-t b{color:var(--ink)}
.rs-band .rs-swipe{margin-top:0;padding-bottom:20px}
.rs-row:has(+ .rs-swipe:not([hidden])),.rs-strip:has(+ .rs-swipe:not([hidden])){padding-bottom:46px;margin-bottom:-22px}

/* Section nav: the numbered pills from the Explosive Boxing case study (/gallery.css + /gallery.js), as one sticky row pinned under the site header from the
   top of the page (Ed's pick, 2026-11-07). The sections sit in a plain wrapper that only tells the script where the chapters are. */
.rs-chaps{display:block;margin:0;gap:0}
.rs-secnav{position:sticky;top:78px;z-index:20;background:var(--paper);border-bottom:1.5px solid var(--ink)}
.rs-secnav .jump{justify-content:flex-start;padding-block:6px}
.rs-chaps>section{scroll-margin-top:0}
@media(max-width:850px){.rs-secnav{top:72px}}
@media(max-width:620px){.rs-secnav{top:70px}}
/* Where the chips do not all fit, the row scrolls under a soft fade on the right and starts flush with the screen edge. */
@media(max-width:1060px){
  .rs-secnav .wrap{max-width:none;padding-inline:0}
  .rs-secnav .jump{flex-wrap:nowrap;padding-inline:16px;scroll-padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
}

/* What you get: three pictures side by side on desktop (one per feature, a different business each), big enough to read; stacked on a phone. The add-on below keeps its copy-and-picture row. */
.rs-feats .rs-3d .rs-device{--pw:clamp(230px,64vw,270px)}
@media(min-width:900px){
  .rs-ex .rs-feat{grid-template-columns:minmax(0,24em) minmax(0,300px);justify-content:center;gap:clamp(36px,6vw,88px);padding-block:clamp(28px,3.4vw,44px)}
  .rs-feat-list:not(.rs-ex){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);border-top:1.5px solid var(--ink);padding-top:clamp(28px,3.4vw,44px)}
  .rs-feat-list:not(.rs-ex) .rs-feat{grid-template-columns:1fr;align-content:start;gap:22px;padding-block:0;border-top:0;text-align:center}
  .rs-feat-list:not(.rs-ex) .rs-feat-vis{order:-1}
  .rs-feat-list:not(.rs-ex) .rs-feat-copy{order:0}
  .rs-feat-list:not(.rs-ex) .rs-feat h3{font-size:clamp(24px,2.2vw,30px)}
  .rs-feat-list:not(.rs-ex) .rs-feat p{margin-inline:auto}
  .rs-feat-list:not(.rs-ex) .rs-feat .rs-tag{display:flex;justify-content:center}
}

/* Swipe feel: the sideways rows keep their own horizontal gesture (no page back-swipe, no rubber-band into the page), and the section chips do the same. */
.rs-row,.rs-strip,.rs-secnav .jump{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
/* The hero band ends where the section bar begins, so there is one rule there, not two. */
.rs-hero .rs-band{border-bottom:0}

/* "Your website follows your year.": pinned under the header and the section bar; scroll, swipe, hover or tap steps through the busiest dates (real booking data) and email marketing. */
.yr-stick{padding-block:var(--sec)}
.yr-pin{border-top:1.5px solid var(--ink)}
.yr-pin h2{margin:12px 0 0;font:700 clamp(28px,4.2vw,54px)/1.02 var(--display);letter-spacing:-.045em}
.yr-pin .gy-tag{display:block}
.yr-b{display:grid;gap:clamp(16px,2.4vw,36px) clamp(28px,4vw,64px);grid-template-areas:"head" "vis" "rest"}
.yr-head{grid-area:head}.yr-vis{grid-area:vis}.yr-rest{grid-area:rest}
@media(min-width:900px){.yr-b{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;grid-template-areas:"head vis" "rest vis";align-items:start}.yr-vis{align-self:center}}

/* season palettes: --bg fill, --fg text, --bt/--btx button, --gr the ground the picture stands on */
.yr-s-feb{--bg:#7a1f2b;--fg:#fff;--bt:#fff;--btx:#7a1f2b;--gr:#5c1520}
.yr-s-mar{--bg:#f7d6e6;--fg:#3a1230;--bt:#3a1230;--btx:#fff;--gr:#eab3cf}
.yr-s-apr{--bg:#d8f0a0;--fg:#173d12;--bt:#173d12;--btx:#fff;--gr:#79bd47}
.yr-s-jun{--bg:#1d3b5c;--fg:#fff;--bt:#f0b429;--btx:#1d3b5c;--gr:#12304d}
.yr-s-dec{--bg:#12372f;--fg:#fff;--bt:#c8102e;--btx:#fff;--gr:#f1f5f9}
.yr-s-mail{--bg:#1b3f8f;--fg:#fff;--bt:#f0b429;--btx:#1b3f8f;--gr:#12306b}

/* the rows: the dates, ranked by real data, then the extra */
.yr-evs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.yr-ev{display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:8px 16px 8px 8px;border:1.5px solid var(--ink);border-radius:18px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;appearance:none}
.yr-ev.yr-extra{border-style:dashed}
.yr-ev:focus-visible{outline:3px solid var(--blue,#2f6fed);outline-offset:2px}
.yr-ev .tile{flex:0 0 54px;width:54px;height:54px;border-radius:13px;background:var(--bg);display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.1)}
.yr-ev .ei{width:46px;height:46px}
.yr-ev .yr-t{display:block;min-width:0}
.yr-ev b{display:block;font:700 clamp(19px,1.7vw,22px)/1.1 var(--display);letter-spacing:-.03em}
.yr-ev small{display:block;margin-top:3px;font-size:14px;line-height:1.3;opacity:.82}
.yr-ev .xtra{margin-left:auto;padding:4px 10px;border:1.5px solid currentColor;border-radius:999px;font:700 11.5px/1 var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.1em;text-transform:uppercase}
.yr-cap{display:none}
.yr-actions{margin:20px 0 0}
.yr-actions .gy-btn{background:var(--ink);border-color:var(--ink);color:#fff}
/* A black button gets the multicolour ring (style.css), not the coloured CTAs' lift. */
.yr-actions .gy-btn:hover:not([aria-disabled=true]),.yr-actions .gy-btn:active:not([aria-disabled=true]){transform:none;box-shadow:none}
.yr-src{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);max-width:60em}
.yr-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.yr-after{padding-block:14px var(--sec)}

/* the example site: its banner changes through the year, and each picture stands on its own ground */
.yr-site{width:100%;max-width:580px;margin-inline:auto;background:#fff;border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 26px 44px -26px rgba(17,17,17,.45),0 6px 14px -8px rgba(17,17,17,.3)}
.yr-site-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1.5px solid var(--ink);font-size:13px;font-weight:650}
.yr-site-bar i{margin-right:auto;font:700 17px/1 var(--display);letter-spacing:-.04em}
.yr-site-bar span{padding:6px 10px;border:1.5px solid var(--ink);border-radius:999px}
.yr-banners{position:relative;aspect-ratio:16/11}
.yr-ban{position:absolute;inset:0;display:grid;align-content:end;gap:8px;padding:clamp(18px,3vw,30px);background:var(--bg);color:var(--fg);opacity:0;overflow:hidden;pointer-events:none}
.yr-ban::before{content:"";position:absolute;right:-8%;bottom:-24%;width:66%;height:46%;border-radius:50%;background:var(--gr)}
.yr-ban::after{content:"";position:absolute;right:calc(6% + 3%);bottom:calc(14% - 4px);width:28%;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.3),transparent)}
.yr-ban .bi{position:absolute;z-index:1;right:6%;bottom:14%;width:34%;max-width:210px;height:auto}
.yr-ban small,.yr-ban strong,.yr-ban .cta{position:relative;z-index:2}
.yr-ban small{font:700 12px/1.3 var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.yr-ban strong{font:700 clamp(26px,4.4vw,42px)/.98 var(--display);letter-spacing:-.05em;max-width:6.4em}
.yr-ban .cta{justify-self:start;margin-top:8px;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px 0 22px;border-radius:999px;background:var(--bt);color:var(--btx);font:700 15px/1 var(--body);box-shadow:0 3px 0 rgba(0,0,0,.22);transition:transform .15s,box-shadow .15s;cursor:pointer}
.yr-ban .cta svg{width:16px;height:16px;transition:transform .15s}
.yr-ban.is-on .cta:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.22)}
.yr-ban.is-on .cta:hover svg{transform:translateX(3px)}
.yr-site-lines{display:grid;gap:9px;padding:16px}
.yr-site-lines i{display:block;height:10px;border-radius:5px;background:var(--paper-2)}
.yr-site-lines i:nth-child(2){width:78%}.yr-site-lines i:nth-child(3){width:54%}

/* no script: the banner and the row cycle on their own, 4s each */
.yr-pin:not(.yr-js) .yr-ban{animation:yr-swap 24s infinite}
.yr-pin:not(.yr-js) .yr-ev{animation:yr-act 24s infinite}
.yr-pin:not(.yr-js) .d1{animation-delay:4s}.yr-pin:not(.yr-js) .d2{animation-delay:8s}.yr-pin:not(.yr-js) .d3{animation-delay:12s}.yr-pin:not(.yr-js) .d4{animation-delay:16s}.yr-pin:not(.yr-js) .d5{animation-delay:20s}
@keyframes yr-swap{0%{opacity:0}1.5%{opacity:1}15.5%{opacity:1}17%{opacity:0}100%{opacity:0}}
@keyframes yr-act{0%{background:#fff;color:var(--ink);border-color:var(--ink)}1.5%,15.5%{background:var(--bg);color:var(--fg);border-color:var(--bg)}17%,100%{background:#fff;color:var(--ink);border-color:var(--ink)}}

/* with script: scroll, swipe, hover, tap or focus pick the row */
.yr-pin.yr-js .yr-ev{transition:background .3s,color .3s,border-color .3s}
.yr-pin.yr-js .yr-ev.is-on{background:var(--bg);color:var(--fg);border-color:var(--bg)}
.yr-pin.yr-js .yr-ev.is-on .tile{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.yr-pin.yr-js .yr-ban{transition:opacity .35s}
.yr-pin.yr-js .yr-ban.is-on{opacity:1;pointer-events:auto}
.yr-pin.yr-js .yr-ban.is-on .bi{animation:yr-rise .55s cubic-bezier(.2,.9,.3,1.1)}
@keyframes yr-rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.yr-pin .yr-ban,.yr-pin .yr-ev,.yr-pin .bi,.yr-pin .cta,.yr-pin .cta svg{animation:none!important;transition:none!important}.yr-pin:not(.yr-js) .yr-s-feb.yr-ban{opacity:1}}

/* phone: the rows become a strip of six tiles, the picked one named underneath */
@media(max-width:899px){
  .yr-pin h2{font-size:clamp(26px,8vw,34px)}
  .yr-banners{aspect-ratio:16/10}
  .yr-ban strong{font-size:clamp(26px,7.2vw,32px)}
  .yr-ban .bi{width:36%}
  .yr-ban .cta{min-height:44px}
  .yr-pin.yr-js .yr-evs{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .yr-pin.yr-js .yr-ev{display:block;padding:0;border:0;border-radius:14px;background:none}
  .yr-pin.yr-js .yr-ev .yr-t,.yr-pin.yr-js .yr-ev .xtra{display:none}
  .yr-pin.yr-js .yr-ev .tile{width:100%;height:auto;aspect-ratio:1;border-radius:14px}
  .yr-pin.yr-js .yr-ev .ei{width:78%;height:78%}
  .yr-pin.yr-js .yr-ev.is-on{background:none}
  .yr-pin.yr-js .yr-ev.is-on .tile{outline:3px solid var(--ink);outline-offset:2px;box-shadow:none}
  .yr-pin.yr-js .yr-ev.yr-extra .tile{outline:1.5px dashed var(--ink);outline-offset:2px}
  .yr-pin.yr-js .yr-ev.yr-extra.is-on .tile{outline:3px solid var(--ink)}
  .yr-pin.yr-js .yr-cap{display:block;margin:12px 0 0;line-height:1.25}
  .yr-cap b{display:block;font:700 20px/1.1 var(--display);letter-spacing:-.03em}
  .yr-cap span{font-size:14px;opacity:.8}
  .yr-site-lines{display:none}
  .yr-actions{margin-top:14px}
}
@media(max-width:399px){.yr-pin.yr-js .yr-evs{gap:6px}}
@media(max-width:359px){.yr-pin.yr-js .yr-evs{margin-inline:-8px}}

/* Phones and small tablets: each section's heading, intro and the copy beside a picture are centred, as the picture is. It is set on those blocks one by one, never on a whole section: a card or a list with a bullet or an icon at its left keeps its own left alignment, or the bullet and the text part company (Ed, 2026-11-08). scripts/check-align.mjs fails a block that mixes the two. */
@media(max-width:899px){
  :is(.rs-feats,.rs-portal,.rs-quoted,.rs-mails,.rs-price)>.wrap>:is(.gy-tag,h2,.sec-lead,.rs-group),.rs-mail-copy,.rs-feat-copy,.yr-head,.rs-more-list{text-align:center}
  :is(.rs-feats,.rs-portal,.rs-quoted,.rs-mails,.rs-price) .sec-lead{margin-inline:auto}
  .rs-feat p,.rs-feat .rs-tag{margin-inline:auto}
  .rs-feat .rs-tag{justify-content:center}
  .rs-feat .gy-ticks{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
  .rs-more{border-left:0;padding-left:0}
  .rs-mails .rs-cta{justify-content:center;justify-items:center}
  .rs-mail-pic .rs-cap{text-align:center}
  .rest .gy-close-in,.yr-pin .yr-cap,.yr-pin .yr-actions{text-align:center}
  .rest .gy-close h2,.rest .gy-close-in>p:not(.gy-cta){margin-inline:auto}
  .rest .gy-close .gy-cta{display:grid;justify-items:center}
}