/* L Squared homepage v7 - PHONE ONLY.
   Linked with media="(max-width: 760px)", so nothing in this file can reach a
   wider window. Existing rules are overridden here, never edited. */

/* ---------------------------------------------------------------- tokens */
:root{
  --title:calc(clamp(28px,8.4vw,36px) * var(--k-title,1));      /* one size for every section title on a phone */
  --gap-title:calc(26px * var(--k-gap,1));                     /* one gap from every title to its content */
  --pad-sec:calc(64px * var(--k-pad,1));
}
.t{text-wrap:balance}

/* ---------------------------------------------------------------- top bar
   a full width strip: brand on the left, the one action on the right */
.topbar{padding:0}
.topbar__in{
  width:100%;justify-content:space-between;
  padding:max(6px,env(safe-area-inset-top)) 10px 6px 16px;
  border:0;border-bottom:1px solid var(--hair);border-radius:0;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
}
.topbar__brand img{width:124px}
.topbar .btn--sm{min-height:44px;padding:0 18px}

/* ---------------------------------------------------------------- 1 hero
   the count is set big for a tall screen; a long line may break onto two */
#hero .num,#hero .word{font-size:17vw}
#hero .read{gap:calc(17vw * .28) calc(17vw * .1);padding:0 16px}
#hero .word{line-height:.92}
#hero .bigA{font-size:16vw}
#hero .bigB{font-size:8.8vw}
#hero .hlogo{width:86vw}

/* ---------------------------------------------------------------- 2 blue statement */
#statement{height:var(--app-h,100svh);min-height:var(--app-h,100svh)}
.statement__h{font-size:9.7vw;line-height:.95}

/* ---------------------------------------------------------------- 4 five strips
   the stacked accordion takes the screen; the open strip grows tall */
#strips{min-height:var(--app-h,100svh)}
.strips{
  height:calc(var(--app-h,100svh) - 2 * var(--pad-sec) - var(--gap-title) - 2.2 * var(--title));
  min-height:460px;max-height:720px;gap:8px;
  grid-template-rows:3.6fr 1fr 1fr 1fr 1fr;
}
.strips[data-open="1"]{grid-template-rows:1fr 3.6fr 1fr 1fr 1fr}
.strips[data-open="2"]{grid-template-rows:1fr 1fr 3.6fr 1fr 1fr}
.strips[data-open="3"]{grid-template-rows:1fr 1fr 1fr 3.6fr 1fr}
.strips[data-open="4"]{grid-template-rows:1fr 1fr 1fr 1fr 3.6fr}
.strip{border-radius:8px;box-shadow:none}
.strip__copy{padding:18px 16px 14px;gap:6px}
.strip__word{font-size:22px}
.strip__say{font-size:16px;max-width:30ch;margin:0 auto}
.strip:not(.is-open) .strip__copy{padding:0 16px 12px}

/* ---------------------------------------------------------------- 5 industries
   the photo runs edge to edge and whole; the name and the arrows sit on the
   ground under it, so nothing covers the picture */
#industries{min-height:auto;padding:var(--pad-sec) 0}
.ind__head{padding:0 20px}
.ind__stage{
  --caprow:68px;
  height:calc(100vw / 2.25 + var(--caprow));
  margin:var(--gap-title) 0 var(--s2);
  touch-action:pan-y;
}
.ind__ph{
  top:0;transform:translateX(-50%);
  width:100cqw;height:calc(100cqh - var(--caprow));
  background-size:contain;background-position:center;
}
.ind__ph::after{display:none}
.ind__cap{top:calc(100% + 10px);bottom:auto;padding:0 64px}
.ind__capname{font-size:34px;text-shadow:none}
.ind__arrow{
  top:auto;bottom:calc((var(--caprow) - 44px) / 2);margin-top:0;
  background:rgba(243,241,236,.08);color:var(--paper);
}
.ind__arrow--prev{left:12px}
.ind__arrow--next{right:12px}
.ind__cta{margin:0}

/* ---------------------------------------------------------------- 6 sentence */
.fall__line{font-size:clamp(30px,8.4vw,40px);max-width:min(16ch,90vw)}

/* ---------------------------------------------------------------- 7 change the menu
   the two scenes stack; each keeps its own switch and live line right under it,
   side by side in one row; Publish follows both */
#publish{min-height:var(--app-h,100svh);padding-left:12px;padding-right:12px}
.pub__rig{gap:18px}
.pub__shot{--pubh:none;width:100%;border-radius:8px;box-shadow:none}
.pub__under{margin-top:10px;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 14px}
.seg button{font-size:15px;padding:0 20px}
.pub__status{font-size:14px;min-height:44px}
#pub-go{margin-top:22px;min-width:220px}

/* ---------------------------------------------------------------- 8 dead screen
   the 3:1 pair runs the full width of the phone, whole */
#reliability{min-height:auto;padding-left:0;padding-right:0}
.rely__h{padding:0 20px}
.rely__sub{font-size:17px;padding:0 20px}
.rely__frame{width:100vw;border-radius:0;box-shadow:none}

/* ---------------------------------------------------------------- 9 trusted by
   orbit first, quote under it */
#clients{padding:var(--pad-sec) 20px}
.clients__row{gap:28px}
.quote__text{font-size:17px;line-height:1.42}

/* ---------------------------------------------------------------- 10 figures
   every figure line stays on one line and fits the width */
.beats__stage{height:22vw}
.beats__fig,.beats__word{font-size:10.6vw}

/* ---------------------------------------------------------------- 11 book a demo
   the wall photo runs edge to edge, then the form, sized for thumbs */
#demo{min-height:auto;padding-left:0;padding-right:0}
.demo__stage{max-width:none}
.demo__shot{width:100vw;border-radius:0;box-shadow:none}
.demo__screen{padding:0 20px}
.demo__h{font-size:var(--title)}
.form{max-width:420px;gap:16px}
.form label{font-size:13px}
.form input,.form select{font-size:16px;min-height:52px}
.form .btn{min-height:52px;font-size:15px}

/* ---------------------------------------------------------------- 12 footer */
.foot{padding:40px 20px max(40px,env(safe-area-inset-bottom))}
.foot__nav{background:none;border:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:0}
.foot__nav a{justify-content:center;font-size:15px}

/* ---------------------------------------------------------------- r38 phone polish
   every photo sits inside the same 16px side gutter as the text, whole, with
   the same soft corners, and every control row is centred on the page */
:root{--gut:16px}

/* industries: the photo keeps its own ratio inside the gutter and sits right
   on the name row, so wide and wider photos line up the same way */
.ind__stage{height:calc((100vw - 2 * var(--gut)) / 2.25 + var(--caprow))}
.ind__ph{
  width:calc(100cqw - 2 * var(--gut));
  height:calc((100cqw - 2 * var(--gut)) / var(--kw,2.25));
  top:auto;bottom:var(--caprow);
  border-radius:8px;background-size:cover;
}

/* change the menu: the switch, then its live line, both centred under the photo */
#publish{padding-left:var(--gut);padding-right:var(--gut)}
.pub__under{flex-direction:column;align-items:center;gap:8px}
.pub__status{justify-content:center}

/* dead screen and the contact wall: inside the gutter, not edge to edge */
.rely__frame{width:calc(100vw - 2 * var(--gut));margin-left:auto;margin-right:auto;border-radius:8px;overflow:hidden}
.demo__shot{width:calc(100vw - 2 * var(--gut));margin-left:auto;margin-right:auto;border-radius:8px;overflow:hidden}

/* footer links centred in their columns */
.foot__nav a{text-align:center}

/* the live line sits snug under its switch */
.pub__under{gap:2px}
.pub__under .pub__status{min-height:30px}

/* trusted by: smaller logos, so the ring stays inside the screen */
#clients{padding-left:var(--gut);padding-right:var(--gut)}
#clients .orbit{--orbit-logo-w:72px;--orbit-logo-h:30px}

/* r39: no dead space around the photos. Sections sit closer, the industry
   name sits right under its photo and the link right under the name. */
:root{--pad-sec:calc(36px * var(--k-pad,1))}
#industries,#reliability,#clients,#demo,#publish{padding-top:var(--pad-sec);padding-bottom:var(--pad-sec)}
.ind__stage{--caprow:56px;margin-bottom:0}
.ind__cap{top:calc(100% + 4px)}
.ind__cta{margin-top:2px}
.rely__frame{margin-bottom:0}
#reliability{--pad-sec:calc(36px * var(--k-pad,1))}

/* r40: the three type sections fill their screen. Lines may break on a phone;
   the words are set big enough to own the section, not float in it. */
.statement__h{font-size:17vw;line-height:.9;max-width:none;padding:0 var(--gut)}

.fall__stage{padding:0 var(--gut)}
.fall__line{font-size:12.4vw;line-height:1.02;max-width:none;letter-spacing:-.01em}

/* figures: the figure on top, its word under it, both big; every beat stacks
   in the same cell so the tallest one sets the height and nothing jumps */
.beats__stage{display:grid;height:auto;padding:0 var(--gut)}
.beats__line{position:static;grid-area:1/1;transform:none;flex-direction:column;align-items:center;
  justify-content:center;gap:.06em;white-space:normal}
.beats__fig{font-size:25vw;line-height:.86;text-wrap:balance}
.beats__word{font-size:13vw;line-height:.9;margin-left:0}
/* r40b: bigger again, the words own the screen */
.statement__h{font-size:22vw;line-height:.88;width:min-content;margin:0 auto}
.fall__line{font-size:14.6vw;line-height:1}
.beats__fig{font-size:32vw}
.beats__word{font-size:16vw}
@media (prefers-reduced-motion:reduce){
  .beats__stage{display:flex;gap:28px}
  .beats__line{grid-area:auto}
  .beats__fig{font-size:18vw}.beats__word{font-size:10vw}
}

/* ================================================================== r41
   Every section fills the screen like it does on PC, the industries
   carousel loses its arrows and gets its title above the photo, the
   publish scenes lose the separate Publish step, and the sections built
   around a drag or a tap get a one-time preview of their own motion. */

/* A) full screen, content spread across it, not clumped in the middle */
#industries,#reliability,#clients,#demo,#publish{
  min-height:var(--app-h,100svh);height:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;
  padding-top:max(28px,env(safe-area-inset-top));padding-bottom:28px;
}
#reliability .wrap,#demo .wrap,#publish .wrap{flex:1 1 auto;min-height:0;justify-content:space-evenly;width:100%}
.clients__row{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly;width:100%;gap:28px}

/* B) industries: the name sits above the photo, not below; no arrow chrome;
   the stage now takes the real ratio of whatever photo is showing, so the
   3:1 industries do not leave a gap the 2.25:1 ones do not have */
.ind__arrow{display:none}
.ind__stage{--caprow:50px;height:calc((100vw - 2 * var(--gut)) / var(--kw,2.25) + var(--caprow))}
.ind__ph{top:var(--caprow);bottom:auto}
.ind__cap{top:auto;bottom:calc(100% + 6px)}
.ind__capname{font-size:30px}

/* C) publish: the Publish button is gone, a toggle goes live the moment it
   is tapped; "Publish" is a small label over the toggles, not a button; the
   live line sits in the photo's own bottom corner */
#pub-go{display:none}
.pub__rig{gap:20px}
.pub__scene{position:relative}
.pub__under::before{
  content:"Publish";display:block;margin-bottom:8px;
  font:700 11px/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(243,241,236,.48);
}
.pub__shot .pub__status{
  position:absolute;right:10px;bottom:10px;left:auto;margin:0;z-index:2;
  background:rgba(6,14,22,.74);backdrop-filter:blur(6px);
  padding:0 12px;min-height:34px;border-radius:999px;font-size:13px;
}

/* r42: the peek-on-scroll-up nav bar reads as a stray dark bar on a phone
   (touch scroll bounce triggers it unpredictably); removed on mobile only */
/* r51: the bar is back as two floating controls, see the r51 block */

/* r45: nothing on a phone is sized in dvh. dvh changes every time the
   browser's address bar slides in or out while scrolling, which resizes the
   sections above the one being read and throws the page up or down. svh is
   the fixed small viewport, so the page keeps one height. */
#independent{height:calc(var(--app-h,100svh) * 2.8)}
.fall{height:var(--app-h,100svh)}
.fall__line{margin-top:clamp(56px,calc(var(--app-h,100svh) * 0.1),104px)}
#numbers{min-height:var(--app-h,100svh)}
.rely__frame{--relyh:min(700px,calc(var(--app-h,100svh) - 2 * var(--pad-sec) - var(--gap-title) - 100px))}
.shed{--shedh:clamp(120px,calc(var(--app-h,100svh) * 0.15),170px)}
.shed--into{--shedh:clamp(150px,calc(var(--app-h,100svh) * 0.2),210px)}
.shed--seam{--shedh:clamp(72px,calc(var(--app-h,100svh) * 0.11),132px)}
.beats__cta{margin-top:clamp(40px,calc(var(--app-h,100svh) * 0.09),110px)}
.strips{height:calc(var(--app-h,100svh) - 2 * var(--pad-sec) - var(--gap-title) - 2.2 * var(--title))}
.ind__stage{min-height:0}
.quote{gap:12px;padding-top:12px}

/* r47: no smooth scroll-behavior on a phone. iOS makes its own scroll
   corrections when the toolbars show on a scroll up, and with smooth
   behaviour those corrections animate as a visible jump. */
html{scroll-behavior:auto}

/* r48: the proof beats are sentences now. Figure over word, both sized so
   the longest single word (RESPONSIBILITY., RELATIONSHIPS) fits the width */
.beats__fig{font-size:15vw;line-height:.9}
.beats__word{font-size:11.5vw;line-height:.92}
.beats__fig,.beats__word{max-width:calc(100vw - 2 * var(--gut));text-wrap:balance}

/* ================================================================== r48
   phone photos: portrait versions (see js/mobile.js) */

/* dead screen: the 4:5 pair, whole, inside the gutter */
.rely__frame{aspect-ratio:1080 / 1350;--relyh:none;height:auto}

/* contact: the square three-screen wall runs edge to edge; the headline
   sits in the top screen, the two fields in the middle one, the button in
   the bottom one. Positions are measured from the photo:
   screens span x 12.4%-87.7%; top y 4-30%, middle 31.7-71.6%, bottom 73.5-96% */
#demo{padding-left:0;padding-right:0}
.demo__stage{position:relative;width:100vw;max-width:none;aspect-ratio:1 / 1;gap:0}
.demo__shot{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;aspect-ratio:auto;overflow:hidden;
  -webkit-mask-image:none;mask-image:none}
.demo__img{object-fit:cover}
.demo__screen{position:absolute;inset:0;padding:0;display:block}
.demo__h{
  position:absolute;left:12.4%;right:12.3%;top:4%;height:26%;margin:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:min(7.2vw,34px);line-height:.95;
}
.form{
  position:absolute;left:14.4%;right:14.3%;top:31.7%;bottom:4%;max-width:none;margin:0;
  display:grid;grid-template-rows:39.9fr 1.9fr 22.5fr;gap:0;
}
.form .field:nth-of-type(1){grid-row:1;align-self:start;margin-top:4.5vw}
.form .field:nth-of-type(2){grid-row:1;align-self:end;margin-bottom:4.5vw}
.form .field{gap:4px}
.form label{font-size:11px;letter-spacing:.08em}
.form input,.form select{min-height:42px;height:42px;font-size:16px}
.form .btn{grid-row:3;align-self:center;min-height:46px;height:46px}
.form__note{position:absolute;left:0;right:0;top:100%;margin-top:10px;text-align:center}
.form{grid-template-columns:100%}
.form .field,.form .btn{grid-column:1;width:100%}
/* dead screen: title and its line are one group, the photo follows */
#reliability .wrap{justify-content:center}
.rely__sub{margin-top:10px}
.rely__frame{margin-top:var(--gap-title)}
.form .field,.form .btn{min-width:0}
.form input,.form select{width:100%;min-width:0}
.form{width:auto}

/* r50: CEO quote on a phone */
.fall__line{font-size:6.6vw;line-height:1.2;max-width:calc(100vw - 2 * var(--gut));letter-spacing:-.004em}
.fall__by{font-size:12px;margin-top:14px}

/* r50: contact wall, measured again. Middle screen is 31.7% to 71.6% of the width,
   bottom screen 73.5% to 96%. Everything sits well inside with clear margins. */
.form{top:31.7%;bottom:4%;left:16%;right:16%;grid-template-rows:39.9fr 1.9fr 22.5fr}
.form .field:nth-of-type(1){margin-top:3.2vw}
.form .field:nth-of-type(2){margin-bottom:3.2vw}
.form .field{gap:3px}
.form label{font-size:10px;letter-spacing:.1em;line-height:1}
.form input,.form select{min-height:38px;height:38px;font-size:16px;padding:0 12px;border-radius:5px}
.form .btn{min-height:42px;height:42px;border-radius:6px;font-size:13px}
.demo__h{font-size:min(6.8vw,32px)}

/* ================================================================== r51 */

/* CEO quote fills the screen */
.fall__line{font-size:9.6vw;line-height:1.08;max-width:calc(100vw - 2 * var(--gut));letter-spacing:-.008em;font-stretch:72%}
.fall__by{font-size:13px;margin-top:18px;letter-spacing:.16em}

/* contact: the new tall three-screen wall, whole, as tall as the screen allows.
   Screens: top 12.9-29.7%, middle 31.3-58.8%, bottom 60.2-76.9% of the height,
   all spanning about 13% to 86% of the width. */
.demo__stage{width:min(100vw,calc(var(--app-h,100svh) * .4615));aspect-ratio:852 / 1846;margin:0 auto}
.demo__h{left:15%;right:15%;top:12.9%;height:16.8%;font-size:min(6.4vw,30px)}
.form{left:16%;right:16%;top:31.3%;bottom:23.1%;grid-template-rows:27.5fr 1.4fr 16.7fr}
.form .field:nth-of-type(1){margin-top:5.5%}
.form .field:nth-of-type(2){margin-bottom:5.5%}
.form .field{gap:5px}
.form label{font-size:11px}
.form input,.form select{min-height:46px;height:46px;font-size:16px}
.form .btn{min-height:46px;height:46px;font-size:14px;align-self:center}
.demo__screen,.form,.form *{pointer-events:auto}
.demo__screen{z-index:3}

/* industries: the current photo is above the one waiting behind it */
.ind__slide{z-index:1}
.ind__slide.is-on{z-index:2}

/* publish: the wipe takes its time on a phone */
.pub__shot.is-wiping .pub__ph.is-coming{transition-duration:1500ms}
.pub__shot.is-wiping .wipe{animation-duration:1500ms}

/* trusted by: two slow logo rows, then the quote, large */
#clients .orbit{display:none}
.clients__row{gap:34px;justify-content:center}
.mq{width:100vw;margin:0 calc(-1 * var(--gut));overflow:hidden;display:flex;flex-direction:column;gap:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq__row{display:flex;align-items:center;gap:52px;width:max-content;padding-right:52px;animation:mq 34s linear infinite}
.mq__row--b{animation-direction:reverse;animation-duration:40s}
.mq__logo{height:30px;width:auto;flex:0 0 auto;filter:grayscale(1) brightness(0) invert(1);opacity:.82}
.mq__logo--cold-stone-creamery,.mq__logo--international-centre{height:40px}
.mq__logo--ups-store,.mq__logo--mcmaster-university{height:38px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq__row{animation:none}}
.quote{padding-top:22px;gap:16px;max-width:calc(100vw - 2 * var(--gut))}
.quote::before{font-size:64px;top:-.42em}
.quote__text{font-size:5.6vw;line-height:1.36;max-width:none}
.quote__logo{width:132px}

/* phone nav: two floating controls, no bar. page.js still decides when the
   topbar is shown (scroll up) and hidden (scroll down, over the hero). */
#topbar{display:flex;padding:0}
.topbar__in{width:100%;justify-content:space-between;align-items:center;
  padding:max(10px,env(safe-area-inset-top)) 12px 0 12px;
  background:none;border:0;border-radius:0;box-shadow:none}
.topbar__brand,.topbar__nav{display:none}
.topbar .btn--sm{min-height:44px;padding:0 18px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.mnav__burger{
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(6,14,22,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.mnav__burger i{display:block;width:20px;height:2px;background:var(--paper);border-radius:1px;transition:transform 260ms var(--ease),opacity 200ms var(--ease)}
.mnav__burger.is-open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav__burger.is-open i:nth-child(2){opacity:0}
.mnav__burger.is-open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{
  position:fixed;inset:0;z-index:119;background:rgba(5,10,16,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  padding:0 var(--gut);opacity:0;visibility:hidden;transition:opacity 260ms var(--ease),visibility 0s linear 260ms;
}
.mnav.is-open{opacity:1;visibility:visible;transition:opacity 260ms var(--ease)}
.mnav__list{display:flex;flex-direction:column;align-items:center;gap:22px}
.mnav__list a{
  font-stretch:64%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  font-size:11vw;color:var(--paper);text-decoration:none;
}
.mnav__demo{min-height:52px;padding:0 34px;font-size:15px}
html.mnav-open{overflow:hidden}
html.mnav-open .topbar{transform:translateY(0)}

/* r51b: during the peek only the front photo carries its name */
.ind__stage.is-peeking .ind__slide:not(.is-on) .ind__cap{opacity:0}
/* r51b: every logo in the same box, so the rows read as one set */
.mq__row{gap:40px;padding-right:40px}
.mq__logo,.mq__logo--cold-stone-creamery,.mq__logo--international-centre,.mq__logo--ups-store,.mq__logo--mcmaster-university{
  width:118px;height:44px;object-fit:contain;object-position:center}

/* ================================================================== r53 */

/* statement: sized so the longest word fits, block centred, no min-content
   (Safari measured that narrower than the text and pushed it right) */
.statement__h{width:auto;max-width:100%;margin:0;font-size:18.5vw;line-height:.9;text-align:center}

/* contact: the wall photo fills the whole screen (cover). The screen layer is
   sized by js/mobile.js to the photo as displayed, so these percentages are
   of the photo: top screen 12.9-29.7%, middle 31.3-58.8%, bottom 60.2-76.9%. */
#demo{padding:0;min-height:var(--app-h,100svh)}
.demo__stage{width:100vw;height:var(--app-h,100svh);max-width:none;aspect-ratio:auto;margin:0;overflow:hidden}
.demo__shot{position:absolute;inset:0;width:100%;height:100%}
.demo__img{object-fit:cover;object-position:center}
.demo__screen{position:absolute;inset:auto;display:block;padding:0}
.demo__h{left:15%;right:15%;top:12.9%;height:16.8%;font-size:min(7.4vw,34px)}
/* the two fields sit centred in the middle screen */
.form{position:absolute;left:16.5%;right:16.5%;top:31.3%;height:27.5%;bottom:auto;max-width:none;margin:0;
  display:flex;flex-direction:column;justify-content:center;gap:14px;width:auto}
.form .field,.form .field:nth-of-type(1),.form .field:nth-of-type(2){margin:0;grid-row:auto;align-self:stretch}
.form .field{gap:5px;min-width:0}
.form label{font-size:11px}
.form input,.form select{min-height:46px;height:46px;font-size:16px;width:100%}
/* Book a demo is an underlined link in the bottom screen, not a button */
.form .btn{
  position:absolute;left:0;right:0;top:105.1%;height:60.7%;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:0;box-shadow:none;
  color:var(--paper);font-size:clamp(16px,4.6vw,20px);letter-spacing:.06em;min-height:0;
}
.form .btn::after{content:"";position:absolute;left:50%;bottom:calc(50% - 1.05em);width:7.2em;height:2px;transform:translateX(-50%);background:var(--gold);border-radius:1px}
.form .btn:active{transform:none;opacity:.8}
.form__note{position:absolute;left:0;right:0;top:170%;text-align:center}
/* r53b: the form's reveal clip would hide the link that sits in the screen
   below it, so the form is not clipped on a phone */
.js .form[data-wipe],.js .form[data-wipe].is-in{clip-path:none;transition:none}
.form[data-wipe]::after{display:none}

/* ================================================================== r54
   Industries on Safari: no container units, no container query, a clipped
   stage, and the slides on their own compositing layer, so the preview slide
   can't repaint over the title or nudge the page while scrolling. */
.ind__stage{container-type:normal;overflow:clip;isolation:isolate;z-index:1;
  height:calc((100vw - 2 * var(--gut)) / var(--kw,.8) + var(--caprow))}
.ind__ph{width:calc(100vw - 2 * var(--gut));height:calc((100vw - 2 * var(--gut)) / var(--kw,.8));
  left:50%;transform:translateX(-50%)}
.ind__slide{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ind__head{position:relative;z-index:3}

/* ================================================================== r55 */

/* every titled section: title, then its content, as one group centred in
   the screen. Same title size (--title), same gap to content (--gap-title),
   same section padding, on every section. */
#strips,#industries,#publish,#reliability,#clients{justify-content:center}
#strips .wrap,#publish .wrap,#reliability .wrap{flex:0 0 auto;justify-content:center}
.strips__title,.ind__title,.pub__title,.rely__h,.clients__title{font-size:var(--title);line-height:.95;margin:0 0 var(--gap-title)}
.ind__head{margin:0;padding:0 var(--gut)}
.ind__stage{margin:0}
.ind__cta{margin-top:14px}
.pub__rig{margin-top:0}
.rely__sub{margin:-12px 0 0}
.rely__frame{margin-top:var(--gap-title)}
.clients__row{flex:0 0 auto;justify-content:flex-start;gap:30px}

/* trusted by: the logos in colour, each on its own white tile, like the
   logo wall behind the team */
.mq__row{gap:14px;padding-right:14px}
.mq__logo,.mq__logo--cold-stone-creamery,.mq__logo--international-centre,.mq__logo--ups-store,.mq__logo--mcmaster-university{
  width:132px;height:64px;padding:13px 16px;box-sizing:border-box;
  object-fit:contain;background:#fff;border-radius:10px;filter:none;opacity:1}
.mq{gap:14px}

/* r55: the hero and its type are locked to the measured height too */
#hero{height:var(--app-h,100svh)}

/* ================================================================== r60
   the size dials in content.js (100% = as designed), phone */
.statement__h{font-size:calc(18.5vw * var(--k-statement,1))}
.fall__line{font-size:calc(9.6vw * var(--k-quote,1))}
.strips{height:calc((var(--app-h,100svh) - 2 * var(--pad-sec) - var(--gap-title) - 2.2 * var(--title)) * var(--k-strips,1))}
.ind__stage{--indw:calc((100vw - 2 * var(--gut)) * var(--k-ind,1));height:calc(var(--indw) / var(--kw,.8) + var(--caprow))}
.ind__ph{width:var(--indw);height:calc(var(--indw) / var(--kw,.8))}
.pub__shot{width:calc(100% * var(--k-pub,1));justify-self:center;margin-left:auto;margin-right:auto}
.rely__frame{width:calc((100vw - 2 * var(--gut)) * var(--k-rely,1))}

/* ================================================================== r62
   industries: dots under the photo; the current one fills up in gold while
   the photo waits, then the next photo slides in */
.ind__dots{margin:10px 0 0}
.ind__dot{position:relative}
.ind__dot.is-on::before{background:var(--paper);opacity:.32}
.ind__dot.is-on::after{content:"";position:absolute;left:2px;top:50%;width:24px;height:8px;margin-top:-4px;border-radius:4px;background:var(--gold)}
.ind__dot.is-fill::after{animation:indfill var(--every,5000ms) linear both}
@keyframes indfill{from{clip-path:inset(0 100% 0 0 round 4px)}to{clip-path:inset(0 0 0 0 round 4px)}}
@media (prefers-reduced-motion:reduce){.ind__dot.is-fill::after{animation:none}}

/* r65: the optional lines on a phone */
.sec-sub,.sec-end{font-size:17px;padding:0 var(--gut)}
.sec-sub{padding:0;margin-top:10px}
.demo__h:has(.sec-sub){flex-direction:column;justify-content:center;gap:0}
.demo__h .sec-sub{margin-top:6px;font-size:14px}

/* r69: the phone gets the same wall */
.lw,.lw-room{padding:4px;border-radius:8px}
.lw-room::before{inset:4px}
.lw-room__say{font-size:clamp(20px,6vw,24px);padding:0 8px}
.lw-card__t{font-size:15px}
#clients .clients__row{gap:0}
#clients{justify-content:center}

/* r74: the side screens of the wide contact wall are a laptop thing */
.demo__side{display:none}