/* 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 HOMEPAGE OF THE LIVE OFFER (template-parts/ed/home-live.php)
   The earlier "editorial" homepage, kept for hosts that may not show the packages; see that file.
   Loaded on the homepage only, after ed.css. Compositions only: every
   component used here is styled in ed.css and printed by inc/ed-components.php.

   Classes: .ed-hero* (the hero; markup in template-parts/ed/home-hero.php)
   and .edh-* (sections 2 to 10 of page-templates/home.php).

   HERO. Concept A is the chosen direction. B and C are kept, unchanged, for
   the owner's comparison (?hero=b|c on staging and development only) and are
   deleted with their markup when he has seen them.
   ============================================================ */

/* ------------------------------------------------------------ the copy block, shared by the three heroes */
.ed-hero{position:relative}
.ed-hero-copy{display:grid;justify-items:start;align-content:start;min-width:0}
.ed-hero-copy .ed-label{margin-bottom:var(--ed-5)}
.ed-hero-lede{margin:var(--ed-5) 0 0;font-size:clamp(1.0625rem,.98rem + .42vw,1.25rem);line-height:1.5;color:var(--ed-ink-2);max-width:30em;text-wrap:pretty}
.ed-hero-price{white-space:nowrap;font-weight:800;color:var(--ed-ink)}
.ed-hero .ed-actions{margin-top:var(--ed-6)}
.ed-hero-term{margin:var(--ed-3) 0 0;font-size:14px;line-height:1.4;color:var(--ed-mute)}
.ed-hero-term a{color:inherit;text-decoration:underline;text-decoration-color:var(--ed-line-2);text-underline-offset:4px}
.ed-hero-term a:hover{color:var(--ed-ink);text-decoration-color:var(--ed-orange)}
.ed-hero-term a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
@media (max-width:520px){
  .ed-hero-copy .ed-label{margin-bottom:var(--ed-4)}
  .ed-hero-lede{margin-top:var(--ed-4)}
  .ed-hero .ed-actions{flex-direction:column;align-items:stretch;gap:2px;width:100%;margin-top:var(--ed-5)}
  .ed-hero .ed-actions .ed-link{justify-content:center}
  .ed-hero-term{margin-top:var(--ed-1);width:100%;text-align:center}
}
/* Phone hero copy is centred on every page (owner, 10 September 2026; tests/test-mobile-hero.php holds every hero to it). */
@media (max-width:640px){
  .ed-hero-copy{justify-items:center;text-align:center}
  .ed-hero-copy .ed-label{justify-content:center}
}

/* ============================================================
   A  "PAIRING" (the chosen hero)
   Paper. The copy in the display serif on the left. On the right a clean
   rectangle of photograph that hangs from the header's bottom line and bleeds
   off the right edge, with the real client website standing in its empty
   side. One line under it: the switch, and the note that says what is real.
   ============================================================ */
.ed-hero--a{padding-bottom:var(--ed-6)}
.ed-hero--a .ed-h1{font-size:clamp(2.5rem,1rem + 4.4vw,4.75rem)}
.ed-hero-a-grid{
  display:grid;grid-template-rows:auto 1fr;
  grid-template-columns:minmax(var(--ed-gut),1fr) minmax(0,572px) minmax(0,708px) minmax(var(--ed-gut),1fr);
}
.ed-hero--a .ed-hero-copy{grid-column:2;grid-row:1;padding:clamp(40px,4.6vw,76px) var(--ed-6) 0 0}
/* The promise row ends level with the bottom of the photograph (the pairing's caption line is 50px). */
.ed-hero--a .ed-hero-promises{grid-column:2;grid-row:2;align-self:end;padding:0 var(--ed-7) 50px 0;margin-top:var(--ed-6)}
.ed-hero--a .ed-pairing{grid-column:3/5;grid-row:1/3;align-self:start}
.ed-hero--a .ed-pair-photo{aspect-ratio:auto;height:clamp(540px,calc(100svh - 160px),720px)}
.ed-hero--a .ed-pair-devices{right:var(--ed-gut)}
.ed-hero--a .ed-pair--left .ed-pair-devices{right:auto;left:clamp(28px,3.4vw,52px)}
.ed-hero--a .ed-pairing-foot{padding-right:var(--ed-gut)}
@media (max-width:1099px){
  .ed-hero--a{padding-bottom:var(--ed-7)}
  .ed-hero-a-grid{display:block}
  .ed-hero--a .ed-hero-copy{padding:clamp(28px,5vw,56px) var(--ed-gut) 0}
  .ed-hero--a .ed-pairing{margin-top:var(--ed-6)}
  .ed-hero--a .ed-pair-photo{height:auto;aspect-ratio:16/10;max-height:620px}
  .ed-hero--a .ed-pairing-foot{padding-inline:var(--ed-gut)}
  .ed-hero--a .ed-hero-promises{padding:0 var(--ed-gut);margin-top:var(--ed-6)}
}
@media (max-width:760px){
  /* On a phone the switch sits above the photograph, where a thumb finds it in the first screen; the note stays under. */
  .ed-hero--a .ed-pairing{display:flex;flex-direction:column;margin-top:var(--ed-4)}
  .ed-hero--a .ed-pairing-foot{display:contents}
  .ed-hero--a .ed-pairing-switch{order:-1;justify-content:center;padding-inline:var(--ed-gut)}
  .ed-hero--a .ed-pairing-note{padding:4px var(--ed-gut) 0;text-align:center}
  .ed-hero--a .ed-pair-photo{aspect-ratio:4/5;max-height:none}
}

/* ------------------------------------------------------------ B and C: kept for comparison only */
.ed-hero-strip{background:var(--ed-white);padding-block:var(--ed-5) var(--ed-6)}
.ed-hero-strip .ed-promises{border-top:0}
.ed-hero--b{isolation:isolate;display:flex;align-items:center;min-height:clamp(520px,calc(100svh - 150px),680px)}
.ed-hero-b-photo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ed-hero--b::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.78) 28%,rgba(255,255,255,0) 54%)}
.ed-hero-b-in{width:100%;padding-block:var(--ed-7)}
.ed-hero--b .ed-hero-copy{max-width:620px}
.ed-hero--b .ed-h1{font-family:var(--ed-sans);font-size:clamp(2.5rem,1rem + 3.9vw,4.25rem);font-weight:800;letter-spacing:-.048em;line-height:1}
.ed-hero--b .ed-hero-lede{color:var(--ed-ink);max-width:25em}
.ed-hero--b .ed-hero-term{color:var(--ed-ink-2)}
.ed-hero-b-devices{position:absolute;z-index:1;bottom:-84px;width:min(33vw,460px);right:max(var(--ed-gut),calc((100% - var(--ed-w))/2))}
.ed-hero-strip--b{padding-block:var(--ed-5) var(--ed-8)}
.ed-hero-strip--b .ed-promises{max-width:min(56%,700px)}
@media (max-width:899px){
  .ed-hero--b{display:block;min-height:0}
  .ed-hero--b::before{display:none}
  .ed-hero-b-photo{position:relative;inset:auto;z-index:0;aspect-ratio:3/2;max-height:46svh}
  .ed-hero-b-in{padding-block:var(--ed-5) 0}
  .ed-hero--b .ed-hero-copy{max-width:none}
  .ed-hero-b-devices{position:relative;right:auto;bottom:auto;width:auto;max-width:520px;margin:calc(var(--ed-7) + 12px) calc(var(--ed-gut) + 4px) 0 calc(var(--ed-gut) + 18px)}
  .ed-hero-strip--b{padding-block:calc(var(--ed-7) + 8px) var(--ed-6)}
  .ed-hero-strip--b .ed-promises{max-width:none}
}
.ed-hero--c{background:var(--ed-night);color:#fff;overflow:hidden;padding-top:clamp(24px,2.8vw,44px)}
.ed-hero--c .ed-hero-copy{justify-items:center;text-align:center}
.ed-hero--c .ed-label{color:var(--ed-on-night)}
.ed-hero--c .ed-h1{color:#fff;font-family:var(--ed-sans);font-size:clamp(2.5rem,.6rem + 5.9vw,5.75rem);font-weight:300;letter-spacing:-.05em;line-height:1}
.ed-hero--c .ed-h1-l--c{font-weight:800}
.ed-hero--c .ed-hero-lede{color:var(--ed-on-night);max-width:34em}
.ed-hero--c .ed-hero-price{color:#fff}
.ed-hero--c .ed-hero-term{color:var(--ed-on-night-2)}
.ed-hero--c .ed-hero-term a:hover{color:#fff}
.ed-hero--c .ed-actions{justify-content:center}
.ed-hero--c .ed-link{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
.ed-hero--c .ed-btn:focus-visible,.ed-hero--c .ed-link:focus-visible{outline-color:#fff}
@media (min-width:900px){
  .ed-hero--c .ed-h1-l--a,.ed-hero--c .ed-h1-l--b{display:inline}
}
.ed-hero-c-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr) minmax(0,1fr);gap:var(--ed-6);align-items:end;margin-top:clamp(28px,3vw,44px)}
.ed-hero-c-side{aspect-ratio:3/4.1;overflow:hidden;border-radius:var(--ed-r-sm) 4px 0 0}
.ed-hero-c-mid{position:relative;z-index:1;margin:0 -40px -76px}
.ed-hero-c-mid .ed-phone{bottom:20%;right:-4%;width:22%}
.ed-hero-c-mid .ed-cap{background:var(--ed-night);padding-left:0}
.ed-hero-c-mid .ed-cap .ed-label{color:var(--ed-on-night)}
.ed-hero-strip--c .ed-promises a{padding-top:10px}
@media (max-width:899px){
  .ed-hero-c-stage{grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--ed-6)}
  .ed-hero-c-side{aspect-ratio:4/5;border-radius:var(--ed-r-sm)}
  .ed-hero-c-side--l{order:1}
  .ed-hero-c-side--r{order:2}
  .ed-hero-c-mid{order:3;grid-column:1/-1;margin:-26% 9% -44px 5%}
  .ed-hero-c-mid .ed-phone{bottom:16%;right:-7%;width:25%}
  .ed-hero-c-mid .ed-cap{display:none}
}

/* ============================================================
   2  REAL WORK: the before/after at full width, then three more, stepped
   ============================================================ */
.edh-work .ed-compare{margin-top:clamp(36px,4.5vw,64px)}
/* The frame takes most of the measure; its caption sits in the margin beside it, like a caption in a magazine. */
@media (min-width:1101px){
  .edh-work .ed-compare{display:grid;grid-template-columns:minmax(0,1fr) 148px;column-gap:var(--ed-5);align-items:end}
  .edh-work .ed-compare-switch{grid-column:1/-1}
  .edh-work .ed-compare-cap{margin:0 0 4px;padding-top:var(--ed-3);border-top:1px solid var(--ed-ink);font-size:14.5px;line-height:1.5}
}
.edh-trio{list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4.4vw,64px);align-items:start}
.edh-trio li{min-width:0}
/* A step down from left to right, so three frames read as a sequence and not as a row of cards. */
.edh-trio li:nth-child(2){margin-top:clamp(20px,2.8vw,40px)}
.edh-trio li:nth-child(3){margin-top:clamp(40px,5.6vw,80px)}
@media (max-width:900px){
  /* On a phone the three are a rail: one in view, the next peeking in. */
  .edh-trio{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--ed-gut)*-1);padding:8px var(--ed-gut) 28px;scrollbar-width:none}
  .edh-trio::-webkit-scrollbar{display:none}
  .edh-trio li,.edh-trio li:nth-child(2),.edh-trio li:nth-child(3){flex:0 0 min(78%,420px);margin-top:0;scroll-snap-align:center}
  .edh-work .ed-more{margin-top:var(--ed-2)}
}

/* ============================================================
   3  PROMISE ONE: words and the key on the left, the annotated homepage large on the right
   ============================================================ */
.edh-proper-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,96px);grid-template-areas:"head frame" "key frame" "foot frame";grid-template-rows:auto auto 1fr;align-items:start}
.edh-proper .ed-head{grid-area:head}
.edh-proper .ed-annotated{display:contents}
.edh-proper .ed-annotated-frame{grid-area:frame;align-self:center}
.edh-proper .ed-annotated figcaption{grid-area:key;margin-top:var(--ed-6)}
.edh-proper-foot{grid-area:foot;margin-top:var(--ed-5)}
@media (max-width:1000px){
  .edh-proper-grid{grid-template-columns:1fr;grid-template-areas:"head" "frame" "key" "foot";grid-template-rows:auto}
  .edh-proper .ed-annotated-frame{margin-top:var(--ed-6)}
  .edh-proper .ed-annotated figcaption{margin-top:var(--ed-5)}
}

/* ============================================================
   4  PROMISE TWO: the photograph full-bleed with the words in the street it
   leaves empty; the thread's phone straddles its lower edge, and the chips
   and the three points sit on the page beside the phone.
   ============================================================ */
.edh-care-top{position:relative;isolation:isolate;display:flex;align-items:flex-start;min-height:clamp(580px,45vw,680px);padding-top:clamp(48px,5.4vw,80px)}
.edh-care-photo{position:absolute;inset:0;z-index:-2}
/* The left of the frame is pale sky over a dark road: one paper wash evens it out under ink type. */
.edh-care-top::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 30%,rgba(255,255,255,0) 58%)}
.edh-care-top .ed-wrap{width:100%}
.edh-care-top .ed-head{max-width:560px}
.edh-care-top .ed-lede{color:var(--ed-ink)}
.edh-care-body{padding-bottom:var(--ed-band)}
.edh-care .ed-thread-device{margin-top:-190px}
.edh-care .ed-thread-side{padding-top:var(--ed-6)}
.edh-points{list-style:none;margin:0 0 var(--ed-5);padding:var(--ed-5) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ed-5);border-top:1px solid var(--ed-line-2)}
.edh-points li{display:grid;gap:10px;align-content:start;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ed-ink)}
@media (max-width:900px){
  .edh-care-top{display:block;min-height:0;padding-top:0}
  .edh-care-top::before{display:none}
  .edh-care-photo{position:relative;inset:auto;z-index:0;aspect-ratio:4/3}
  .edh-care-top .ed-wrap{padding-top:var(--ed-6)}
  .edh-care-top .ed-head{max-width:none}
  .edh-care .ed-thread-device{margin-top:0}
  .edh-care .ed-thread-side{padding-top:var(--ed-6)}
  .edh-points{grid-template-columns:1fr;gap:0;padding-top:0}
  .edh-points li{grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--ed-line-2);font-size:16.5px}
  .edh-points + .ed-note{margin-top:var(--ed-5)}
}

/* ============================================================
   6  PRICE: the page's one Night band. The words stay put; the quote is the object.
   ============================================================ */
.edh-price-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,96px);align-items:start}
.edh-price-copy{display:grid;gap:var(--ed-6);position:sticky;top:calc(var(--hdr,72px) + 40px)}
@media (max-width:1000px){
  .edh-price-grid{grid-template-columns:1fr;row-gap:var(--ed-6)}
  .edh-price-copy{display:contents}
  .edh-price-copy .ed-actions{order:3}
}
@media (max-width:520px){
  .edh-price .ed-actions{flex-direction:column;align-items:stretch;gap:2px}
  .edh-price .ed-actions .ed-link{justify-content:center}
}

/* ============================================================
   7  HOW IT WORKS
   ============================================================ */
.edh-how .ed-steps{margin-top:clamp(28px,3.6vw,48px)}
.edh-how-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ed-3) var(--ed-6);margin-top:var(--ed-6)}

/* ============================================================
   8  NOT SURE YET? Modest on purpose: the alternative, never the headline act.
   ============================================================ */
.edh-unsure-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:center}
.edh-unsure .ed-h2{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.75rem)}
.edh-unsure-copy{display:grid;gap:var(--ed-5);justify-items:start}
@media (max-width:860px){
  .edh-unsure-grid{grid-template-columns:1fr;row-gap:var(--ed-4)}
}

/* ============================================================
   9  BUSINESSES WE HELP: the strip runs edge to edge
   ============================================================ */
.edh-kinds{padding-bottom:0}
.edh-kinds-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--ed-3) var(--ed-6);margin-bottom:var(--ed-6)}

/* ============================================================
   10  QUESTIONS
   ============================================================ */
.edh-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,96px);align-items:start}
.edh-faq-head{position:sticky;top:calc(var(--hdr,72px) + 40px)}
@media (max-width:1000px){
  .edh-faq-grid{grid-template-columns:1fr;row-gap:var(--ed-6)}
  .edh-faq-head{position:static}
}