/* Plate 2, "Half the island has the same website." A light plate: warm marble paper.
   Phone: the template phrases, the headline, the compare phone, the copy, one column.
   Desktop (>=900px landscape): copy on paper | an exhibit wall holding the phrases and the phone. No pin. */
.same{
  /* light ground, local until the lead lifts them into system.css */
  --paper:#EEE9DE;--paper-2:#E2DCCF;--ink:#0F1A1B;--ink-2:#3B4746;--ink-3:#5F6A68;--stone:#A9B1AC;--lagoon-ink:#0C8F86;
  --pw:min(76vw,312px);                     /* the compare phone's screen width */
  --drift:.2;                               /* how far rows travel as they enter and leave, as a share of the row width */
  --pad-t:clamp(72px,10svh,120px);
  position:relative;overflow:clip;color:var(--ink);
  display:grid;grid-template-columns:var(--g) minmax(0,1fr) var(--g);
  grid-template-areas:". rows ." ". h ." ". cmp ." ". copy .";
  padding:var(--pad-t) 0 clamp(88px,12svh,140px);
  background:radial-gradient(90% 40% at 12% 30%,rgba(255,255,255,.45),transparent 70%),var(--paper);
}
.same ::selection{background:var(--lagoon-ink);color:var(--paper)}
/* the template wall: on a phone a band behind the phrases, on desktop the whole right side */
.same::before{content:"";grid-column:1/-1;grid-row:1;z-index:-1;margin:calc(-1 * var(--pad-t)) 0 calc(-1 * clamp(28px,5svh,44px));
  background:radial-gradient(70% 90% at 50% 40%,rgba(255,255,255,.28),transparent 75%),var(--paper-2)}

/* ---- the phrases every template ships with ---- */
.same-rows{grid-area:rows;position:relative;z-index:0;container-type:inline-size;padding-top:clamp(24px,4svh,40px)}
.same-list{display:flex;flex-direction:column;gap:1.7cqi}
/* each row is SVG text locked to the box's width (textLength), so it fits in every browser whatever the font is doing;
   the viewBox height is the phrase's cap height at that size */
.same-row{margin:0;user-select:none;-webkit-user-select:none;font-weight:900;font-family:var(--didone);font-stretch:62.5%;
  color:var(--stone);will-change:transform}
.same-row svg{display:block;width:100%;height:auto;overflow:visible}
.same-row text{fill:currentColor}
/* the one that catches the light: dark ink under a soft spot, a lagoon scan crossing it as it arrives */
.same-row.is-hit{position:relative;isolation:isolate}
.same-row.is-hit::before{content:"";position:absolute;inset:-70% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,.25) 55%,rgba(255,255,255,0))}
/* the hit row is filled by #same-glint: ink with a lagoon band, slid across by the module */
.same-row.is-hit text{fill:url(#same-glint)}

/* ---- copy ---- */
.same-h{grid-area:h;position:relative;z-index:2;margin-top:clamp(48px,7svh,68px);
  font:400 clamp(40px,11.4vw,64px)/.94 var(--didone);font-stretch:62.5%;letter-spacing:-.012em;text-wrap:balance}
.same-copy{grid-area:copy;position:relative;z-index:2;margin-top:clamp(40px,6svh,60px)}
.same-body{font:400 18px/1.5 var(--garamond);color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.same-kick{margin-top:.9em;font:italic 400 clamp(23px,6.4vw,28px)/1.2 var(--garamond);color:var(--ink);max-width:17em;text-wrap:balance}

/* ---- the compare phone (frame matches the designs plate) ---- */
.same-cmp{grid-area:cmp;justify-self:center;position:relative;z-index:2;width:var(--pw);margin:clamp(48px,7svh,72px) 0 0}
.same-phone{--cut:50%;position:relative;width:100%;aspect-ratio:9/19.3;border-radius:calc(var(--pw) * .13);
  box-shadow:0 0 0 calc(var(--pw) * .035) #0B1012,0 0 0 calc(var(--pw) * .035 + 1px) #2b3437,
    0 calc(var(--pw) * .16) calc(var(--pw) * .3) calc(var(--pw) * -.06) rgba(52,40,22,.42),0 calc(var(--pw) * .04) calc(var(--pw) * .08) rgba(52,40,22,.22)}
.same-phone::before{content:"";position:absolute;z-index:7;top:calc(var(--pw) * .04);left:50%;width:30%;height:calc(var(--pw) * .085);
  transform:translateX(-50%);border-radius:calc(var(--pw) * .05);background:#000;pointer-events:none}
.same-screen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;container-type:inline-size;background:#1d3550;
  touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.same-screen::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.13),rgba(255,255,255,0) 28%);box-shadow:inset 0 0 0 1px rgba(236,231,220,.08)}
.same-screen img{-webkit-user-drag:none}
.same-shot{position:absolute;inset:0}
.same-before{clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
/* the divider line runs inside the screen; the knob sits on the phone so it is never cut off at the edges */
.same-screen::before{content:"";position:absolute;top:0;bottom:0;left:var(--cut);z-index:5;width:2px;margin-left:-1px;pointer-events:none;
  background:#fff;box-shadow:0 0 0 1px rgba(15,26,27,.28),0 0 12px rgba(12,143,134,.55)}
.same-knob{position:absolute;z-index:8;top:50%;left:clamp(24px,var(--cut),calc(100% - 24px));width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:var(--paper);box-shadow:0 8px 20px -6px rgba(15,26,27,.55),0 0 0 1px rgba(15,26,27,.3);pointer-events:none;
  transition:transform .25s var(--ease),box-shadow .25s}
.same-knob::before,.same-knob::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border:solid var(--ink);border-width:0 0 2px 2px}
.same-knob::before{left:13px;transform:rotate(45deg)}
.same-knob::after{right:13px;transform:rotate(-135deg)}
.same-cmp.is-drag .same-knob{transform:scale(1.08)}
.same-cmp.is-focus .same-knob{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--lagoon-ink),0 8px 20px -6px rgba(15,26,27,.55)}
/* the range owns the value; pointers are handled on the screen, keys and assistive tech go to the range */
.same-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.same-cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:calc(var(--pw) * .035 + 20px);font:500 14px/1 var(--mono);letter-spacing:.01em;color:var(--ink-3)}
.same-cap b{font-weight:500;color:var(--lagoon-ink)}
.same-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- left of the divider: the template, on purpose. Its cues sit in the left half so they read at rest. ---- */
.same-tpl{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#333;font:4.2cqi/1.42 "Times New Roman",Times,serif}
.same-tpl-bar{display:flex;justify-content:space-between;align-items:center;padding:13.5cqi 4.6cqi 3cqi;background:linear-gradient(#3b7bd0,#1d58a6);
  color:#fff;font:700 6cqi/1 "Times New Roman",Times,serif;text-shadow:0 1px 1px rgba(0,0,0,.35);border-bottom:.9cqi solid #f0b429}
.same-tpl-bar small{display:block;margin-top:.6cqi;font:italic 400 3.6cqi/1.1 "Times New Roman",Times,serif;color:#dbe8ff}
.same-tpl-bar b{font:400 6.4cqi/1 Arial,Helvetica,sans-serif;text-shadow:none}
.same-tpl-hero{position:relative;height:40%;flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4cqi;padding:0 4.6cqi;overflow:hidden;background:#7fb5d9}
.same-tpl-hero picture,.same-tpl-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:18% 62%}
.same-tpl-hero p{position:relative;max-width:46cqi;font:700 6cqi/1.08 Arial,Helvetica,sans-serif;color:#fff;
  text-shadow:.45cqi .45cqi 0 #000,0 0 3cqi rgba(0,0,0,.6)}
.same-tpl-hero span{position:relative;padding:2.4cqi 5cqi;border:1px solid #a85d00;border-radius:1.6cqi;background:linear-gradient(#ffbe45,#f08a0c 55%,#dc7400);
  color:#fff;font:700 4.4cqi/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;text-shadow:0 1px 1px rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 4px rgba(0,0,0,.35)}
.same-tpl-body{padding:5cqi 4.6cqi 0}
.same-tpl-body h3{max-width:44cqi;margin:0 0 2.2cqi;font:700 5.6cqi/1.15 Arial,Helvetica,sans-serif;color:#1d58a6}
.same-tpl-body p{margin:0}
.same-tpl-body u{display:inline-block;margin-top:2.4cqi;color:#1a0dab}
.same-tpl-cookie{position:relative;margin-top:auto;padding:3.6cqi 4.6cqi 8cqi;background:#262626;color:#d6d6d6;font:3.5cqi/1.4 Arial,Helvetica,sans-serif}
.same-tpl-cookie p{margin:0}
.same-tpl-cookie p+p{display:flex;align-items:center;gap:3.6cqi;margin-top:2.6cqi}
.same-tpl-cookie b{padding:1.6cqi 4.4cqi;background:#4caf50;color:#fff;font-weight:700}
.same-tpl-cookie u{color:#9ec1ff}
.same-tpl-chat{position:absolute;z-index:2;left:4.6cqi;bottom:38cqi;width:13cqi;height:13cqi;border-radius:50%;background:#1d58a6;box-shadow:0 1cqi 2.4cqi rgba(0,0,0,.45)}
.same-tpl-chat::before{content:"";position:absolute;left:3.2cqi;top:3.4cqi;width:6.6cqi;height:4.8cqi;border-radius:1.2cqi;background:#fff}
.same-tpl-chat::after{content:"";position:absolute;left:4.4cqi;top:7.6cqi;border:1.3cqi solid transparent;border-top-color:#fff;border-left-color:#fff}
.same-tpl-chat i{position:absolute;right:-1cqi;top:-1cqi;min-width:5.2cqi;height:5.2cqi;border-radius:2.6cqi;background:#e53935;color:#fff;
  font:700 3.4cqi/5.2cqi Arial,Helvetica,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 .7cqi #fff}

/* ---- right of the divider: the web.vi design for Ridgeline. Set to the right, so it reads on its own half. ---- */
.same-rx{position:absolute;inset:0;isolation:isolate;display:flex;flex-direction:column;align-items:flex-end;padding:17cqi 6.5cqi 9cqi;background:#1d3550;color:#fff;font:600 4.2cqi/1.3 var(--garamond);text-align:right}
.same-rx picture,.same-rx img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.same-rx-nav{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font:italic 400 6cqi/1 var(--didone)}
.same-rx-nav i{position:relative;width:6.5cqi;height:4cqi;border:solid currentColor;border-width:1.5px 0}
.same-rx-nav i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.same-rx h3{max-width:42cqi;margin:10cqi 0 0;font:italic 300 10.8cqi/1 var(--didone);font-stretch:62.5%;letter-spacing:-.005em;text-shadow:0 0 6cqi rgba(10,26,48,.35)}
.same-rx-cta{margin-top:5.5cqi;padding:3.2cqi 5.5cqi;border:1.5px solid rgba(255,255,255,.85);border-radius:2.2cqi;font-size:4.2cqi;font-weight:700}
.same-rx-bar{align-self:stretch;margin-top:auto;text-align:left;display:flex;align-items:center;gap:2.5cqi;padding:2.6cqi 2.6cqi 2.6cqi 4.4cqi;border-radius:4cqi;background:rgba(255,255,255,.94);color:#1d2b3a;font-size:3.7cqi}
.same-rx-bar span{flex:1;white-space:nowrap}
.same-rx-bar span+span{border-left:1px solid #d5dbe2;padding-left:2.5cqi;text-align:right}
.same-rx-bar b{padding:2.6cqi 3.6cqi;border-radius:2.6cqi;background:#1d3550;color:#fff}

/* ---- desktop: copy on paper | the template wall with the phrases and the phone ---- */
@media (min-width:900px) and (orientation:landscape){
  .same{
    --pw:min(calc((100svh - 270px) * 9 / 19.3),336px);
    --drift:.09;
    --pad-t:max(84px,9svh);
    min-height:100svh;padding:var(--pad-t) 0;
    grid-template-columns:var(--g) minmax(0,27vw) clamp(48px,4.4vw,104px) minmax(0,1fr) clamp(56px,4.6vw,110px) var(--pw) var(--g);
    grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:". .    . rows . cmp ." ". h    . rows . cmp ." ". copy . rows . cmp ." ". .    . rows . cmp .";
    background:radial-gradient(60% 70% at 8% 34%,rgba(255,255,255,.5),transparent 70%),var(--paper)}
  .same::before{grid-column:3/-1;grid-row:1/-1;margin:calc(-1 * var(--pad-t)) 0 calc(-1 * var(--pad-t)) clamp(16px,1.8vw,44px);
    background:radial-gradient(55% 60% at 40% 46%,rgba(255,255,255,.32),transparent 72%),var(--paper-2)}
  .same-rows{align-self:center;padding:0}
  .same-h{margin:0;font-size:clamp(56px,4.9vw,104px);line-height:.9}
  .same-copy{margin-top:clamp(28px,4.5svh,48px)}
  .same-body{font-size:clamp(19px,1.18vw,23px);max-width:27ch}
  .same-kick{font-size:clamp(25px,1.7vw,33px);max-width:14em}
  .same-cmp{align-self:center;margin:0}
  .same-cap{font-size:13px}
}

/* reduced motion: the rows sit still and aligned, the scan rests off the row */
@media (prefers-reduced-motion:reduce){
  .same-row{will-change:auto}
  .same-knob{transition:none}
}