/* desktop-scale: native */
/* (Drawn at its final desktop size, like tx.css: tools/desktop-scale/generate.py skips a sheet whose first line is the marker above.) */
/* ============================================================
   PrimeStart, the editorial design ("ed"), 12 October 2026
   COMPONENTS, for converted pages only (inc/ed.php decides which).

   Tokens and atoms (.ed-wrap, .ed-label, .ed-h2, .ed-lede, .ed-btn, .ed-link,
   .ed-actions, .ed-photo, .ed-closer, .ed-buy) are in ed-shell.css, which
   every page has. This file is every component a page is built from; the
   helpers that print them are in inc/ed-components.php and the reference is
   docs/ED-COMPONENTS.md. A page's own compositions go in ed-<slug>.css.

   CONTENTS
     1  page base, sections, section head       7  the thread
     2  the display heading                      8  ownership timeline
     3  devices and captions                     9  the quote
     4  the pairing                             10  steps and artefacts
     5  the promise row                         11  the strip
     6  showcase, annotated site, compare       12  questions
   ============================================================ */

/* ------------------------------------------------------------ 1. page base, sections, head */
body.ed{background:var(--ed-ivory);color:var(--ed-ink);font-family:var(--ed-sans)}
.ed-on-navy{color:#fff}
body.ed main{overflow-x:clip}

/* A section is a band. Ivory unless it says otherwise; linen for the alternate band. The footer is a page's one dark band. */
.ed-sec{padding-block:var(--ed-band)}
.ed-sec--linen,.ed-sec--sand{background:var(--ed-linen)}
.ed-sec--night{background:var(--ed-night);color:var(--ed-on-night)}
.ed-sec--tight{padding-block:calc(var(--ed-band)*.62)}
/* Two paper bands in a row are separated by a hairline the width of the content, not by a change of colour. */
.ed-sec--rule{padding-top:0}
.ed-sec--rule > .ed-wrap{position:relative;padding-top:var(--ed-band)}
.ed-sec--rule > .ed-wrap::before{content:"";position:absolute;top:0;left:var(--ed-gut);right:var(--ed-gut);border-top:1px solid var(--ed-line-2)}

.ed-head{display:grid;gap:var(--ed-5);max-width:840px;justify-items:start}
.ed-head .ed-lede{max-width:56ch}
.ed-sec--night .ed-h2{color:#fff}
.ed-sec--night .ed-lede,.ed-sec--night .ed-label{color:var(--ed-on-night)}
.ed-sec--night .ed-link{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
.ed-sec--night .ed-btn:focus-visible,.ed-sec--night .ed-link:focus-visible{outline-color:#fff}

/* The link that ends a section ("See all our work"). */
.ed-more{margin:var(--ed-6) 0 0}
/* A plain sentence that qualifies what is above it. Reading size: never small print. */
.ed-note{margin:0;font-size:15.5px;line-height:1.6;color:var(--ed-ink-2);max-width:62ch}

/* A label on the left and its value on the right. (The dotted leaders of the rejected look are gone.) */
.ed-leader{display:flex;align-items:baseline;gap:10px;margin:0}
.ed-leader > i{flex:1 1 24px;min-width:24px}
.ed-leader > b,.ed-leader > dd{flex:none;margin:0;text-align:right}

/* ------------------------------------------------------------ 2. the display heading */
.ed-h1{
  margin:0;font-family:var(--ed-sans);font-size:var(--ed-h1);font-weight:700;line-height:1.05;letter-spacing:-.025em;color:var(--ed-ink);text-wrap:balance;
}
/* Each line of a headline is set, not left to wrap: no orphaned last word at any width. */
.ed-h1-l{display:block;white-space:nowrap}

/* One word of a headline may take the orange (large type only; --ed-orange-600 is 4.6:1 on ivory). */
.ed-hl{color:var(--ed-orange-600)}

/* ------------------------------------------------------------ 3. devices and captions
   One browser frame and one phone frame. Thin, quiet, real proportions: the
   website is the subject, the frame is how you know it is a website. */
.ed-browser{
  border-radius:6px;overflow:hidden;background:var(--ed-white);
  box-shadow:0 0 0 1px rgba(11,22,34,.18),0 30px 60px -30px rgba(11,22,34,.55);
}
.ed-browser-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#F4F1EC;border-bottom:1px solid rgba(11,22,34,.1)}
.ed-browser-bar i{width:7px;height:7px;border-radius:50%;background:rgba(11,22,34,.2)}
.ed-browser-bar span{
  margin:0 auto;padding:0 12px;height:16px;min-width:38%;max-width:60%;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--ed-white);font-family:var(--ed-sans);font-size:9.5px;font-weight:600;letter-spacing:.01em;line-height:1;color:var(--ed-mute);
  overflow:hidden;white-space:nowrap;transform:translateX(-16px);
}
.ed-browser-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ed-white)}
.ed-browser-screen > img,.ed-phone-screen > img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

.ed-phone{position:relative;aspect-ratio:390/830;background:var(--ed-night);border-radius:15%/7.1%;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 24px 44px -22px rgba(11,22,34,.7)}
.ed-phone-screen{position:absolute;inset:2.2% 4.6%;border-radius:11.5%/5.3%;overflow:hidden;background:var(--ed-white)}
.ed-phone-screen::after{content:"";position:absolute;top:1.5%;left:50%;width:27%;height:2.5%;transform:translateX(-50%);border-radius:99px;background:var(--ed-night)}

/* The two together: the phone stands in front of the window's lower corner. */
.ed-devices{position:relative}
.ed-devices .ed-phone{position:absolute;width:24%;right:-5%;bottom:-9%}
.ed-devices--flip .ed-phone{right:auto;left:-5%}
.ed-devices--solo .ed-phone{display:none}

/* The line that says what the screens show. */
.ed-cap{margin:0}
.ed-cap .ed-label{color:var(--ed-mute);font-size:11px}
.ed-cap .ed-label::before{width:16px}
/* On a pair of devices it is attached to the frame it describes. */
.ed-devices > .ed-cap{position:absolute;right:0;bottom:calc(100% + 8px);padding:6px 10px 6px 9px;border-radius:8px;background:var(--ed-white);white-space:nowrap}
.ed-devices--flip > .ed-cap{right:auto;left:0}
.ed-devices > .ed-cap .ed-label{font-size:10.5px;letter-spacing:.07em;gap:8px;color:var(--ed-ink-2)}
.ed-devices > .ed-cap .ed-label::before{width:14px}

/* A Client Platform screen in a frame, with its line under it. */
.ed-platform{display:grid;gap:var(--ed-3)}

/* ------------------------------------------------------------ 4. the pairing
   A photograph of a business at work, and the real website PrimeStart built
   for a business like it, standing in the part of the frame the photograph
   leaves empty. Under it, one line: the switch, and the note that says which
   half is real. The switch is radio buttons: no script. */
.ed-pairing{position:relative;min-width:0}
.ed-pairing-in{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);opacity:0}
.ed-pairing-stage{display:grid}
.ed-pair{position:relative;grid-area:1/1;margin:0;min-width:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.ed-pairing--single .ed-pair,
.ed-pairing-in:nth-of-type(1):checked ~ .ed-pairing-stage .ed-pair:nth-of-type(1),
.ed-pairing-in:nth-of-type(2):checked ~ .ed-pairing-stage .ed-pair:nth-of-type(2),
.ed-pairing-in:nth-of-type(3):checked ~ .ed-pairing-stage .ed-pair:nth-of-type(3),
.ed-pairing-in:nth-of-type(4):checked ~ .ed-pairing-stage .ed-pair:nth-of-type(4){opacity:1;visibility:visible;transition-delay:0s}
.ed-pair-photo{overflow:hidden;background:var(--ed-navy-50);aspect-ratio:5/4}
.ed-pair-photo .ed-photo{height:100%}
.ed-pair-devices{position:absolute;z-index:1;bottom:clamp(20px,3vw,40px);width:min(var(--ed-dev,50%),440px);right:clamp(28px,4.5vw,64px)}
.ed-pair--left .ed-pair-devices{right:auto;left:clamp(28px,4.5vw,64px)}

.ed-pairing-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--ed-5);padding-top:6px}
.ed-pairing-switch{display:flex;flex-wrap:wrap;gap:0 var(--ed-5)}
.ed-pairing-switch label{
  position:relative;display:inline-flex;align-items:center;min-height:44px;cursor:pointer;
  font-family:var(--ed-sans);font-size:14px;font-weight:700;letter-spacing:-.005em;line-height:1;color:var(--ed-mute);transition:color .2s ease;
}
.ed-pairing-switch label::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--ed-orange);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ed-ease)}
.ed-pairing-switch label:hover{color:var(--ed-ink)}
.ed-pairing-in:nth-of-type(1):checked ~ .ed-pairing-foot label:nth-of-type(1),
.ed-pairing-in:nth-of-type(2):checked ~ .ed-pairing-foot label:nth-of-type(2),
.ed-pairing-in:nth-of-type(3):checked ~ .ed-pairing-foot label:nth-of-type(3),
.ed-pairing-in:nth-of-type(4):checked ~ .ed-pairing-foot label:nth-of-type(4){color:var(--ed-ink)}
.ed-pairing-in:nth-of-type(1):checked ~ .ed-pairing-foot label:nth-of-type(1)::after,
.ed-pairing-in:nth-of-type(2):checked ~ .ed-pairing-foot label:nth-of-type(2)::after,
.ed-pairing-in:nth-of-type(3):checked ~ .ed-pairing-foot label:nth-of-type(3)::after,
.ed-pairing-in:nth-of-type(4):checked ~ .ed-pairing-foot label:nth-of-type(4)::after{transform:scaleX(1)}
.ed-pairing-in:nth-of-type(1):focus-visible ~ .ed-pairing-foot label:nth-of-type(1),
.ed-pairing-in:nth-of-type(2):focus-visible ~ .ed-pairing-foot label:nth-of-type(2),
.ed-pairing-in:nth-of-type(3):focus-visible ~ .ed-pairing-foot label:nth-of-type(3),
.ed-pairing-in:nth-of-type(4):focus-visible ~ .ed-pairing-foot label:nth-of-type(4){outline:2px solid var(--ed-ink);outline-offset:2px;border-radius:var(--ed-r-sm)}
.ed-pairing-note{margin:0;font-size:12.5px;line-height:1.4;color:var(--ed-mute);padding-block:6px}
@media (max-width:760px){
  .ed-pair-photo{aspect-ratio:4/5}
  /* On a phone the screens hang below the photograph's edge, so they cover less of the person in it. */
  .ed-pair-devices{width:calc(var(--ed-dev,50%) + 8%);right:16px;bottom:-34px}
  .ed-pair--left .ed-pair-devices{left:22px}
  .ed-pairing-stage{padding-bottom:58px}
  .ed-pairing-foot{padding-inline:var(--ed-gut)}
  .ed-pairing-switch{gap:0 var(--ed-4)}
}
@media (max-width:380px){
  .ed-pairing-switch{gap:0 12px}
  .ed-pairing-switch label{font-size:13px}
}

/* ------------------------------------------------------------ 5. the promise row
   Three promises, in the order the whole site keeps. Each is a link to the
   part of the page that proves it. Numbered, never ticked. */
.ed-promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ed-line-2)}
.ed-promises li{border-left:1px solid var(--ed-line)}
.ed-promises li:first-child{border-left:0}
.ed-promises a{
  display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start;height:100%;padding:14px 14px 4px;
  font-family:var(--ed-sans);font-size:15px;font-weight:700;letter-spacing:-.03em;line-height:1.3;color:var(--ed-ink);text-decoration:none;
}
.ed-promises li:first-child a{padding-left:0}
.ed-promises-n{font-family:var(--ed-sans);font-size:15px;font-weight:800;line-height:1.3;color:var(--ed-orange-dk);font-feature-settings:"tnum" 1}
.ed-promises-t{display:block}
.ed-promises .ed-i{grid-column:2;margin-top:6px;color:var(--ed-mute);transition:transform .28s var(--ed-ease),color .2s ease}
.ed-promises a:hover .ed-i{transform:translateY(3px);color:var(--ed-orange-dk)}
.ed-promises a:focus-visible{outline:2px solid var(--ed-ink);outline-offset:-2px;border-radius:var(--ed-r-sm)}
.ed-promises--dark{border-top-color:rgba(255,255,255,.28)}
.ed-promises--dark li{border-left-color:rgba(255,255,255,.16)}
.ed-promises--dark a{color:#fff}
.ed-promises--dark .ed-promises-n{color:#F2A566}
.ed-promises--dark .ed-i{color:var(--ed-on-night-2)}
.ed-promises--dark a:focus-visible{outline-color:#fff}
@media (max-width:560px){
  .ed-promises{grid-template-columns:1fr;border-top:0}
  .ed-promises li{border-left:0;border-top:1px solid var(--ed-line-2)}
  .ed-promises--dark li{border-top-color:rgba(255,255,255,.2)}
  .ed-promises a{grid-template-columns:auto 1fr auto;align-items:center;min-height:52px;padding:6px 0;font-size:16px}
  .ed-promises .ed-i{grid-column:3;margin-top:0}
}

/* ------------------------------------------------------------ 6. showcase, annotated site, compare */
.ed-showcase{margin:0;display:grid;gap:var(--ed-6)}
.ed-showcase .ed-devices{margin-right:5%}
.ed-showcase .ed-devices--solo{margin-right:0}
.ed-showcase-cap{display:grid;gap:4px;justify-items:start;padding-top:var(--ed-4);border-top:1px solid var(--ed-line-2)}
.ed-showcase-name{margin:0;font-family:var(--ed-sans);font-size:19px;font-weight:800;letter-spacing:-.022em;line-height:1.2;color:var(--ed-ink)}
.ed-showcase-what{margin:0;font-size:15px;line-height:1.45;color:var(--ed-ink-2)}
.ed-showcase-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-family:var(--ed-sans);font-size:14.5px;font-weight:700;color:var(--ed-ink);text-decoration:underline;text-decoration-color:var(--ed-line-2);text-underline-offset:6px}
.ed-showcase-link:hover{text-decoration-color:var(--ed-orange);color:var(--ed-ink)}
.ed-showcase-link:focus-visible{outline:2px solid var(--ed-ink);outline-offset:3px;border-radius:var(--ed-r-sm)}
.ed-showcase-link svg{width:14px;height:14px}

/* Annotated: numbered markers ON the things they name, and the key beside the picture. */
.ed-annotated{margin:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--ed-7);align-items:center}
.ed-annotated-frame{display:grid;gap:var(--ed-3);min-width:0}
.ed-annotated-dot,.ed-annotated-key li::before{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ed-orange);color:var(--ed-ink);
  font-family:var(--ed-sans);font-size:13px;font-weight:800;line-height:1;font-feature-settings:"tnum" 1;
}
.ed-annotated-dot{position:absolute;z-index:1;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,255,255,.92),0 6px 14px rgba(11,22,34,.35)}
.ed-annotated-key{list-style:none;margin:0;padding:0;counter-reset:ed-note}
.ed-annotated-key li{counter-increment:ed-note;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--ed-line-2);font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--ed-ink)}
.ed-annotated-key li:last-child{border-bottom:1px solid var(--ed-line-2)}
.ed-annotated-key li::before{content:counter(ed-note)}
@media (max-width:900px){
  .ed-annotated{grid-template-columns:1fr;gap:var(--ed-5)}
  .ed-annotated-dot{width:22px;height:22px;font-size:11px;box-shadow:0 0 0 2px rgba(255,255,255,.92)}
  .ed-annotated-key li{font-size:16px;padding:11px 0}
}

/* Compare: the old homepage and the new one in one frame.
   Default (no script, and every phone): a Before / After switch.
   .is-live (added by ed.js on a wider screen): a divider you drag. */
.ed-compare{position:relative;margin:0}
.ed-compare-in{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);opacity:0}
.ed-compare--case{max-width:960px}
.ed-compare--compact{max-width:640px}
.ed-compare-stage{position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--ed-white)}
.ed-compare--case .ed-compare-stage,.ed-compare--compact .ed-compare-stage{aspect-ratio:16/10}
.ed-compare-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ed-compare-before{clip-path:inset(0 100% 0 0)}
.ed-compare-in--before:checked ~ .ed-browser .ed-compare-before{clip-path:inset(0)}
.ed-compare-tag{
  position:absolute;z-index:2;top:12px;padding:6px 10px;border-radius:8px;background:var(--ed-night);color:#fff;
  font-family:var(--ed-sans);font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1;text-transform:uppercase;pointer-events:none;
}
.ed-compare-tag--before{left:12px;display:none}
.ed-compare-tag--after{right:12px;background:var(--ed-white);color:var(--ed-ink)}
.ed-compare-in--before:checked ~ .ed-browser .ed-compare-tag--before{display:block}
.ed-compare-in--before:checked ~ .ed-browser .ed-compare-tag--after{display:none}
.ed-compare-range,.ed-compare-handle{display:none}

.ed-compare-switch{display:inline-flex;gap:var(--ed-5);margin-bottom:var(--ed-2)}
.ed-compare-switch label{position:relative;display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-family:var(--ed-sans);font-size:15px;font-weight:700;color:var(--ed-mute)}
.ed-compare-switch label::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--ed-orange);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ed-ease)}
.ed-compare-in--before:checked ~ .ed-compare-switch label:nth-of-type(1),
.ed-compare-in--after:checked ~ .ed-compare-switch label:nth-of-type(2){color:var(--ed-ink)}
.ed-compare-in--before:checked ~ .ed-compare-switch label:nth-of-type(1)::after,
.ed-compare-in--after:checked ~ .ed-compare-switch label:nth-of-type(2)::after{transform:scaleX(1)}
.ed-compare-in--before:focus-visible ~ .ed-compare-switch label:nth-of-type(1),
.ed-compare-in--after:focus-visible ~ .ed-compare-switch label:nth-of-type(2){outline:2px solid var(--ed-ink);outline-offset:2px;border-radius:var(--ed-r-sm)}

.ed-compare.is-live .ed-compare-switch{display:none}
.ed-compare.is-live .ed-compare-before{clip-path:inset(0 calc(100% - var(--ed-pos)) 0 0)}
.ed-compare.is-live .ed-compare-tag{display:block}
.ed-compare.is-live .ed-compare-range{display:block;position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ed-compare.is-live .ed-compare-handle{display:block;position:absolute;z-index:2;top:0;bottom:0;left:var(--ed-pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(11,22,34,.3);pointer-events:none}
.ed-compare-handle i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--ed-white);box-shadow:0 0 0 1px rgba(11,22,34,.3),0 10px 24px -8px rgba(11,22,34,.55)}
.ed-compare-handle i::before,.ed-compare-handle i::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-left:2px solid var(--ed-ink);border-bottom:2px solid var(--ed-ink)}
.ed-compare-handle i::before{left:11px;transform:rotate(45deg)}
.ed-compare-handle i::after{right:11px;transform:rotate(-135deg)}
.ed-compare-range:focus-visible ~ .ed-compare-handle i{outline:3px solid var(--ed-orange);outline-offset:3px}
.ed-compare-cap{margin-top:var(--ed-4);font-size:15.5px;line-height:1.5;color:var(--ed-ink-2);max-width:62ch}

/* ------------------------------------------------------------ 7. the thread
   A phone drawn after the Client Platform's own "Request a change" screens.
   The chips are radio buttons; CSS swaps the request. ed.js plays the four
   statuses once (.is-play); the resting state is the finished one. */
.ed-thread{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);grid-template-areas:"device side" "device after";column-gap:var(--ed-8);row-gap:var(--ed-6);align-items:start}
.ed-thread-in{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);opacity:0}
.ed-thread-device{grid-area:device;display:grid;gap:var(--ed-4)}
.ed-thread-side{grid-area:side;min-width:0}
.ed-thread-after{grid-area:after;min-width:0}
.ed-thread-h{margin:0 0 var(--ed-4);font-family:var(--ed-sans);font-size:var(--ed-h3);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--ed-ink)}
.ed-thread-chips{display:flex;flex-wrap:wrap;gap:8px}
.ed-thread-chips label{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--ed-line-2);border-radius:var(--ed-r-sm);background:transparent;cursor:pointer;
  font-family:var(--ed-sans);font-size:15px;font-weight:600;line-height:1.3;color:var(--ed-ink-2);transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.ed-thread-chips label:hover{border-color:var(--ed-ink);color:var(--ed-ink)}
.ed-thread-in:nth-of-type(1):checked ~ .ed-thread-side label:nth-of-type(1),
.ed-thread-in:nth-of-type(2):checked ~ .ed-thread-side label:nth-of-type(2),
.ed-thread-in:nth-of-type(3):checked ~ .ed-thread-side label:nth-of-type(3),
.ed-thread-in:nth-of-type(4):checked ~ .ed-thread-side label:nth-of-type(4){background:var(--ed-ink);border-color:var(--ed-ink);color:#fff}
.ed-thread-in:nth-of-type(1):focus-visible ~ .ed-thread-side label:nth-of-type(1),
.ed-thread-in:nth-of-type(2):focus-visible ~ .ed-thread-side label:nth-of-type(2),
.ed-thread-in:nth-of-type(3):focus-visible ~ .ed-thread-side label:nth-of-type(3),
.ed-thread-in:nth-of-type(4):focus-visible ~ .ed-thread-side label:nth-of-type(4){outline:2px solid var(--ed-ink);outline-offset:3px}

/* The screen. Sizes are in em of the phone's own font size, so the drawing scales with the frame. */
.ed-thread .ed-phone{font-size:clamp(11.5px,3.8vw,13.5px)}
.ed-tp{position:absolute;inset:0;display:flex;flex-direction:column;padding:13% 7% 6%;background:var(--ed-white);font-family:var(--ed-sans);color:var(--ed-ink);text-align:left}
.ed-tp p{margin:0}
.ed-tp-bar{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:.9em;border-bottom:1px solid var(--ed-line);font-size:1em}
.ed-tp-bar b{font-weight:800;letter-spacing:-.03em;font-size:1.15em}
.ed-tp-bar span{font-weight:700;color:var(--ed-ink-2);border-bottom:2px solid var(--ed-orange);padding-bottom:.25em}
.ed-tp-k{margin-top:1.5em !important;font-size:.78em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ed-orange-dk)}
.ed-tp-req{display:grid;margin-top:.5em;min-height:5.4em}
.ed-tp-req p{grid-area:1/1;font-size:1.5em;font-weight:800;letter-spacing:-.03em;line-height:1.15;opacity:0;visibility:hidden}
.ed-thread-in:nth-of-type(1):checked ~ .ed-thread-device .ed-tp-req p:nth-of-type(1),
.ed-thread-in:nth-of-type(2):checked ~ .ed-thread-device .ed-tp-req p:nth-of-type(2),
.ed-thread-in:nth-of-type(3):checked ~ .ed-thread-device .ed-tp-req p:nth-of-type(3),
.ed-thread-in:nth-of-type(4):checked ~ .ed-thread-device .ed-tp-req p:nth-of-type(4){opacity:1;visibility:visible}
.ed-tp-states{list-style:none;margin:1.2em 0 0;padding:0;display:grid}
.ed-tp-states li{position:relative;display:grid;gap:.25em;padding:0 0 1.5em 1.9em}
.ed-tp-states li::before{content:"";position:absolute;left:.25em;top:.3em;width:.7em;height:.7em;border-radius:50%;background:var(--ed-ink)}
.ed-tp-states li::after{content:"";position:absolute;left:.57em;top:1.2em;bottom:-.1em;width:1px;background:var(--ed-line-2)}
.ed-tp-states li:last-child{padding-bottom:0}
.ed-tp-states li:last-child::after{display:none}
.ed-tp-states b{font-size:1em;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.ed-tp-states span{font-size:.86em;line-height:1.4;color:var(--ed-ink-2)}
.ed-tp-states li.is-done::before{background:var(--ed-orange)}
/* The platform's own bottom bar, drawn quietly: it is what makes the screen read as the real product. */
.ed-tp-tabs{display:flex;justify-content:space-between;margin:auto -2% 0 !important;padding-top:1em;border-top:1px solid var(--ed-line);font-size:.78em;font-weight:600;color:var(--ed-mute)}
.ed-tp-tabs .is-on{color:var(--ed-ink);font-weight:800}
.ed-tp-states li.is-done b{justify-self:start;padding:.3em .7em;margin:-.3em 0 0 -.1em;border-radius:99px;background:var(--ed-ink);color:#fff}
@keyframes ed-state{from{opacity:.18}to{opacity:1}}
.ed-thread.is-play .ed-tp-states li{animation:ed-state .5s ease-out both}
.ed-thread.is-play .ed-tp-states li:nth-child(1){animation-delay:.3s}
.ed-thread.is-play .ed-tp-states li:nth-child(2){animation-delay:1.2s}
.ed-thread.is-play .ed-tp-states li:nth-child(3){animation-delay:2.1s}
.ed-thread.is-play .ed-tp-states li:nth-child(4){animation-delay:3s}
.ed-thread--compact{grid-template-columns:minmax(0,240px) minmax(0,1fr);column-gap:var(--ed-7)}
@media (max-width:900px){
  .ed-thread,.ed-thread--compact{grid-template-columns:1fr;grid-template-areas:"side" "device" "after";row-gap:var(--ed-6)}
  .ed-thread-device{justify-items:center}
  .ed-thread .ed-phone{width:min(78%,300px)}
  .ed-thread-device .ed-cap{justify-self:center}
}

/* ------------------------------------------------------------ 8. ownership timeline
   One line with a tick for every month of the term. The stamp lands on the
   last month; a lighter line carries on. The upfront route is the same line
   with the stamp near the start, so the two can be compared at a glance.
   The term is the one the terms name (12): the caption grid below assumes it,
   and inc/offer.php serves no ownership wording for any other term. */
.ed-own-head{max-width:760px}
.ed-tl-group{display:grid;gap:clamp(36px,4vw,52px);margin-top:clamp(32px,4vw,48px)}
.ed-tl{min-width:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,80px);align-items:end}
.ed-tl-route{grid-column:1;grid-row:1}
.ed-tl-track{grid-column:1/-1;grid-row:2}
.ed-tl-caps{grid-column:1/-1;grid-row:3}
.ed-tl p{margin:0}
.ed-tl-route{display:grid;gap:4px}
.ed-tl-route b{font-size:var(--ed-h3);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--ed-ink)}
.ed-tl-route span{font-size:16px;color:var(--ed-ink-2)}
.ed-tl-track{position:relative;display:grid;grid-template-columns:repeat(var(--ed-months,12),minmax(0,1fr)) 5fr;align-items:end;height:104px}
.ed-tl-track i{position:relative;height:12px;border-right:1.5px solid var(--ed-ink);border-bottom:2px solid var(--ed-ink)}
.ed-tl-track i:first-child::before{content:"";position:absolute;left:-1px;bottom:-7px;width:12px;height:12px;border-radius:50%;background:var(--ed-ink)}
.ed-tl-track u{position:relative;height:12px;border-bottom:2px dashed var(--ed-line-2);text-decoration:none}
.ed-tl-track u::after{content:"";position:absolute;right:1px;bottom:-6px;width:9px;height:9px;border-top:2px solid var(--ed-mute);border-right:2px solid var(--ed-mute);transform:rotate(45deg)}
.ed-tl--upfront .ed-tl-track i{border-bottom-color:var(--ed-ink)}

/* The captions sit under the part of the line they describe (17 columns: 12 months and the 5 of the tail). */
.ed-tl-caps{list-style:none;margin:var(--ed-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(17,minmax(0,1fr));column-gap:0;align-items:start}
.ed-tl-caps li{display:grid;gap:4px;min-width:0}
.ed-tl-caps b{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--ed-mute)}
.ed-tl-caps span{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ed-ink)}
.ed-tl-c1{grid-column:1/span 3}
.ed-tl-c2{grid-column:4/span 6;text-align:center;justify-items:center}
.ed-tl-c3{grid-column:10/span 5;text-align:center;justify-items:center}
.ed-tl-c4{grid-column:15/span 3}
.ed-tl-c4 span{font-weight:700;color:var(--ed-ink-2)}
.ed-tl--upfront .ed-tl-c1{grid-column:1/span 4}
.ed-tl--upfront .ed-tl-c2{grid-column:5/span 8}
.ed-tl-caps li.is-yours b{color:var(--ed-orange-dk)}
/* The sentence that states the route's claim sits beside its name, above the line: read first, then seen. */
.ed-tl-d{grid-column:2;grid-row:1;font-size:16.5px;line-height:1.55;color:var(--ed-ink-2);max-width:62ch}

/* The conditions. Reading size, in the open. */
.ed-own-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ed-5) clamp(24px,4vw,64px);margin:clamp(36px,4vw,52px) 0 0;padding-top:var(--ed-6);border-top:1px solid var(--ed-line-2)}
.ed-own-terms dt{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--ed-ink)}
.ed-own-terms dd{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--ed-ink-2);max-width:44ch}

/* Compact: the promise beside its line, and the agreement sentence, always. */
.ed-own--compact > .ed-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--ed-8);row-gap:var(--ed-5);align-items:end}
.ed-own--compact .ed-tl-group{margin-top:0}
.ed-own--compact .ed-tl{display:block}
.ed-own--compact .ed-tl-track{height:76px}
.ed-own--compact .ed-tl-caps span{font-size:15px}
.ed-own-agreement{grid-column:2;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--ed-5);font-size:15.5px;line-height:1.55;color:var(--ed-ink-2)}

@media (max-width:900px){
  .ed-own-terms{grid-template-columns:1fr;gap:var(--ed-5)}
  .ed-own--compact > .ed-wrap{grid-template-columns:1fr}
  .ed-own-agreement{grid-column:1}
  /* The line turns upright: a rule down the left, a dot for each moment, the stamp on the one that matters. */
  .ed-tl{display:block}
  .ed-tl-d{margin-top:var(--ed-5) !important;max-width:none}
  .ed-tl-track{display:none}
  .ed-tl-caps,.ed-tl--upfront .ed-tl-caps{grid-template-columns:1fr;margin:var(--ed-5) 0 0 6px;border-left:2px solid var(--ed-ink)}
  .ed-tl-caps li,.ed-tl--upfront .ed-tl-caps li{position:relative;grid-column:1;text-align:left;justify-items:start;padding:0 0 var(--ed-5) var(--ed-5)}
  .ed-tl-caps li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ed-ink)}
  .ed-tl-caps li.is-yours::before{background:var(--ed-orange)}
  .ed-tl-caps li:last-child{padding-bottom:0}
  .ed-tl-caps li.ed-tl-c4::before{background:var(--ed-white);border:2px solid var(--ed-mute);box-sizing:border-box}
}

/* ------------------------------------------------------------ 9. the quote
   The price written out like a proper quote. The sheet is a real object, so
   it is allowed a surface. Inputs sit before the sheet; CSS reads them. */
.ed-quote{position:relative;min-width:0}
.ed-quote-in{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);opacity:0}
.ed-quote-sheet{background:#fff;color:var(--ed-ink);border-radius:var(--ed-r-sm);padding:clamp(20px,2.8vw,38px);box-shadow:0 0 0 1px var(--ed-line),0 34px 60px -44px rgba(0,0,0,.7)}
.ed-quote-sheet p{margin:0}
.ed-quote-top{display:grid;gap:6px;padding-bottom:var(--ed-5);border-bottom:2px solid var(--ed-ink)}
.ed-quote-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ed-mute)}
.ed-quote-h{margin:0;font-family:var(--ed-sans);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--ed-ink);}
.ed-quote-sub{font-size:15.5px;color:var(--ed-ink-2)}
.ed-quote-lines{list-style:none;margin:var(--ed-4) 0 0;padding:0;display:grid;gap:7px}
.ed-quote-lines li{font-size:16px;line-height:1.35;color:var(--ed-ink)}
.ed-quote-lines b{font-size:13.5px;font-weight:700;color:var(--ed-mute)}
.ed-quote-seo{margin-top:var(--ed-4);padding-top:var(--ed-4);border-top:1px solid var(--ed-line-2);cursor:pointer;font-size:16px;font-weight:700;line-height:1.35;color:var(--ed-ink)}
.ed-quote-seo > span{display:inline-flex;align-items:center;gap:10px}
.ed-quote-seo b{font-size:15px;font-weight:700}
.ed-quote-box{position:relative;flex:none;width:20px;height:20px;border:1.5px solid var(--ed-ink);border-radius:8px;background:#fff}
.ed-quote-in--seo:checked ~ .ed-quote-sheet .ed-quote-box::after{content:"";position:absolute;inset:3px;border-radius:1px;background:var(--ed-ink)}
.ed-quote-in--seo:focus-visible ~ .ed-quote-sheet .ed-quote-box{outline:2px solid var(--ed-ink);outline-offset:3px}

.ed-quote-pay{margin:var(--ed-5) 0 0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:0 var(--ed-5);border-bottom:1px solid var(--ed-line-2)}
.ed-quote-pay legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.ed-quote-pay label{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:46px;cursor:pointer;font-size:15.5px;font-weight:700;color:var(--ed-mute)}
.ed-quote-pay label em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ed-orange-dk)}
.ed-quote-pay label::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ed-ink);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ed-ease)}
.ed-quote-in--m:checked ~ .ed-quote-sheet .ed-quote-pay-m,
.ed-quote-in--u:checked ~ .ed-quote-sheet .ed-quote-pay-u{color:var(--ed-ink)}
.ed-quote-in--m:checked ~ .ed-quote-sheet .ed-quote-pay-m::after,
.ed-quote-in--u:checked ~ .ed-quote-sheet .ed-quote-pay-u::after{transform:scaleX(1)}
.ed-quote-in--m:focus-visible ~ .ed-quote-sheet .ed-quote-pay-m,
.ed-quote-in--u:focus-visible ~ .ed-quote-sheet .ed-quote-pay-u{outline:2px solid var(--ed-ink);outline-offset:2px;border-radius:var(--ed-r-sm)}

/* Four totals, all the offer's; exactly one shows. Without the add-on tick box there are two. */
.ed-quote-totals{display:grid;margin-top:var(--ed-5)}
.ed-quote-t{grid-area:1/1;display:none;gap:4px;align-content:start}
.ed-quote--plain .ed-quote-in--m:checked ~ .ed-quote-sheet .ed-quote-t--m,
.ed-quote--plain .ed-quote-in--u:checked ~ .ed-quote-sheet .ed-quote-t--u,
.ed-quote-in--m:checked ~ .ed-quote-in--seo:not(:checked) ~ .ed-quote-sheet .ed-quote-t--m,
.ed-quote-in--m:checked ~ .ed-quote-in--seo:checked ~ .ed-quote-sheet .ed-quote-t--ms,
.ed-quote-in--u:checked ~ .ed-quote-in--seo:not(:checked) ~ .ed-quote-sheet .ed-quote-t--u,
.ed-quote-in--u:checked ~ .ed-quote-in--seo:checked ~ .ed-quote-sheet .ed-quote-t--us{display:grid}
.ed-quote-fig{font-size:17px;color:var(--ed-ink-2)}
.ed-quote-fig b{font-family:var(--ed-sans);font-size:clamp(2.6rem,2rem + 2.4vw,4rem);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ed-ink);margin-right:4px;}
.ed-quote-note{font-size:15.5px;line-height:1.5;color:var(--ed-ink-2);min-height:3em;max-width:48ch}
@media (max-width:420px){
  /* On the narrowest phones a leader has no room: the label takes the line and the figure sits under it, at the right. */
  .ed-quote-seo,.ed-quote-after .ed-leader{flex-wrap:wrap;gap:2px 10px}
  .ed-quote-seo > span,.ed-quote-after dt{flex:1 1 100%}
  .ed-quote-seo > i,.ed-quote-after .ed-leader > i{min-width:0}
}
.ed-quote-after{margin:var(--ed-5) 0 0;padding-top:var(--ed-4);border-top:1px solid var(--ed-line-2);display:grid;gap:9px}
.ed-quote-after dt{font-size:15.5px;color:var(--ed-ink-2)}
.ed-quote-after dd{font-size:15.5px;font-weight:700;color:var(--ed-ink)}
.ed-quote-after-s{display:none}
.ed-quote-in--seo:checked ~ .ed-quote-sheet .ed-quote-after-s{display:flex}
.ed-quote-in--seo:checked ~ .ed-quote-sheet .ed-quote-after-w{display:none}
.ed-quote-own{display:flex;gap:10px;align-items:flex-start;margin-top:var(--ed-5) !important;padding-top:var(--ed-4);border-top:2px solid var(--ed-ink);font-size:15.5px;font-weight:600;line-height:1.5;color:var(--ed-ink)}
.ed-quote-own .ed-i{margin-top:2px}
.ed-quote-actions{margin-top:var(--ed-5)}

/* The one-line quote, for pages where the price is a cue and not the subject. */
.ed-quote-line{display:grid;gap:var(--ed-3);max-width:640px}
.ed-quote-line .ed-leader{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ed-ink)}
.ed-quote-line .ed-leader b{font-family:var(--ed-sans);font-size:1.4em;font-weight:800;}
.ed-quote-line-terms{margin:0;font-size:15.5px;line-height:1.55;color:var(--ed-ink-2)}
.ed-quote-line .ed-actions{margin-top:var(--ed-3)}

/* ------------------------------------------------------------ 10. steps and artefacts
   Each step stands its real artefact on a ground line. Never an icon in a card. */
.ed-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--ed-6)}
.ed-step{display:grid;grid-template-rows:auto 1fr;min-width:0}
.ed-step-art{display:flex;align-items:flex-end;height:280px;padding:0 var(--ed-4) 0 0;border-bottom:1.5px solid var(--ed-ink);overflow:hidden}
.ed-step-art > *{flex:none}
.ed-step-art .ed-devices{width:min(100%,250px);margin:0 6% 22px 0}
.ed-step-art .ed-platform{width:132px;margin-bottom:-36px}
.ed-step-copy{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:8px;align-content:start;padding-top:var(--ed-4)}
.ed-step-n{grid-row:1/span 2;font-family:var(--ed-sans);font-size:44px;font-weight:800;line-height:.95;color:var(--ed-ink);font-feature-settings:"lnum" 1}
.ed-step-t{margin:0;align-self:center;font-family:var(--ed-sans);font-size:18px;font-weight:800;letter-spacing:-.022em;line-height:1.2;color:var(--ed-ink)}
.ed-step-d{grid-column:2;margin:0;font-size:15.5px;line-height:1.55;color:var(--ed-ink-2)}
.ed-art-form{width:min(100%,210px);margin-bottom:18px;padding:16px 16px 14px;border-radius:var(--ed-r-sm);background:#fff;box-shadow:0 0 0 1px var(--ed-line-2),0 20px 34px -24px rgba(11,22,34,.5);display:grid;gap:11px}
.ed-art-form p{margin:0;display:grid;gap:5px}
.ed-art-form span{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ed-ink-2)}
.ed-art-form i{display:block;height:26px;border:1px solid var(--ed-line-2);border-radius:8px;background:#fff}
.ed-art-form-drop{place-items:center;height:44px;border:1.5px dashed var(--ed-line-2);border-radius:8px}
.ed-art-form-drop span{font-weight:600;color:var(--ed-mute)}
@media (max-width:1040px){
  .ed-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--ed-7)}
}
@media (max-width:620px){
  /* On a phone each step is a row: the artefact small at the side, the words beside it. */
  .ed-steps{grid-template-columns:1fr;row-gap:0}
  .ed-step{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto;column-gap:var(--ed-4);align-items:start;padding-block:var(--ed-5);border-top:1px solid var(--ed-line-2)}
  .ed-step:last-child{border-bottom:1px solid var(--ed-line-2)}
  .ed-step-art{height:132px;padding:0;border-bottom:0;justify-content:center;align-items:flex-start}
  .ed-step-art .ed-devices{width:96px;margin:10px 6px 0 0}
  .ed-step-art .ed-platform{width:72px;margin-bottom:0}
  .ed-art-form{width:96px;margin:0;padding:9px;gap:6px}
  .ed-art-form span{font-size:7.5px}
  .ed-art-form i{height:11px}
  .ed-art-form-drop{height:20px}
  .ed-step-copy{padding-top:0}
  .ed-step-n{font-size:34px}
}
@media (max-width:380px){
  .ed-step{grid-template-columns:76px minmax(0,1fr);column-gap:var(--ed-3)}
  .ed-step-art .ed-devices{width:70px}
  .ed-step-art .ed-platform{width:56px}
  .ed-art-form{width:72px;padding:7px;gap:5px}
}

/* ------------------------------------------------------------ 11. the strip */
.ed-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--ed-strip,8),minmax(0,1fr));gap:4px}
.ed-strip a{position:relative;display:block;overflow:hidden;color:var(--ed-ink);text-decoration:none}
.ed-strip .ed-photo{aspect-ratio:3/4.4;background:var(--ed-navy-50)}
.ed-strip .ed-photo img{transition:transform .6s var(--ed-ease)}
.ed-strip a:hover .ed-photo img{transform:scale(1.04)}
.ed-strip-cap{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:9px 12px 8px;background:var(--ed-white);border-radius:0 4px 0 0;font-family:var(--ed-sans);font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ed-strip-cap .ed-i{color:var(--ed-mute);transition:transform .28s var(--ed-ease)}
.ed-strip a:hover .ed-strip-cap .ed-i{transform:translateX(3px);color:var(--ed-orange-dk)}
.ed-strip a:focus-visible{outline:3px solid var(--ed-ink);outline-offset:-3px}
@media (max-width:1100px){
  .ed-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ed-strip .ed-photo{aspect-ratio:1/1.1}
}
@media (max-width:560px){
  /* On a phone the strip is a rail: two and a bit in view, the rest a swipe away, instead of four more screens of scrolling. */
  .ed-strip{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--ed-gut);scroll-padding-inline:var(--ed-gut)}
  .ed-strip::-webkit-scrollbar{display:none}
  .ed-strip li{flex:0 0 44%;scroll-snap-align:start}
  .ed-strip .ed-photo{aspect-ratio:3/4}
  .ed-strip-cap{font-size:13.5px;padding:8px 10px 7px}
}

/* ------------------------------------------------------------ 12. questions */
.ed-faq{border-top:1px solid var(--ed-ink)}
.ed-q{border-bottom:1px solid var(--ed-line-2)}
.ed-q summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ed-5);min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font-family:var(--ed-sans);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--ed-ink)}
.ed-q summary::-webkit-details-marker{display:none}
.ed-q summary i{position:relative;flex:none;width:16px;height:16px}
.ed-q summary i::before,.ed-q summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1.6px;background:var(--ed-ink);transition:transform .25s var(--ed-ease)}
.ed-q summary i::after{transform:rotate(90deg)}
.ed-q[open] summary i::after{transform:rotate(0)}
.ed-q summary:focus-visible{outline:2px solid var(--ed-ink);outline-offset:2px;border-radius:var(--ed-r-sm)}
.ed-a{padding:0 var(--ed-7) var(--ed-5) 0}
.ed-a p{margin:0;font-size:var(--ed-body);line-height:1.6;color:var(--ed-ink-2);max-width:64ch}
.ed-a a{color:var(--ed-ink);text-decoration:underline;text-decoration-color:var(--ed-orange);text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .ed-promises .ed-i,.ed-pair,.ed-pairing-switch label,.ed-pairing-switch label::after,.ed-compare-switch label::after,
  .ed-thread-chips label,.ed-quote-pay label::after,.ed-strip .ed-photo img,.ed-strip-cap .ed-i,.ed-q summary i::before,.ed-q summary i::after{transition:none}
  .ed-promises a:hover .ed-i,.ed-strip a:hover .ed-photo img,.ed-strip a:hover .ed-strip-cap .ed-i{transform:none}
  .ed-thread.is-play .ed-tp-states li{animation:none}
}

/* ============================================================
   13  THE REBUILD (12 October 2026): laptop, chip
   ============================================================ */

/* The laptop: a thin dark lid and a light base with its notch. Drawn, not photographed, so any real site fits it. */
.ed-laptop{position:relative;width:100%}
.ed-laptop-lid{margin:0 7%;padding:2.4% 2.4% 2.8%;border-radius:14px 14px 0 0;background:var(--ed-night);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.ed-laptop-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#fff}
.ed-laptop-screen > img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ed-laptop-base{position:relative;height:0;padding-bottom:3.2%;border-radius:2px 2px 18px 18px;background:#D3D9E0;box-shadow:0 1px 0 #AEB7C1 inset,0 30px 44px -22px rgba(11,22,34,.6)}
.ed-laptop-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:40%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#B5BEC8}

/* The chip that says a screen is a real client's website. Navy on light, white on navy. */
.ed-chip{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px 7px 12px;border-radius:var(--ed-pill);background:var(--ed-ink);color:#fff;font-family:var(--ed-sans);font-size:12px;font-weight:800;letter-spacing:.01em;line-height:1.2;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(11,22,34,.6)}
.ed-chip::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ed-orange)}
.ed-on-navy .ed-chip{background:#fff;color:var(--ed-ink)}

/* ============================================================
   14  STAGE B (12 October 2026): Help me choose
   ============================================================ */

/* Help me choose: the trigger beside a sentence. */
.ed-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin:0;font-size:16px;font-weight:700;color:var(--ed-ink)}
.ed-help .ed-btn{min-height:46px}

/* ============================================================
   15  AFTER THE FIRST STAGING REVIEW (12 October 2026): compare bar, thread hint, final call to action
   ============================================================ */

/* Before / After live in the frame's bar, never on the client's site. */
.ed-compare-bar{gap:8px}
.ed-compare-bar .ed-compare-tag{position:static;display:inline-flex;align-items:center;height:18px;padding:0 9px;border-radius:var(--ed-pill);background:var(--ed-ink);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.08em;line-height:1;text-transform:uppercase}
.ed-compare-bar .ed-compare-tag--after{background:var(--ed-orange);color:var(--ed-ink)}
.ed-compare-bar span{transform:none}
.ed-compare .ed-compare-bar .ed-compare-tag{display:inline-flex;opacity:.35}
.ed-compare.is-live .ed-compare-bar .ed-compare-tag,
.ed-compare-in--before:checked ~ .ed-browser .ed-compare-tag--before,
.ed-compare-in--after:checked ~ .ed-browser .ed-compare-tag--after{opacity:1}

/* The thread says its chips can be tapped. */
.ed-thread-hint{margin:14px 0 0;font-size:13.5px;line-height:1.4;color:var(--ed-mute)}
.ed-on-navy .ed-thread-hint,.edh-care .ed-thread-hint{color:var(--ed-on-night-2)}

/* The final call to action. The photograph at full strength; the words never over a wash. */
.ed-final{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(520px,46vw,660px);background:var(--ed-white)}
.ed-final-photo{position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1}
.ed-final-in{width:100%;padding-block:clamp(48px,6vw,88px)}
.ed-final-copy{display:grid;gap:24px;justify-items:start;max-width:560px}
.ed-final .ed-h2{font-size:clamp(1.9rem,1.1rem + 2.2vw,3.1rem);color:#fff}
.ed-final .ed-h2 em{display:block;color:var(--ed-orange);text-wrap:balance}
.ed-final .ed-help{margin:0;justify-content:flex-start}
.ed-final-talk{margin:0;font-size:15px;color:var(--ed-on-night)}
.ed-final-talk a{font-weight:800;color:#fff;text-decoration:underline;text-decoration-color:var(--ed-orange);text-underline-offset:4px}
.ed-final-talk a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:4px}
/* panel: the photograph fills the right of the band; a solid navy panel overlaps its left edge. */
.ed-final--panel .ed-final-photo{left:30%}
.ed-final--panel .ed-final-copy{padding:clamp(28px,3.6vw,52px);border-radius:var(--ed-r-lg);background:var(--ed-ink);box-shadow:0 40px 70px -40px rgba(11,22,34,.7)}
/* wall: the words straight on a plain mid-dark wall of the photograph, white, no wash. */
.ed-final--wall .ed-final-copy{max-width:470px}
@media (max-width:760px){
  .ed-final{display:block;min-height:0;background:var(--ed-ink)}
  .ed-final-photo,.ed-final--panel .ed-final-photo{position:relative;inset:auto;z-index:0;aspect-ratio:16/10}
  .ed-final-in{padding-block:28px 40px}
  .ed-final-copy,.ed-final--panel .ed-final-copy{max-width:none;padding:0;background:none;box-shadow:none;justify-items:center;text-align:center}
  .ed-final .ed-actions{flex-direction:column;align-items:stretch;width:100%}
  .ed-final .ed-help .ed-btn{width:100%}
}

/* ============================================================
   16  THE TWO WEBSITES (final creative reset, 12 October 2026; inc/ed-pages-offer.php)
   Interim product presentation, inclusion icons, extras tiles, ownership lines. The homepage composition from the
   creative lead's Figma frames refines these.
   ============================================================ */
.ed-prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ed-prod{display:grid;align-content:start;justify-items:start;gap:12px;padding:clamp(24px,3vw,40px);border-radius:var(--ed-r);background:var(--ed-white);box-shadow:0 0 0 1px var(--ed-line)}
.ed-prod.is-recommended{box-shadow:0 0 0 1px var(--ed-line),var(--ed-shadow)}
.ed-prod p{margin:0}
.ed-prod-name{margin:0;font-size:var(--ed-h3);font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--ed-ink)}
.ed-prod-line{font-size:16.5px;line-height:1.55;color:var(--ed-ink-2);max-width:46ch}
.ed-prod-price{display:flex;align-items:baseline;gap:8px;color:var(--ed-mute);font-size:15px}
.ed-prod-price b{font-size:clamp(2rem,1.6rem + 1vw,2.5rem);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ed-ink)}
.ed-prod-monthly{font-size:15px;line-height:1.5;color:var(--ed-ink-2)}
.ed-prod-incl{font-size:15px;font-weight:600;color:var(--ed-green)}
.ed-prod .ed-btn{margin-top:8px}
@media (max-width:860px){.ed-prods{grid-template-columns:1fr}}

/* The inclusion icons: 24px, 1.5px stroke, ink, one detail in orange (green for security). */
.ed-ic{display:block;flex:none;color:var(--ed-ink)}
.ed-ic .ed-ic-a{stroke:var(--ed-orange)}
.ed-ic .ed-ic-a.ed-ic-g{stroke:var(--ed-green)}
.ed-ic circle.ed-ic-a{fill:var(--ed-orange);stroke:none}

/* Extras as calm tiles (.ed-xtiles; not .ed-extras, which is the Extras page's body class). */
.ed-xtiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.ed-xtile{display:grid;align-content:start;gap:6px;padding:20px;border-radius:var(--ed-r);background:var(--ed-white);box-shadow:0 0 0 1px var(--ed-line)}
.ed-xtile p{margin:0}
.ed-xtile-name{font-size:16.5px;font-weight:700;color:var(--ed-ink)}
.ed-xtile-price{font-size:14px;color:var(--ed-mute)}
.ed-xtile-price b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ed-ink)}
.ed-xtile-line{font-size:14.5px;line-height:1.5;color:var(--ed-ink-2)}

/* Ownership, in a few lines. */
.ed-own4{display:grid;gap:10px;max-width:72ch}
.ed-own4 p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ed-ink-2)}
.ed-own4 .ed-own4-excluded{font-size:15px;color:var(--ed-mute)}