/* ═══ DEVICE SHELLS ═══
   The hero phone settled the material and these follow it exactly: the rail is
   glass because a bezel is chrome, the screen is opaque because everything on
   it is content. No borders anywhere; the specular edge is a masked one pixel
   of padding, which is a highlight rather than a rule. */

.fr{position:relative;margin-inline:auto}
.fr-cap{margin:14px auto 0;max-width:44ch;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--ink3)}

/* ── the phone ────────────────────────────────────────────────────────── */
/* An iPhone 17 Pro Max, at its real proportions rather than at whatever height
   the content wanted. The display is 440 x 956 points, so the screen carries
   `aspect-ratio:440/956` and everything else is that ratio's own geometry
   scaled by the width we draw it at:

       screen width   330px          (440pt x 0.75)
       screen radius   47px          (62pt corner x 0.75)
       island       94 x 27px        (125 x 36.7pt x 0.75)
       home bar    105 x 4px         (140pt x 0.75)

   The height is the whole point of drawing a phone this way. A 2.17:1 screen
   is tall enough to hold a running conversation AND the controls that drive
   it, which is what lets the demo put the composer on the glass where it
   belongs instead of on the page underneath. */
/* Six pixels of rail, not eleven. See _art.css: on a 17 Pro the glass runs to
   within about two per cent of the body's width, and the old bezel was half
   again as wide as that, which is what made both phones on this site read as
   a phone in a case. Same numbers in both files because it is the same
   device seen twice. */
.fr-phone{width:min(100%,384px)}
.fr-glass{position:relative;padding:4px;border-radius:54px;
  background:linear-gradient(158deg,rgba(251,246,238,.17),rgba(251,246,238,.045) 46%,
    rgba(251,246,238,.02) 70%,rgba(251,246,238,.11));
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 44px 90px -46px rgba(0,0,0,.9),0 8px 26px -16px rgba(0,0,0,.7)}
.fr-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background:linear-gradient(150deg,rgba(251,246,238,.5),rgba(251,246,238,.06) 42%,
    rgba(251,246,238,.02) 70%,rgba(251,246,238,.22))}

.fr-screen{position:relative;border-radius:50px;overflow:hidden;
  display:flex;flex-direction:column;aspect-ratio:440/956;min-height:0;
  /* THE OS'S OWN WEATHER. This was gold high on the left and violet low on the
     right, which is the page's palette rather than the product's. The app it
     claims to be showing does something quieter: one warm bloom at the very
     top, under the status bar, and then a neutral near-black that goes cooler
     and darker the further down the screen you read. The cards carry their own
     gradient, so the ground does not have to carry it for them. Matching it
     matters more than looking rich, because this screen is a claim about what
     the reader gets when they open it. */
  background:
    radial-gradient(126% 40% at 30% -6%,rgba(201,162,39,.34) 0%,rgba(201,162,39,0) 60%),
    radial-gradient(84% 30% at 86% 16%,rgba(168,158,178,.10) 0%,rgba(168,158,178,0) 72%),
    /* AND ONE ON THE FLOOR, off the bottom left corner. The screen was lit
       from one corner and fell away to flat black over its bottom third,
       which is exactly where the composer and the reply chips sit: glass with
       nothing behind it to sample, so every control down there read as a grey
       rectangle. Warm, and weaker than the bloom at the top, so the screen is
       lit from two corners rather than by two colours. */
    radial-gradient(76% 32% at -8% 106%,rgba(201,162,39,.26) 0%,rgba(201,162,39,0) 68%),
    linear-gradient(180deg,#16130F 0%,#121115 30%,#0D0D10 64%,#08080A 100%)}
/* the same grain the page carries, so the screen is not glassier than the site */
.fr-grain{position:absolute;inset:0;pointer-events:none;opacity:.3;
  mix-blend-mode:overlay;background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.fr-screen > *:not(.fr-grain){position:relative;z-index:1}

.fr-status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:16px 26px 9px;flex:0 0 auto}
.fr-clock{font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;
  color:var(--ink);justify-self:start;font-variant-numeric:tabular-nums}
.fr-island{width:94px;height:27px;border-radius:99px;background:#000;
  box-shadow:inset 0 0 0 .5px rgba(251,246,238,.05)}
.fr-sys{justify-self:end;display:inline-flex;align-items:center;gap:5px}
.fr-bars{width:15px;height:10px;fill:var(--ink)}
.fr-wifi{width:14px;height:10px;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round}
/* the cap inside the box, same reason as the hero phone's: outside it, the
   screen's overflow:hidden takes it off at phone width */
.fr-batt{position:relative;width:25px;height:11px;display:block;flex:0 0 25px}
.fr-batt::before{content:"";position:absolute;left:0;top:0;width:22px;height:11px;
  border-radius:3.2px;box-shadow:inset 0 0 0 1px rgba(251,246,238,.42)}
.fr-batt i{position:absolute;left:1.6px;top:1.6px;height:7.8px;width:14.2px;
  border-radius:1.8px;background:var(--ink)}
.fr-batt::after{content:"";position:absolute;right:0;top:3.6px;width:1.6px;
  height:3.8px;border-radius:0 1px 1px 0;background:rgba(251,246,238,.42)}

.fr-body{flex:1 1 auto;min-height:0;padding:4px 13px 0;display:flex;
  flex-direction:column;gap:11px}
.fr-home{flex:0 0 auto;width:105px;height:4px;border-radius:99px;
  background:rgba(251,246,238,.34);margin:10px auto 8px}

/* ── the buttons on the rail ──────────────────────────────────────────── */
/* Drawn because the shell claims to be a phone and a phone has them. They sit
   ON the glass rail, half a pixel proud, so they read as machined out of the
   same piece rather than as three grey rectangles parked alongside it.
   Positions are the 17 Pro Max's: action button and the volume pair up the
   left, the side button lower down the right. */
.fr-btn{position:absolute;width:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,246,238,.30),rgba(251,246,238,.10));
  box-shadow:0 1px 3px rgba(0,0,0,.6)}
.fr-vol-a{left:-2px;top:20.5%;height:4.1%}
.fr-vol-b{left:-2px;top:27.5%;height:6.6%}
.fr-vol-c{left:-2px;top:35.6%;height:6.6%}
.fr-wake{right:-2px;top:29%;height:10.4%}

/* ── the tablet, same shell in landscape ──────────────────────────────── */
.fr-tab{width:min(100%,860px)}
.fr-tab .fr-glass{padding:13px;border-radius:34px}
.fr-tab .fr-screen{border-radius:22px;min-height:0;aspect-ratio:4/3}
.fr-tab .fr-body{padding:20px 22px}

/* ── the browser window ───────────────────────────────────────────────── */
/* Chrome is chrome, so the title rail is glass. The pane below it is opaque,
   because a dashboard is content and content never blurs what is behind it. */
.fr-mac{width:min(100%,1000px);border-radius:16px;overflow:hidden;
  box-shadow:0 44px 96px -50px rgba(0,0,0,.92),0 10px 30px -18px rgba(0,0,0,.7)}
.fr-chrome{position:relative;display:flex;align-items:center;gap:14px;
  padding:0 16px;height:42px;
  background:linear-gradient(180deg,rgba(251,246,238,.11),rgba(251,246,238,.05));
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%)}
.fr-dots{display:inline-flex;gap:8px;flex:0 0 auto}
/* Red, amber, green, because that is what the three dots on a Mac window are.
   Three grey circles are a drawing of a window; these are a window. Muted a
   few degrees off the system colours so they sit on a near black page without
   becoming the brightest thing on it. */
.fr-dots i{width:11px;height:11px;border-radius:50%;
  background:rgba(251,246,238,.2)}
.fr-dots i:nth-child(1){background:#E0665C}
.fr-dots i:nth-child(2){background:#E0B23C}
.fr-dots i:nth-child(3){background:#79A65C}
.fr-url{flex:1;text-align:center;font-size:12px;color:var(--ink3);
  letter-spacing:.01em;padding-right:46px}
.fr-pane{background:#0D0D0D;min-height:340px}

@media(max-width:560px){
  .fr-phone{width:min(100%,336px)}
  .fr-glass{padding:4px;border-radius:48px}
  .fr-screen{border-radius:44px}
  .fr-island{width:86px;height:25px}
  .fr-status{padding:14px 22px 8px}
  .fr-tab .fr-screen{aspect-ratio:3/4}
  .fr-chrome{height:36px;padding:0 12px}
  .fr-url{font-size:11px;padding-right:34px}
}

/* Soltrack v3, rebuilt 23 Oct 2026 on the shape of infinivoai.eu: colour only at the two ends of a page
   (the hero, and the closing call plus footer), everything between on one white sheet. The ground is the
   ORIGINAL v3 ground, Mikail's pick on 24 Oct after trying Heidar's: the deeper gold, one white corner light,
   heavy grain. One colour per trade: movers gold, restoration clay, garage doors steel. */
:root{--ink:#141317;--ink2:#57545E;--ink3:#74717B;--line:#E9E7E2;--paper:#F5F4F1;
  --r-sheet:64px;--max:1160px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--strip);color:#fff;font:400 16.5px/1.6 "Inter",-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"Montserrat","Inter",sans-serif;font-weight:600;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(38px,6vw,72px);line-height:1.04;max-width:16ch;margin:0 auto}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08;max-width:22ch;margin:0 auto}
h3{font-size:19px;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
/* Mikail, 28 Oct: no line ends on one to three words left over. Every block balances its lines, the drawings' own
   paragraphs too; their chat bubbles hold their last words together instead (mock.py), the question box's answer wraps
   plainly while it streams in, and a long paragraph also holds its last four words together (.nw, build.py glue). */
body{text-wrap:balance}
.mk{text-wrap:pretty}
.mk p:not(.mk-b){text-wrap:balance}
.ask-out .a:not(.fin),textarea,input{text-wrap:wrap}
.nw{white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto}
.tag{display:inline-block;font:500 11.5px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
section{scroll-margin-top:96px}
.center{text-align:center}

/* THEMES: --g0..--g3 the ground from top to foot, --glow the corner light. --strip is the body colour Safari
   paints above the page at first load (the hero's top row with the grain on it), --foot the colour under
   the footer (a pull past the end). Both measured off the render. */
.t-gold {--strip:#C29C3B;--foot:#6E4C10;--g0:#B88A33;--g1:#9C7121;--g2:#7E5814;--g3:#5F420E;--glow:255,247,226;--acc:#A97C19;--acc-ink:#85600F;--soft:#F6F0E1}
.t-clay {--strip:#C37459;--foot:#481E15;--g0:#B4604A;--g1:#974732;--g2:#7A3524;--g3:#5B271B;--glow:255,236,226;--acc:#A4472F;--acc-ink:#8C3823;--soft:#F8ECE7}
.t-steel{--strip:#949DA4;--foot:#2B2F35;--g0:#7C858E;--g1:#636B74;--g2:#4B525A;--g3:#363B42;--glow:240,246,255;--acc:#4F5D6C;--acc-ink:#45515E;--soft:#ECEFF2}

/* THE GROUND: light to deep, one white light in the bottom-left corner (the closing ground has it top left). */
.ground{position:relative;isolation:isolate;padding:150px 24px 170px;color:#fff;
  --ground:linear-gradient(180deg,var(--g0) 0%,var(--g1) 34%,var(--g2) 68%,var(--g3) 100%);
  background:radial-gradient(70% 60% at 0% 100%,rgba(var(--glow),.5) 0%,rgba(var(--glow),0) 68%),var(--ground)}
/* The grain is the ORIGINAL v3 grain, back by Mikail's call (24 Oct, "very very grainy, very textured"):
   fractal noise from an SVG filter, contrast stretched, tiled at 180px, in overlay at 70%. Heidar's 10% noise
   read as no texture at all. z-index -1 keeps it under the text and over the colour, inside the ground's own
   stacking context. */
.ground::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:overlay;opacity:.7;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
/* On an iPhone, Safari paints the strip above the page at first load in ONE flat colour, the body's, while the
   grain makes every pixel of the top row different. So on iOS only, the hero's top 72px start as that flat
   colour and melt into the grain below (ios-full-bleed, B). Desktop is untouched. */
@supports (-webkit-touch-callout:none){
  .hero::after{content:"";position:absolute;left:0;right:0;top:0;height:72px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--strip) 0%,var(--strip) 8%,transparent 100%)}
}
.ground .tag{color:rgba(255,255,255,.84)}
.ground h1,.ground h2{color:#fff;text-shadow:0 1px 24px rgba(40,24,0,.14)}
.lede{font-size:18px;line-height:1.6;max-width:56ch;margin:22px auto 0;color:rgba(255,255,255,.93)}
.hero{padding-top:184px;padding-bottom:200px;text-align:center}
.hero .lede{font-size:19px}
.hero-alt{margin-top:18px;font-size:14px;color:rgba(255,255,255,.8)}
.hero-alt a{color:#fff;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}

/* THE SHEET: white, rounded, laid over the ground; the closing ground tucks under its foot */
.sheet{position:relative;z-index:2;background:#fff;color:var(--ink);border-radius:var(--r-sheet);margin-top:calc(var(--r-sheet) * -1);padding:120px 24px 140px}
.sheet + .ground{margin-top:calc(var(--r-sheet) * -1);padding-top:calc(150px + var(--r-sheet))}
.sheet .tag{color:var(--acc-ink)}
.sheet h2{color:var(--ink)}
.sheet .lede{color:var(--ink2)}
.blk{max-width:var(--max);margin:0 auto}
.blk-head{max-width:900px}
.blk-head h2{margin:0;max-width:24ch}
.blk-head .lede{margin:18px 0 0;max-width:58ch;font-size:17px}

/* BUTTONS */
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;border-radius:999px;font:600 15.5px/1 "Inter",sans-serif;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-w{background:#fff;color:var(--ink);box-shadow:0 10px 30px -14px rgba(30,18,0,.55)}
.btn-w:hover{transform:translateY(-1px)}
.btn-g{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-g:hover{background:rgba(255,255,255,.1)}
.btn-k{background:var(--ink);color:#fff}
.btn-gold{background:linear-gradient(180deg,#D8B660,#B98E2E);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px -12px rgba(120,84,10,.7);font-variant-numeric:tabular-nums}
.btn-gold:hover{filter:brightness(1.05)}
.btn-k:hover{background:#2a2830}
.btn-o{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #DAD7D0}
.btn-o:hover{box-shadow:inset 0 0 0 1px #B9B5AC}
.btn-mute{background:var(--paper);color:var(--ink3);cursor:default;box-shadow:inset 0 0 0 1px var(--line)}
.btn .num{font-variant-numeric:tabular-nums;opacity:.82;font-weight:500;margin-left:4px}
.btn-sm{height:44px;padding:0 18px;font-size:14.5px}
/* From the two button reels Mikail sent (26 Oct): a main call to action leans toward the pointer and carries a light under
   it, an arrow steps forward on hover, and a press still gives a little. Motion and light only, no colour changes, and the
   header's button is left as it is. Fine pointers only, so a phone keeps the plain press. site.js sets --mx/--my/--tx/--ty. */
.btn svg:last-child{transition:transform .35s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .btn-gold,.btn-w:not(.hd-cta){position:relative;isolation:isolate;overflow:hidden}
  .btn-gold::after,.btn-w:not(.hd-cta)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(110px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),rgba(255,255,255,0) 70%)}
  .btn-w:not(.hd-cta)::after{background:radial-gradient(110px circle at var(--mx,50%) var(--my,50%),rgba(216,182,96,.24),rgba(216,182,96,0) 70%)}
  .btn-gold:hover::after,.btn-w:not(.hd-cta):hover::after{opacity:1}
  .btn-gold:hover,.btn-w:not(.hd-cta):hover{transform:translate(var(--tx,0px),calc(var(--ty,0px) - 1px))}
  .btn-gold:active,.btn-w:not(.hd-cta):active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.btn:hover svg:last-child{transform:translateX(3px)}}

/* HEADER: floats 14px down (never a band at the top edge, ios-full-bleed). At the top of the page it is the
   wide bar; once the page moves it folds into an island: logo, Book a fit call, menu. */
.hd{position:fixed;top:14px;left:16px;right:16px;z-index:50;max-width:var(--max);margin:0 auto;height:58px;padding:0 9px 0 22px;border-radius:999px;
  display:flex;align-items:center;gap:14px;background:rgba(40,28,6,.22);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 12px 32px -18px rgba(0,0,0,.45);
  transition:max-width .55s var(--ease),background .35s,box-shadow .35s,height .45s var(--ease)}
.hd-logo{display:flex;align-items:center;height:100%;flex:0 0 auto}
.hd-logo img{height:21px;width:auto}
.hd-nav{display:flex;gap:2px;margin-left:auto;white-space:nowrap;transition:opacity .25s}
.hd-nav a{font:500 14.5px/1 "Inter",sans-serif;color:rgba(255,255,255,.92);text-decoration:none;padding:10px 13px;border-radius:999px;transition:background .2s}
.hd-nav a:hover{background:rgba(255,255,255,.12)}
.hd-cta{height:42px;padding:0 18px;font-size:14.5px;flex:0 0 auto}
/* the island opens into every section: tap anywhere on it that isn't a link or the button (no hamburger) */
.hd{cursor:pointer}
.hd-panel{position:absolute;z-index:-1;top:0;left:0;right:0;padding:72px 12px 14px;border-radius:29px;background:rgba(20,19,23,.985);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -28px rgba(0,0,0,.6);cursor:default;
  clip-path:inset(0 0 calc(100% - 58px) 0 round 29px);opacity:0;visibility:hidden;
  transition:clip-path .55s cubic-bezier(.65,0,.3,1),opacity .2s .35s,visibility 0s .55s}
.hd.open .hd-panel{clip-path:inset(0 0 0 0 round 29px);opacity:1;visibility:visible;transition:clip-path .6s cubic-bezier(.65,0,.3,1),opacity .15s}
.hd-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.hd-h{margin:4px 18px 6px;font:600 11.5px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hd-panel a{display:block;padding:13px 18px;border-radius:16px;color:#fff;text-decoration:none;font:500 16px/1.2 "Inter",sans-serif;
  opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .35s var(--ease),background .2s}
.hd.open .hd-panel a{opacity:1;transform:none;transition:opacity .35s .2s,transform .5s .2s var(--ease),background .2s}
.hd.open .hd-panel div > a:nth-of-type(2){transition-delay:.25s}.hd.open .hd-panel div > a:nth-of-type(3){transition-delay:.3s}
.hd.open .hd-panel div > a:nth-of-type(4){transition-delay:.35s}.hd.open .hd-panel div > a:nth-of-type(5){transition-delay:.4s}
.hd.open .hd-panel div > a:nth-of-type(6){transition-delay:.45s}
.hd-panel a:hover{background:rgba(255,255,255,.08)}
.hd.open{background:rgba(20,19,23,.6)}
/* the island */
.hd.mini{max-width:430px;height:54px;background:rgba(20,19,23,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 16px 36px -18px rgba(0,0,0,.55)}
.hd.mini .hd-nav{opacity:0;pointer-events:none;width:0;overflow:hidden;margin-left:auto}
.hd.mini .hd-cta{height:38px;padding:0 16px;font-size:14px}
/* six links since Pricing joined (26 Oct): a little less air between them just above the fold-away width */
@media (min-width:901px) and (max-width:1000px){.hd-nav a{padding:10px 9px}}
@media (max-width:900px){.hd{max-width:none}.hd-nav{display:none}.hd-cta{margin-left:auto;height:40px;padding:0 16px;font-size:14px}
  .hd.mini{max-width:none}.hd-grid{grid-template-columns:1fr}}

/* FOUNDER: the big photo, then what I run and why */
.idea{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:72px;align-items:center;max-width:1040px;margin:0 auto}
.idea-photo{margin:0;border-radius:30px;overflow:hidden;aspect-ratio:1/1;background:#FFEDD8;box-shadow:0 0 0 1px rgba(20,19,23,.05),0 40px 70px -50px rgba(20,19,23,.4)}
.idea-photo img{width:100%;height:100%;object-fit:cover}
.idea-text{max-width:540px}
.idea-lead{font:600 22px/1.35 "Montserrat","Inter",sans-serif;letter-spacing:-.015em;color:var(--ink)}
.idea-text p + p{margin-top:18px}
.idea-text .body{color:var(--ink2);font-size:17px;line-height:1.68}
.idea-text .idea-sig{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.idea-sig b{display:block;font:600 16px/1.3 "Inter",sans-serif;color:var(--ink)}
.idea-sig span{display:block;margin-top:5px;font-size:14px;color:var(--ink3)}

/* LIVE DESKS: one row per trade */
.desks{margin-top:44px;border-top:1px solid var(--line)}
.dk{display:grid;grid-template-columns:340px minmax(0,1fr) auto;gap:32px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.dk-k{display:flex;align-items:center;gap:8px;font:500 11px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.dk-k i{width:7px;height:7px;border-radius:50%;background:#C9C6CE}
.dk.live .dk-k i{background:#2DA44E;box-shadow:0 0 0 3px rgba(45,164,78,.16)}
.dk-n{margin-top:9px;font:600 19px/1.25 "Montserrat","Inter",sans-serif;letter-spacing:-.015em;color:var(--ink)}
.dk-n span{font-weight:500;color:var(--ink3)}
.dk-why{color:var(--ink2);font-size:16px;line-height:1.55;max-width:42ch}
.dk-go{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.desks-floor{margin-top:22px;max-width:62ch;font-size:14.5px;color:var(--ink3)}

/* PRODUCT SECTIONS: the heading and the drawing in the wide column, a short side note in the narrow one,
   sitting low beside the drawing, alternating sides down the page */
.ms{display:grid;grid-template-columns:240px minmax(0,800px);justify-content:center;column-gap:56px;row-gap:26px;max-width:var(--max);margin:0 auto}
.ms-head{grid-column:2;grid-row:1}
.ms-head h2{margin:0;max-width:22ch}
.ms-fig{grid-column:2;grid-row:2;min-width:0}
.ms-side{grid-column:1;grid-row:2;align-self:center;font-size:15px;line-height:1.62;color:var(--ink2);padding-bottom:6px}
.ms-side b{color:var(--ink);font-weight:600}
.ms.flip{grid-template-columns:minmax(0,800px) 240px}
.ms-try{display:table;margin-top:12px;font-weight:600;color:var(--acc-ink);text-decoration:none;border-bottom:1px solid currentColor}
.ms-try::after{content:" \2192"}
.ms.flip .ms-head,.ms.flip .ms-fig{grid-column:1}
.ms.flip .ms-side{grid-column:2}
.ms .sc{margin:0;display:block}
.ms .sc-stage{border-radius:28px}

/* one rhythm down the sheet, whatever the blocks are */
.sheet > section + section{margin-top:150px}
.mk-wait{min-height:420px;border-radius:28px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.sheet .fine{color:var(--ink3)}
.blk.center h2{margin:0 auto}
.blk.center .lede{margin-left:auto;margin-right:auto}

/* THE FAIR COMPARISON */
.cmp{margin-top:46px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cmp-h{padding:18px 0 14px;font:500 11px/1.4 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line)}
.cmp-h.us{color:var(--acc-ink)}
.cmp-c{display:flex;gap:12px;align-items:flex-start;padding:19px 24px 19px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.cmp-c.them{color:var(--ink3)}
.cmp-c.us{color:var(--ink)}
.cmp-c svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cmp-c.them svg{stroke:#C9C6CE}
.cmp-c.us svg{stroke:var(--acc)}

/* THE PILOT: three cards */
.pl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:46px}
.pl3 article{padding:28px 28px 30px;border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 24px 48px -40px rgba(20,19,23,.35)}
.pl3 .n{font:500 12px/1 "Inter",sans-serif;color:var(--ink3)}
.pl3 h3{margin-top:22px;font-size:20px;color:var(--ink)}
.pl3 .sub{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--acc-ink)}
.pl3 p.b{margin-top:14px;color:var(--ink2);font-size:15.5px;line-height:1.62}
.pl-line{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px;padding:20px 24px;border-radius:22px;background:var(--soft)}
.pl-line p{color:var(--ink);font-weight:500}

/* PRICING (26 Oct, Mikail: "a pricing section just like heidar"): two cards on his shape, ours in look. Card one is
   the offer, outlined in ink. Subgrid lines up title, price, terms, button and list across both cards. */
.pr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:16px;margin-top:46px}
.pr-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;padding:30px 30px 32px;border-radius:26px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line),0 24px 48px -40px rgba(20,19,23,.35)}
.pr-card.main{box-shadow:inset 0 0 0 1.5px var(--ink),0 30px 60px -38px rgba(20,19,23,.5)}
.pr-top{display:flex;align-items:flex-start;align-content:flex-start;justify-content:space-between;gap:10px 12px;flex-wrap:wrap}
.pr-top h3{margin:0;font-size:20px;line-height:1.3;color:var(--ink)}
.pr-label{font:500 11px/1 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink);background:var(--soft);padding:7px 11px;border-radius:999px;white-space:nowrap}
.pr-desc{margin:12px 0 0;color:var(--ink2);font-size:15.5px;line-height:1.6}
.pr-price{margin:24px 0 0;font:600 44px/1.05 "Montserrat","Inter",sans-serif;letter-spacing:-.025em;color:var(--ink);align-self:end}
.pr-terms{margin:12px 0 0;color:var(--ink3);font-size:14.5px;line-height:1.55}
.pr-card .btn{margin-top:24px;width:100%}
.pr-list{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:12px;align-content:start}
.pr-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink2)}
.pr-list svg{flex:0 0 17px;width:17px;height:17px;margin-top:3px;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pr-list a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* QUESTIONS: your own question first, then the list */
.qa .ask,.qa .qs{max-width:820px;margin-left:auto;margin-right:auto}
/* the questions sit in the middle of the page (Mikail, 25 Oct): the heading centred over the box and the list */
.qa .blk-head{margin-left:auto;margin-right:auto;text-align:center}
.qa .blk-head h2{margin-left:auto;margin-right:auto}
.ask{margin-top:40px;padding:24px;border-radius:26px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.ask-top{display:flex;gap:14px;align-items:flex-start}
.ask-av{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #DAD7D0,0 4px 10px -6px rgba(20,19,23,.35);display:grid;place-items:center}
.ask-av img{width:21px;height:auto}
.ask-t{font:600 17px/1.3 "Inter",sans-serif;color:var(--ink)}
.ask-i{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.ask-form{display:flex;gap:8px;margin-top:18px;padding:6px 6px 6px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #DAD7D0,0 8px 20px -16px rgba(20,19,23,.4);transition:box-shadow .2s}
.ask-form:focus-within{box-shadow:inset 0 0 0 1.5px var(--acc),0 8px 20px -16px rgba(20,19,23,.4)}
.ask-form input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 16px/1.4 "Inter",sans-serif;color:var(--ink)}
.ask-form input::placeholder{color:var(--ink3)}
.ask-form button{flex:0 0 auto;height:42px;padding:0 18px;border-radius:999px;border:0;background:linear-gradient(180deg,#D8B660,#B98E2E);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -10px rgba(120,84,10,.7);font:600 14.5px/1 "Inter",sans-serif;cursor:pointer}
.ask-form button:disabled{opacity:.5;cursor:default}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ask-chips button{border:0;cursor:pointer;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:500 13.5px/1.2 "Inter",sans-serif;color:var(--ink2);transition:box-shadow .2s,color .2s}
.ask-chips button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px #C9C5BC}
.ask-out{display:none;margin-top:16px;padding:18px 20px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:15.5px;line-height:1.62;color:var(--ink)}
.ask-out.on{display:block}
.ask-out .q{font-size:13px;color:var(--ink3);margin-bottom:8px}
.ask-out .a{white-space:pre-wrap}
.ask-out .more{margin-top:12px;font-size:14px;color:var(--ink2)}
.ask-out .more a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.ask-foot{margin-top:12px;font-size:12.5px;color:var(--ink3)}
.qs{margin-top:28px;border-top:1px solid var(--line)}
.qs details{border-bottom:1px solid var(--line)}
.qs summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:20px 2px;font:500 16.5px/1.45 "Inter",sans-serif;color:var(--ink)}
.qs summary::-webkit-details-marker{display:none}
.qs summary i{margin-left:auto;flex:0 0 auto;position:relative;width:16px;height:16px;transition:transform .3s var(--ease)}
.qs summary i::before,.qs summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1.6px;border-radius:2px;background:var(--ink2)}
.qs summary i::after{transform:rotate(90deg);transition:transform .3s var(--ease)}
.qs details[open] summary i::after{transform:rotate(0)}
.qs details p{padding:0 40px 22px 2px;color:var(--ink2);line-height:1.68}

/* THE CLOSING CALL, on the last ground, and the footer under it */
.g-end{padding-bottom:40px;background:radial-gradient(70% 60% at 0% 0%,rgba(var(--glow),.62) 0%,rgba(var(--glow),0) 68%),var(--ground)}
/* the two of us, above the closing call on the home page */
.team{max-width:620px;margin:0 auto 88px;text-align:center;color:rgba(255,255,255,.94);font-size:16.5px;line-height:1.6}
.team .faces{display:flex;justify-content:center;margin-bottom:18px}
.team .faces img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#FFEDD8;box-shadow:0 0 0 3px rgba(255,255,255,.42)}
.team .faces img + img{margin-left:-10px}
.book{max-width:760px;margin:0 auto;text-align:center}
.book h2{max-width:18ch}
.book .lede{max-width:54ch}
.book-alt{margin-top:18px;font-size:14.5px;color:rgba(255,255,255,.92)}
.book-alt a{color:#fff;text-underline-offset:3px}
.ft{max-width:var(--max);margin:120px auto 0;padding-top:44px;border-top:1px solid rgba(255,255,255,.2);display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px;text-align:left;font-size:14.5px}
.ft img{height:20px;width:auto;margin-bottom:16px}
.ft p{color:rgba(255,255,255,.94);max-width:34ch;line-height:1.6}
.ft h4{margin:0 0 12px;font:600 11.5px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.ft a{display:block;color:#fff;text-decoration:none;padding:5px 0;opacity:.92}
.ft a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
/* The footer map: the desks as a list, and as pins on a dotted lower 48 (static/us-dots.svg, tools/usmap.py) */
.ft-map{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:center;padding-bottom:48px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-desk{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:10px;padding:13px 0;border-top:1px solid rgba(255,255,255,.1)}
.ft-desk:first-of-type{border-top:0;padding-top:4px}
.ft-desk > :not(i){grid-column:2}
.ft-desk i{grid-row:1 / span 3;width:8px;height:8px;margin-top:7px;border-radius:50%;background:rgba(255,255,255,.38)}
.ft-desk.live i{background:#8BE3A8;box-shadow:0 0 0 3px rgba(139,227,168,.2)}
.ft .ft-desk a{display:block;padding:0;opacity:1}
.ft .ft-b{font-weight:600;font-size:15.5px;color:#fff;text-decoration:none}
.ft-c{color:rgba(255,255,255,.92);font-size:14px;line-height:1.5}
.ft-n{font-size:14px;line-height:1.5;color:rgba(255,255,255,.84)}
.ft .ft-desk a.ft-n{display:inline-block;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.ft-fig{position:relative;margin:0;width:100%;max-width:680px;justify-self:end}
.ft-fig img{display:block;width:100%;height:auto;margin:0;opacity:.32}
.pin{position:absolute;width:0;height:0}
.pin i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.78);box-shadow:0 0 0 4px rgba(255,255,255,.14),0 4px 14px rgba(0,0,0,.35)}
.pin.live i{background:#fff}
.pin.live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.pin b{position:absolute;top:-13px;white-space:nowrap;font:600 12.5px/1 "Inter",sans-serif;color:#fff;padding:7px 10px;border-radius:999px;background:rgba(20,19,23,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pin.r b{left:14px}
.pin.l b{right:14px}
.pin.t b{top:-42px;left:50%;transform:translateX(-50%)}
.ft .legal{grid-column:1/-1;max-width:none;color:rgba(255,255,255,.84);font-size:13px;margin-top:18px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}

/* TRADE PAGES: what the desk writes down, the three steps */
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:44px 0 0}
.chips span{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:500 15.5px/1.3 "Inter",sans-serif;color:var(--ink)}
.chips svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.line{max-width:62ch;margin:26px 0 0;color:var(--ink2)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:46px}
.steps .card{padding:28px 28px 30px;border-radius:26px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.steps .card h3{color:var(--ink)}
.steps .card p{margin-top:10px;color:var(--ink2);font-size:15.5px;line-height:1.6}
.steps .card .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:18px;background:var(--soft);color:var(--acc);font:600 14px/1 "Inter",sans-serif}

/* PILOT BOX on the personal pages: a white card inside the sheet */
.pilot{max-width:980px;margin:0 auto;padding:60px 40px;border-radius:36px;text-align:center;background:var(--soft);color:var(--ink)}
.pilot .tag{color:var(--acc)}
.pilot h2{color:var(--ink)}
.pilot .lede{color:var(--ink2)}

/* THE CALL SCENE (from the 17 Oct prototype) */
.rail-wrap{display:flex;justify-content:center;margin:34px 0 26px}
.rail{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:#ECEAE5;max-width:100%;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail button{position:relative;z-index:1;flex:0 0 auto;border:0;background:none;font:500 14.5px/1 "Inter",sans-serif;color:var(--ink2);padding:12px 19px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .25s}
.rail button[aria-pressed="true"]{color:var(--ink)}
.lz{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:#fff;opacity:0;box-shadow:0 1px 2px rgba(20,19,23,.08),0 6px 16px -8px rgba(20,19,23,.30)}
.sc{max-width:var(--max);margin:44px auto 0;display:grid;grid-template-columns:220px minmax(0,1fr);gap:44px;align-items:start}
.rail-wrap + .sc{margin-top:0}
.sc-note{padding-top:90px;font-size:14.5px;line-height:1.62;color:var(--ink2);margin:0}
.sc-note b{color:var(--ink);font-weight:600}
.sc-stage{margin:0;background:var(--paper);border-radius:30px;padding:26px;box-shadow:inset 0 0 0 1px var(--line);display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:26px}
.sc-phone{width:100%}
.fr-screen{container-type:inline-size}
.cl{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;padding:14cqw 7cqw 9cqw}
.cl-name{font:600 7.6cqw/1.12 "Inter",sans-serif;letter-spacing:-.01em;margin:0 0 2cqw}
.cl-time{font:400 4.6cqw/1 "Inter",sans-serif;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;margin:0}
.cl-keys{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6cqw 3cqw;width:100%}
.ky{display:flex;flex-direction:column;align-items:center;gap:2cqw;font-size:3.5cqw;color:rgba(255,255,255,.86)}
.ky i{width:19cqw;height:19cqw;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center}
.ky svg{width:8.5cqw;height:8.5cqw;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ky.end i{background:#EB4D3D}
.lc{background:#fff;border-radius:20px;display:flex;flex-direction:column;min-height:0;height:100%;box-shadow:0 0 0 1px var(--line),0 20px 44px -28px rgba(20,19,23,.22)}
.lc-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2)}
.lc-live{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-live i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#C9C6CE;transition:background .3s}
.lc.on .lc-live i{background:#E5484D}
.lc-num,.lc-when,.lc-timer{font-family:"Inter",sans-serif;font-size:12px;white-space:nowrap}
.lc-when{margin-left:auto;color:var(--ink3)}
.lc-timer{display:none}
.lc-log{flex:1;min-height:300px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:11px;padding:18px 20px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);mask-image:linear-gradient(180deg,transparent 0,#000 56px)}
.lc-idle{color:var(--ink3);font-size:13.5px;text-align:center;margin:auto 0}
.ln{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.52}
.ln .who{font:500 10.5px/2.05 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.ln.desk .who{color:var(--acc)}
.ln .say{color:var(--ink)}
.ln.caller .say{color:#3D3B43}
.caret{display:inline-block;width:1.5px;height:1.05em;background:var(--acc);vertical-align:-2px;margin-left:1px}
.cp{display:flex;align-items:baseline;gap:9px;margin-left:68px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.cp b{flex:0 0 auto;font:600 10px/1.6 "Inter",sans-serif;letter-spacing:.08em;color:var(--acc);padding:1px 8px;border-radius:999px;background:var(--soft)}
.lc-cap{border-top:1px solid var(--line);padding:14px 20px 18px;background:#FCFBF9;border-radius:0 0 20px 20px}
.lc-caphead{display:flex;justify-content:space-between;font:500 10.5px/1 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.lc-caphead b{color:var(--ink);font-weight:600}
.lc-bar{height:3px;border-radius:999px;background:#EEECE7;margin:10px 0 12px;overflow:hidden}
.lc-bar i{display:block;height:100%;width:0;background:var(--acc);border-radius:999px;transition:width .35s var(--ease)}
.lc-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin:0}
.rw{min-width:0}
.rw dt{font:500 9.5px/1.4 "Inter",sans-serif;letter-spacing:.08em;color:var(--ink3)}
.rw dd{margin:2px 0 0;font-size:13px;line-height:1.35;color:#CFCCD3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.rw.on dd{color:var(--ink)}
.rw.on dt{color:var(--acc)}
.demo-flag{display:block;margin-top:14px;text-align:center;font-size:13px;color:var(--ink3)}

/* REVEAL, once, on first sight */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pin.live i::after{display:none}[data-reveal]{opacity:1;transform:none;transition:none}.lz,.lc-bar i,.rw dd,.btn,.hd{transition:none!important}}

/* SMALL SCREENS */
/* the demos keep their text beside them until 940px: a drawing scales down with its column, it never reflows */
@media (max-width:940px){
  .ms,.ms.flip{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .ms-head,.ms.flip .ms-head{grid-column:1;grid-row:1}
  .ms-fig,.ms.flip .ms-fig{grid-column:1;grid-row:2;margin-top:4px}
  .ms-side,.ms.flip .ms-side{grid-column:1;grid-row:3;align-self:start;max-width:60ch;padding:0;font-size:16px}
}
@media (max-width:1100px){
  .dk{grid-template-columns:minmax(0,1fr) auto;gap:10px 28px}
  .dk-why{grid-column:1;grid-row:2}
  .dk-go{grid-column:2;grid-row:1 / span 2}
}
@media (max-width:980px){
  .idea{grid-template-columns:minmax(0,1fr);gap:40px;max-width:560px}
  .idea-photo{max-width:440px;width:100%;margin:0 auto}
  .pl3,.steps,.pr{grid-template-columns:1fr}
  .sc{grid-template-columns:1fr;gap:18px}
  .sc-note{padding-top:0;max-width:60ch;margin:0 auto;text-align:center}
  .ft{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--r-sheet:40px}
  .ground{padding:120px 18px 140px}
  .hero{padding-top:138px;padding-bottom:150px}
  .sheet{padding:76px 18px 96px}
  .sheet + .ground{padding-top:calc(110px + var(--r-sheet))}
  .sheet > section + section{margin-top:104px}
  .pr{margin-top:34px}.pr-card{padding:24px 22px 26px;border-radius:22px}.pr-price{font-size:38px}
  .btns .btn{width:100%;max-width:360px;padding:0 18px;gap:8px}
  .btn .num{margin-left:2px}
  .idea-photo{border-radius:24px}
  .idea-lead{font-size:20px}
  .idea-text .body{font-size:16.5px}
  .dk{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px 0}
  .dk-why,.dk-go{grid-column:1;grid-row:auto}
  .dk-go{justify-content:flex-start;margin-top:4px}
  .dk-go .btn{flex:1 1 auto}
  .cmp{grid-template-columns:minmax(0,1fr)}
  .cmp-h{display:none}
  .cmp-c{padding:14px 0}
  .cmp-c.them{padding-bottom:4px;border-bottom:0;font-size:14.5px}
  .cmp-c.us{padding-top:4px}
  .pl-line{flex-direction:column;align-items:flex-start}
  .ask{padding:18px;border-radius:22px}
  .ask-form{padding-left:14px}
  .ask-form button{padding:0 14px}
  .qs details p{padding-right:4px}
  .chips{grid-template-columns:1fr 1fr}
  .sc-stage{grid-template-columns:1fr;padding:10px;border-radius:24px}
  .sc-phone{max-width:236px;margin:8px auto 6px}
  .lc-timer{display:inline;margin-left:auto;color:var(--ink3)}
  .lc-when,.lc-num{display:none}
  .lc-log{flex:0 0 auto;min-height:0;height:340px;padding:16px} /* flex:1 would zero the basis and the box would shrink to the latest line */
  .ln{grid-template-columns:50px minmax(0,1fr);font-size:13.5px}
  .cp{margin-left:60px}
  .lc-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft{grid-template-columns:1fr 1fr;gap:22px;margin-top:110px}
  .ft .brand{grid-column:1/-1}
  .ft-map{grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:30px}
  .ft-fig{order:-1;justify-self:stretch;max-width:none}
  .pin b{font-size:11.5px;padding:6px 8px;top:-12px}
  .pin.t b{top:-38px}
  .pilot{padding:48px 22px;border-radius:30px}
}

/* personal pages (/for/<slug>/) */
.vid{position:relative;max-width:960px;margin:46px auto 0;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0D0C10;box-shadow:0 30px 70px -40px rgba(20,12,0,.6),inset 0 0 0 1px var(--line)}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;border-radius:inherit}
.fine{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.74)}
.setup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:920px;margin:48px auto 0;padding:0;list-style:none}
.setup li{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;border-radius:22px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:16px;line-height:1.55;text-align:left}
.setup svg{flex:0 0 22px;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sheet .pilot + .setup,.setup + .pilot{margin-top:72px}
@media (max-width:760px){.setup{grid-template-columns:1fr}.vid{border-radius:18px;margin-top:34px}}

/* THE CALL SCREEN AS iOS DRAWS IT (25 Oct): white status bar on the dark screen, the system font, no print
   grain on the glass, and the soft dark blur iOS puts behind a caller with no poster */
.sc-phone .fr-screen{--ink:#fff;--ios:"Inter",sans-serif;
  background:radial-gradient(120% 50% at 50% -4%,#55493F 0%,rgba(85,73,63,0) 72%),linear-gradient(180deg,#2B2A2E 0%,#1B1B1E 52%,#0E0E10 100%)}
.sc-phone .fr-grain{display:none}
.sc-phone .fr-clock,.sc-phone .cl-name,.sc-phone .cl-time,.sc-phone .ky{font-family:var(--ios)}
.sc-phone .fr-clock{font-weight:600;letter-spacing:-.015em}
.sc-phone .ky i{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sc-phone .ky.end i{background:#FF3B30}

/* the founder swap: photo and words cross-fade together */
.idea-photo img,.idea [data-f]{transition:opacity .45s var(--ease),filter .45s var(--ease),transform .55s var(--ease)}
.idea.swap-out .idea-photo img,.idea.swap-out [data-f]{opacity:0;filter:blur(6px);transform:translateY(6px)}
.idea-photo img{object-fit:cover;width:100%;height:100%}

/* EVERY iPHONE ON THE SITE IS THE /try/ iPHONE (25 Oct): dark titanium, and the island, clock and icons at iOS 26
   proportions of the screen's own width (an iPhone 17 Pro is 402 points wide), so they hold at any size */
.fr-phone .fr-glass{background:linear-gradient(145deg,#4A4A4E 0%,#2A2A2D 30%,#3D3D41 55%,#1E1E21 80%,#38383C 100%)!important}
.fr-phone .fr-btn{background:linear-gradient(90deg,#2C2C2F,#4C4C50 60%,#2A2A2D)!important}
.fr-phone .fr-status{position:relative;display:block;height:14.7cqw;padding:0!important}
.fr-phone .fr-clock{position:absolute;left:0;top:0;width:34.3cqw;height:14.7cqw;display:flex;align-items:center;justify-content:center;padding-left:1.5cqw;
  font:600 4.1cqw/1 "Inter",sans-serif!important;letter-spacing:-.015em}
.fr-phone .fr-island{position:absolute;left:50%;top:2.7cqw;width:31.3cqw!important;height:9.2cqw!important;margin-left:-15.65cqw;border-radius:5cqw}
.fr-phone .fr-sys{position:absolute;right:0;top:0;width:34.3cqw;height:14.7cqw;display:flex;align-items:center;justify-content:center;gap:1.5cqw;padding-right:1.5cqw}
.fr-phone .fr-bars{width:4.4cqw!important;height:2.7cqw}
.fr-phone .fr-wifi{width:3.9cqw!important;height:2.8cqw}
.fr-phone .fr-batt{width:6.1cqw;height:2.9cqw;flex:0 0 6.1cqw}
.fr-phone .fr-batt::before{width:5.5cqw;height:2.9cqw;border-radius:.9cqw}
.fr-phone .fr-batt i{left:.45cqw;top:.45cqw;height:2cqw;width:3.8cqw;border-radius:.5cqw}
.fr-phone .fr-batt::after{right:0;top:1cqw;width:.4cqw;height:.9cqw}

/* ONE FRAME FOR EVERY iPHONE (25 Oct, round 4): the home page Calls phone, as Mikail asked: a thin titanium band
   and a thin black border round the glass, both a share of the phone's own width so they hold at any size, and the
   home indicator low and grey, 1.6% of the screen's width above its bottom edge as on a real iPhone */
.fr-phone{container-type:inline-size}
.fr-phone .fr-glass{padding:max(2px,.95cqw)!important;border-radius:15.6cqw!important}
.fr-phone .fr-screen{border:max(3px,1.45cqw) solid #050506!important;border-radius:14.6cqw!important}
.fr-phone .fr-home{width:34.6cqw!important;height:max(3px,1.25cqw)!important;margin:3.6cqw auto 1.6cqw!important;border-radius:99px;
  background:rgba(0,0,0,.42)!important}
.sc-phone .fr-home{background:rgba(255,255,255,.5)!important}

/* the home page call screens use the Phone app's own key set and proportions (iOS 26: 78pt keys, 31pt glyphs, 15pt labels
   on a 402pt screen; the duration over the name), the same as /try/ */
.sc-phone .cl{padding-top:20.5cqw}
.sc-phone .cl-time{order:-1;margin:0 0 1.2cqw;font:400 5.5cqw/1.2 var(--ios);color:rgba(235,235,245,.78)}
.sc-phone .cl-name{font:700 8.6cqw/1.15 var(--ios);letter-spacing:-.01em}
.sc-phone .ky{gap:2cqw;font:400 3.7cqw/1 var(--ios);color:#fff}
.sc-phone .ky i{width:19.4cqw;height:19.4cqw;background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.sc-phone .ky svg{width:7.7cqw;height:7.7cqw;fill:none;stroke:none;color:#fff}
.sc-phone .ky.facetime i{color:rgba(255,255,255,.34)}
.sc-phone .ky.facetime svg{color:inherit}
.sc-phone .ky.end i{background:#EB3B30}
.sc-phone .ky.end svg{width:9cqw;height:9cqw}

/* the footer map's cities open their desk on /try/ */
a.pin{display:block;text-decoration:none;color:#fff}
a.pin b{transition:background .2s,transform .2s}
a.pin:hover b,a.pin:focus-visible b{background:rgba(20,19,23,.78)}
a.pin:hover i{background:#fff}
a.pin:focus-visible{outline:none}

/* HEADINGS THAT KEEP THEIR LINES (26 Oct): each line of a .fit heading stays on one line at every width, and site.js
   gives every .fit heading on the page the one size at which its longest line still fits (36px at most), so the
   headings stay the same size as each other. Before the script runs, a width-based guess close to it. */
h2.fit{max-width:none;font-size:var(--fit-h2,min(36px,calc((100vw - 44px) / 24)));line-height:1.14;letter-spacing:-.025em}
h2.fit .h2l{display:block;white-space:nowrap}

/* THE FOOT ON A PHONE (26 Oct): it ended in 140px of empty ground under the copyright line (the phone padding of
   .ground beat .g-end's), with wide gaps above and the legal links as a third stacked column. Tighter, same order. */
@media (max-width:760px){
  .sheet + .ground.g-end{padding-top:calc(76px + var(--r-sheet))}
  .g-end{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .team{margin-bottom:60px}
  .ft{margin-top:64px;padding-top:32px;row-gap:18px}
  .ft-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;column-gap:20px}
  .ft-legal h4{flex-basis:100%}
  .ft .legal{margin-top:6px;padding-top:18px}
}

/* THE LEGAL PAGES (26 Oct): a short gold head, then the text in one readable column on the white sheet: the short
   version in a soft box, numbered sections, tables that become labelled rows on a phone (legal.py, build.legal_page) */
.lg-hero{padding-top:150px;padding-bottom:140px}
.lg-hero h1{font-size:clamp(30px,4.2vw,52px);max-width:20ch;margin:0 auto}
.lg-date{margin-top:14px;font-size:13px;color:rgba(255,255,255,.8)}
.lg-sheet{padding-top:72px;padding-bottom:110px}
.lg{max-width:720px;margin:0 auto;color:var(--ink);font-size:16px;line-height:1.65}
.lg-short{padding:20px 22px;border-radius:18px;background:var(--soft);box-shadow:inset 0 0 0 1px #E8D9B2;font-size:15.5px;line-height:1.6;color:var(--ink)}
.lg-short b{font-weight:600}
.lg-sec{margin-top:46px;scroll-margin-top:96px}
.lg-sec h2{display:flex;align-items:baseline;gap:14px;max-width:none;margin:0 0 14px;font:600 22px/1.25 "Montserrat","Inter",sans-serif;letter-spacing:-.015em;text-align:left}
.lg-sec h2 span{flex:0 0 auto;font:500 13px/1 "Inter",sans-serif;letter-spacing:.06em;color:var(--acc-ink);font-variant-numeric:tabular-nums}
.lg-sec h3{margin:24px 0 6px;font:600 16px/1.35 "Inter",sans-serif;color:var(--ink)}
.lg-sec p{margin:0 0 12px;color:var(--ink2)}
.lg-sec ul{margin:0 0 12px;padding-left:20px;color:var(--ink2)}
.lg-sec li{margin:5px 0}
.lg a{color:var(--acc-ink);text-underline-offset:3px}
.lg-tw{margin:6px 0 14px;overflow-x:auto}
.lg-tbl{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.lg-tbl th{white-space:nowrap;padding:10px 14px 9px 0;text-align:left;font:600 11.5px/1.3 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line)}
.lg-tbl td{padding:11px 14px 11px 0;vertical-align:top;color:var(--ink2);border-bottom:1px solid var(--line)}
.lg-tbl td:first-child{color:var(--ink);font-weight:500}
@media (min-width:761px){.lg-tbl td:first-child{white-space:nowrap}}  /* a row's name on one line */
/* A table of four columns or more needs about 1000px before its cells stop breaking a word off (28 Oct). Below that it
   is labelled rows, as on a phone; above it a guide's table spreads past the text column, the same on both sides. */
@media (max-width:999px){
  .lg-tw.wide .lg-tbl thead{display:none}
  .lg-tw.wide .lg-tbl tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .lg-tw.wide .lg-tbl td{display:block;padding:2px 0;border:0}
  .lg-tw.wide .lg-tbl td:not(:first-child)::before{content:attr(data-h) ": ";color:var(--ink3);font-size:13px}
}
@media (min-width:1000px){.lg .lg-tw.wide{--tw:min(calc(100vw - 80px),1160px);width:var(--tw);margin-left:calc((100% - var(--tw)) / 2)}}
.lg-credit{margin-top:52px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3)}
.sheet + .ground.lg-end{padding-top:calc(64px + var(--r-sheet))}
.lg-end .ft{margin-top:0;border-top:0;padding-top:0}
@media (max-width:760px){
  .lg-hero{padding-top:118px;padding-bottom:104px}
  .lg-sheet{padding-top:48px;padding-bottom:80px}
  .lg{font-size:15.5px}
  .lg-short{padding:16px 18px}
  .lg-sec{margin-top:38px}
  .lg-sec h2{font-size:19px;gap:10px}
  .lg-tbl thead{display:none}
  .lg-tbl tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .lg-tbl td{display:block;padding:2px 0;border:0}
  .lg-tbl td:not(:first-child)::before{content:attr(data-h) ": ";color:var(--ink3);font-size:13px}
  .sheet + .ground.lg-end{padding-top:calc(44px + var(--r-sheet))}
}

/* THE SEO PASS (26 Oct): the category inside the h1, and the trade
   pages' own blocks (tables, the emergency path, lists, prose, three sourced numbers), plus the about page's
   founders and the home page's link cards. Same tokens as everything above: white sheet, paper cards, one accent. */
h1 .kicker{display:block;max-width:none;margin:0 auto 20px;font:500 12px/1.5 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.86);text-shadow:none}
/* A trade page's own sections fill the column edge to edge like every other section (Mikail, 28 Oct: "make sure
   everything is symmetric"): tables full width, lists and prose as even rows of cards, the emergency call as rows. */
.blk .lg-tw.tt{margin-top:40px}
.blk .lg-tw.tt .lg-tbl{font-size:15.5px}
.path{list-style:none;margin:40px 0 0;padding:0;counter-reset:p}
.path li{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,2fr);column-gap:22px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink2);line-height:1.6}
.path li::before{counter-increment:p;content:counter(p);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--acc);font:600 14px/1 "Inter",sans-serif}
.path li b,.path li span{padding-top:4px}
.path li b{color:var(--ink);font-weight:600}
.bul,.prose{display:grid;gap:16px;margin:40px 0 0;padding:0;list-style:none}
.bul.c2,.prose.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:981px){.bul.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bul li,.prose p{position:relative;margin:0;padding:24px 26px;border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink2);line-height:1.65}
.bul li{padding-left:50px}
.bul li::before{content:"";position:absolute;left:26px;top:34px;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.prose a,.bul a,.more a,.stats .src a{color:var(--acc-ink);text-underline-offset:3px}
.more{max-width:720px;margin-top:22px;color:var(--ink2)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.stats > div{padding:26px 26px 24px;border-radius:24px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.stats b{display:block;font:600 clamp(28px,3.2vw,40px)/1.08 "Montserrat","Inter",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.stats p{margin-top:10px;color:var(--ink2);font-size:15.5px;line-height:1.5}
.stats .src{display:block;margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink3)}
.links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.links a{display:block;padding:24px 24px 22px;border-radius:22px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink);transition:box-shadow .2s var(--ease)}
.links a:hover{box-shadow:inset 0 0 0 1.5px var(--acc)}
.links b{display:block;font:600 17px/1.35 "Montserrat","Inter",sans-serif;letter-spacing:-.01em}
.links span{display:block;margin-top:8px;color:var(--ink2);font-size:15px;line-height:1.5}
@media (max-width:980px){.links{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lg-note{font-size:13.5px;color:var(--ink3)}
.lg .qs{margin-top:8px}
.fnd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 4px}
.fnd article{padding:22px 22px 20px;border-radius:22px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.fnd > article:only-child{grid-column:1 / -1}  /* one person: the card spans the column, as two do together */
.fnd img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:14px}
.fnd h3{margin:0;font-size:18px}
.fnd .role{margin:2px 0 10px;color:var(--ink3);font-size:14px}
.fnd p{margin:0 0 8px}
.fnd .fl{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 0;font-size:14px}
.ft h4.ft-sub{margin-top:22px}
@media (max-width:760px){
  .path li{grid-template-columns:30px minmax(0,1fr);column-gap:16px}
  .path li::before{width:30px;height:30px;grid-row:span 2}
  .path li b,.path li span{padding-top:2px}
  .bul.c2,.bul.c3,.prose.c2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .chips{grid-template-columns:minmax(0,1fr)}
  .stats,.links,.fnd{grid-template-columns:minmax(0,1fr)}
  .blk .lg-tw.tt .lg-tbl{font-size:15px}
}
a[href^="tel:"]{white-space:nowrap}
/* smallest phones (360 to 380 wide): a touch smaller so the phone icon, the words and the number fit inside the pill.
   After the 760 block on purpose, so it wins. */
@media (max-width:380px){.btns .btn{padding:0 12px;gap:7px;font-size:14.5px}}
/* ═══ MOCKS: seven product drawings. mock.py writes them, mock.js plays them. ═══
   THE CANVAS (26 Oct, Heidar's model): each drawing is laid out once at a fixed size, --cw by --ch points (920 by 600,
   or 380 by 640 when the figure is under 600px wide), and scaled to its column as one picture. So a smaller window
   gets a smaller drawing, never a reflowed or taller one, and a card never grows while it plays.
   .mk is the grey tray, .mk-shot the window onto the canvas (its aspect ratio is the canvas's), .mk-cv the canvas.
   The scale is tan(atan2(100cqw, canvas width)) in CSS, which is the plain ratio, and mock.js sets --k to the same
   ratio for any browser without it. Every rule is scoped under .mk; colours are restated as --mk-*. */

.mk{--mk-ink:#141317;--mk-ink2:#57545E;--mk-ink3:#8D8A94;--mk-line:#E9E7E2;--mk-paper:#F5F4F1;
  --mk-gold:#A97C19;--mk-gsoft:#F6F0E1;--mk-gink:#76550F;--mk-gline:#E8D9B2;--mk-red:#D63A2F;--mk-tint:#007AFF;--mk-ol:#0F6CBD;
  --mk-ease:cubic-bezier(.22,1,.36,1);--mk-mono:"Inter",sans-serif;
  container:mk/inline-size;position:relative;width:100%;max-width:800px;margin:0 auto;padding:10px;border-radius:20px;
  background:var(--mk-paper);color:var(--mk-ink);text-align:left;letter-spacing:0;
  font:400 13px/1.45 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  box-shadow:inset 0 0 0 1px var(--mk-line)}
.mk-shot{--cw:920;--ch:600;position:relative;width:100%;aspect-ratio:var(--cw)/var(--ch);overflow:hidden;border-radius:12px}
.mk-cv{position:absolute;left:0;top:0;width:calc(var(--cw) * 1px);height:calc(var(--ch) * 1px);transform-origin:0 0;
  transform:scale(var(--k,tan(atan2(100cqw,calc(var(--cw) * 1px)))))}
.mk-cv>*{height:100%}
@container mk (max-width:600px){
  .mk{padding:8px;border-radius:18px}
  .mk-shot{--cw:380;--ch:600;--mk-narrow:1;border-radius:11px}
}
/* resets carry no weight (:where), so any one-class rule below beats them */
:where(.mk) *,:where(.mk) *::before,:where(.mk) *::after{box-sizing:border-box}
:where(.mk) :where(p,ul,ol,dl,dd,dt){margin:0}
:where(.mk) :where(ul,ol){padding:0;list-style:none}
:where(.mk) b{font-weight:600}
:where(.mk) em{font-style:normal}
.mk .mk-i{display:block;width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk .mk-fill{fill:currentColor;stroke:none}
/* a number or a reference in plain figures */
.mk-num{font:500 11.5px/1.3 "Inter",sans-serif;letter-spacing:.01em;color:var(--mk-ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-mono{font:500 11px/1.3 var(--mk-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mk-ink3);white-space:nowrap}
.mk-win{position:relative;min-width:0;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px var(--mk-line),0 1px 2px rgba(20,19,23,.04),0 18px 36px -26px rgba(20,19,23,.22)}
.mk-av{display:inline-grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#2B2A30;color:#fff;
  font:600 11px/1 "Inter",sans-serif;letter-spacing:.02em}
.mk-av.sm{width:24px;height:24px}
.mk-av.lg{width:42px;height:42px;font-size:14px}
.mk-av.sq{border-radius:7px}
.mk-live{display:inline-block;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--mk-gold);box-shadow:0 0 0 3px rgba(169,124,25,.16)}
.mk-cnt{display:inline-block;min-width:22px;padding:2px 6px;border-radius:999px;background:#ECEBE6;color:var(--mk-ink2);
  font:600 11px/1.3 var(--mk-mono);text-align:center;font-variant-numeric:tabular-nums}
.mk-brand{display:block;width:20px;height:20px;flex:0 0 auto}

/* ── MOTION: what mock.js toggles. Armed = waiting to play; .mk-in = arrived; .mk-out = gone ── */
.mk [data-t]{transition:opacity .5s var(--mk-ease),transform .6s var(--mk-ease)}
.mk.mk-armed [data-t]:not(.mk-in){opacity:0}
.mk.mk-armed .fx-up:not(.mk-in){transform:translateY(8px)}
.mk.mk-armed .fx-pop:not(.mk-in){transform:scale(.93)}
.mk.mk-armed .fx-drop:not(.mk-in){transform:translateY(-20px) scale(.97)}
.mk.mk-armed [data-t].fx-keep:not(.mk-in){opacity:1;transform:none}
.mk .fx-temp{opacity:0;pointer-events:none}
.mk.mk-armed .fx-temp.mk-in:not(.mk-out){opacity:1;transform:none}
.mk .fx-pre{opacity:0;transition:opacity .35s var(--mk-ease)}
.mk.mk-armed .fx-pre:not(.mk-out){opacity:1}
/* a line that takes no room until it arrives, so the column grows from the bottom and the oldest scroll off the top */
.mk.mk-armed .fx-line:not(.mk-in){display:none}
.mk.mk-armed .fx-line.mk-in{animation:mk-rise .5s var(--mk-ease) both}
@keyframes mk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mk.mk-reset,.mk.mk-reset *{transition:none!important;animation:none!important}
.mk .mk-tick{display:inline-block;animation:mk-tick .5s var(--mk-ease)}
@keyframes mk-tick{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
.mk .mk-caret::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--mk-gold)}
/* layered states (calling, timer, ended) share one cell so swapping them never moves anything */
.mk-stack{display:grid}
.mk-stack>*{grid-area:1/1}

.mk-replay{position:absolute;right:var(--mk-rp-r,22px);bottom:var(--mk-rp-b,22px);z-index:30;display:inline-flex;align-items:center;gap:6px;
  height:30px;margin:0;padding:0 13px 0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.97);color:var(--mk-ink2);
  font:500 12px/1 "Inter",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 1px var(--mk-line),0 10px 24px -12px rgba(20,19,23,.45);opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--mk-ease),transform .45s var(--mk-ease),color .2s}
.mk-replay[hidden]{display:none}
.mk.mk-done .mk-replay{opacity:1;transform:none}
.mk-replay:hover{color:var(--mk-ink)}
.mk-replay:focus-visible{outline:2px solid var(--mk-gold);outline-offset:2px}
.mk-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@container mk (max-width:600px){.mk-replay{--mk-rp-r:16px;--mk-rp-b:16px}}

/* ── PHONES: the site's one iPhone frame (site.css), set in a grey panel ── */
.mk-duo{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;height:100%}
.mk-pan{position:relative;display:grid;place-items:center;min-width:0;overflow:hidden;border-radius:12px;background:#ECEBE7;box-shadow:inset 0 0 0 1px #E2E0DA}
.mk .fr-phone{--pw:226px;width:var(--pw);margin:0;flex:0 0 auto}
/* the app under the status bar and the home bar runs to the screen's edges, so no white band is left above the bezel */
.mk .fr-phone .fr-status{position:absolute!important;left:0;right:0;top:0;z-index:9}
.mk .fr-phone .fr-body{position:absolute!important;inset:0;display:block;padding:0;gap:0;z-index:1}
.mk .fr-phone .fr-home{position:absolute!important;left:50%;bottom:0;z-index:10;margin:0 0 1.6cqw -17.3cqw!important}
.mk .fr-glass{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 .5px rgba(20,19,23,.3),0 36px 56px -40px rgba(20,19,23,.6),0 12px 24px -18px rgba(20,19,23,.35)}
.mk .fr-glass::after{display:none}
.mk .fr-screen{background:#fff}
.mk .fr-grain{display:none}
.mk .fr-clock{font:600 13px/1 "Inter",sans-serif;color:#0B0B0D;letter-spacing:-.015em}
.mk .fr-bars{fill:#0B0B0D}
.mk .fr-wifi{stroke:#0B0B0D}
.mk .fr-batt::before{box-shadow:inset 0 0 0 1px rgba(11,11,13,.38)}
.mk .fr-batt i{background:#0B0B0D}
.mk .fr-batt::after{background:rgba(11,11,13,.38)}
.mk .fr-body{position:relative;padding:0;gap:0}
.mk .fr-btn{width:3px}
/* on a phone the drawing stacks: the phone on top, scaled whole with zoom (so its own type scales with it), and the
   card under it, filling in live. A transcript longer than its card glides up as lines arrive (data-follow, mock.js). */
@container mk (max-width:600px){
  .mk-duo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px}
  .mk-calls .mk-pan{height:366px}
  .mk-calls .mk-pan .fr-phone{zoom:.7}
  .mk-callback .mk-pan{height:450px}
  .mk-callback .mk-pan .fr-phone{zoom:.87}
}

/* a banner dropping out of the island: iOS's own spring */
.mk-nb{position:absolute;z-index:6;top:2px;left:6px;right:6px;display:flex;gap:9px;padding:9px 10px 10px;border-radius:19px;text-align:left;
  background:rgba(246,246,248,.92);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);color:#0B0B0D;
  box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 14px 30px -12px rgba(0,0,0,.45)}
.mk-app-ic{flex:0 0 auto;width:30px;height:30px;display:block}
.mk-nb-m{min-width:0;flex:1}
.mk-nb-h{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;line-height:1.25}
.mk-nb-h b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-nb-h span{flex:0 0 auto;color:#8A8A8F}
.mk-nb-p{margin-top:1px;font-size:11.5px;line-height:1.32;color:#1C1C1E;text-wrap:balance}
.mk .mk-nb.fx-drop{transition:transform .65s cubic-bezier(.32,1.35,.5,1),opacity .2s}
.mk.mk-armed .mk-nb.fx-drop:not(.mk-in){transform:translateY(-140%) scale(.9)}

/* ═══ 1. THE CALLS ═══════════════════════════════════════════════════════════════════════════ */
.mk-calls .mk-shot,.mk-callback .mk-shot{--ch:540}
@container mk (max-width:600px){.mk-calls .mk-shot{--ch:800}.mk-callback .mk-shot{--ch:790}}
.mk-calls{--mk-rp-r:24px;--mk-rp-b:22px}
/* the zoom onto the text: only the phone moves, inside its panel. mock.js scales the screen to the panel's width
   and puts its top at the panel's top (data-zfit), so it holds in both layouts */
.mk .mk-zoom{position:absolute;inset:0;display:grid;place-items:center;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.65,0,.3,1)}
/* the call screen in our colours: a light gold poster going to silver, dark type, frosted keys, the status bar dark */
.mk .sc-phone .fr-screen{background:radial-gradient(110% 46% at 18% 0%,rgba(255,252,243,.95) 0%,rgba(255,252,243,0) 62%),
  radial-gradient(90% 44% at 100% 100%,rgba(206,208,213,.9) 0%,rgba(206,208,213,0) 70%),linear-gradient(172deg,#F1E8D4 0%,#E6D8B8 44%,#DAD4C8 100%)}
.mk .sc-phone .fr-home,.mk .mk-ph-fu .fr-home{background:rgba(0,0,0,.38)!important}
.mk .sc-phone .mk-cl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:33cqw 7cqw 16cqw;color:#1C1C1E}
.mk .sc-phone .mk-cl .cl-time{display:grid;color:rgba(60,60,67,.6);font-variant-numeric:tabular-nums}
.mk-cl .cl-time>*{grid-area:1/1}
.mk .sc-phone .mk-cl .cl-name{color:#1C1C1E}
.mk .sc-phone .ky{color:#1C1C1E}
.mk .sc-phone .ky i{background:rgba(255,255,255,.48);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 1px 3px rgba(90,70,30,.08)}
.mk .sc-phone .ky svg{color:#1C1C1E}
.mk .sc-phone .ky.facetime i,.mk .sc-phone .ky.facetime svg{color:rgba(28,28,30,.3)}
.mk .sc-phone .ky.end i{background:#EB3B30}
.mk .sc-phone .ky.end svg{color:#fff}
/* the call ends: the screen holds, the keys dim and soften, a veil settles over it */
.mk .mk-cl .cl-keys{transition:opacity .7s var(--mk-ease),filter .7s var(--mk-ease)}
.mk .mk-cl .cl-keys.mk-in,.mk:not(.mk-armed) .mk-cl .cl-keys{opacity:.4;filter:blur(1.2px)}
.cl-veil{position:absolute;inset:0;z-index:2;background:rgba(232,225,210,.3);-webkit-backdrop-filter:blur(1.4px);backdrop-filter:blur(1.4px)}
.mk .cl-nb{top:15.4cqw;left:2.6cqw;right:2.6cqw;z-index:6}
/* the card: the live transcript, then the intake checks */
.mk-call{display:flex;flex-direction:column}
.mk-call-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;height:46px;flex:0 0 auto;padding:0 18px;border-bottom:1px solid var(--mk-line)}
.mk-call-hd p{display:flex;align-items:center;gap:12px}
.mk-lc{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;white-space:nowrap}
.mk-lc i{width:7px;height:7px;border-radius:50%;background:#E5483D;box-shadow:0 0 0 3px rgba(229,72,61,.14);animation:mk-blink 2s ease-in-out infinite}
@keyframes mk-blink{50%{opacity:.45}}
.mk-lc.end{color:var(--mk-ink2)}
.mk-tx{flex:1 1 auto;min-height:0;overflow:hidden;padding:16px 18px 12px}
.mk-tx-in{position:relative;display:flex;flex-direction:column;gap:10px;transition:transform .8s var(--mk-ease)}
.mk-ln{flex:0 0 auto;display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:12px;font-size:13px;line-height:1.48}
.mk-who{font:500 11.5px/1.7 "Inter",sans-serif;color:var(--mk-ink3)}
.mk-ln.d .mk-who{color:var(--mk-gold)}
.mk-ln.c p{color:var(--mk-ink2)}
.mk .mk-ln.fx-up{transition:opacity .6s var(--mk-ease),transform .7s var(--mk-ease)}
.mk.mk-armed .mk-ln.fx-up:not(.mk-in){transform:translateY(10px)}
.mk-chks{flex:0 0 auto;margin:0 12px 12px;padding:12px 14px 13px;border-radius:12px;background:#FAFAF8;box-shadow:inset 0 0 0 1px var(--mk-line)}
.mk-chks-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12.5px;font-weight:500;color:var(--mk-ink2)}
.mk-st{justify-items:end}
.mk-pl{display:inline-block;padding:3px 10px;border-radius:999px;background:#EEEDEA;color:var(--mk-ink2);font-size:11.5px;font-weight:500;line-height:1.4;white-space:nowrap}
.mk-pl.ok{background:#E3F4E8;color:#15703F}
.mk-chks>div{display:flex;flex-wrap:wrap;gap:6px}
.mk-chk{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;border-radius:7px;background:#fff;color:var(--mk-ink);
  font-size:12px;font-weight:500;line-height:1.3;box-shadow:inset 0 0 0 1px #E4E2DD;transition:color .4s}
.mk .mk-chk .mk-i{width:13px;height:13px;stroke-width:2.4;color:#1F9D55;transition:color .4s,opacity .4s}
.mk.mk-armed .mk-chk:not(.mk-in){color:#AAA7AF}
.mk.mk-armed .mk-chk:not(.mk-in) .mk-i{color:#C4C1C8}
.mk.mk-armed .mk-chk.mk-in .mk-i{animation:mk-pop .45s cubic-bezier(.34,1.5,.6,1)}
@keyframes mk-pop{0%{transform:scale(.6)}100%{transform:none}}
@container mk (max-width:600px){
  .mk-call-hd{padding:0 14px}
  .mk-call-hd>.mk-num{display:none}
  .mk-tx{padding:12px 14px 10px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
  .mk-ln{grid-template-columns:44px minmax(0,1fr);column-gap:10px;font-size:12.5px}
  .mk-chks{margin:0 10px 10px;padding:10px 12px 11px}
}

/* ═══ 2 + 4. OUTLOOK ON THE WEB: pale top bar, Outlook's own logo, the app rail, a white page with a soft edge ═══ */
.mk-ow{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:48px minmax(0,1fr);height:100%;overflow:hidden;border-radius:12px;
  background:#EFF4F9;box-shadow:0 0 0 1px #E1E7EE}
.ow-top{grid-column:1/-1;display:grid;grid-template-columns:1fr minmax(0,380px) 1fr;align-items:center;padding:0 14px 0 16px}
.ow-app{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#1B1A19;white-space:nowrap}
.ow-search{display:flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;background:#fff;color:#605E5C;font-size:12.5px;
  box-shadow:0 0 0 1px #E1E4E8}
.mk .ow-search .mk-i{width:15px;height:15px}
.ow-av{justify-self:end;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#8A5634;color:#fff;font-size:11.5px;font-weight:600}
.ow-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:6px;color:#616161}
.ow-rail span{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:8px}
.ow-rail span.on{background:#fff;color:var(--mk-ol);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ow-rail span.on::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--mk-ol)}
.mk .ow-rail .mk-i{width:18px;height:18px}
.ow-main{min-width:0;min-height:0;margin:0 12px 12px 0;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #E1E4E8,0 2px 6px rgba(0,0,0,.04);overflow:hidden;
  display:flex;flex-direction:column}
@container mk (max-width:600px){
  .mk-ow{grid-template-columns:minmax(0,1fr);grid-template-rows:46px minmax(0,1fr)}
  .ow-rail{display:none}
  .ow-top{grid-template-columns:1fr auto;padding:0 12px}
  .ow-search{display:none}
  .ow-main{margin:0 8px 8px}
}

/* ═══ 2. THE BOOKING ═════════════════════════════════════════════════════════════════════════ */
.mk-booking{--mk-rp-r:28px;--mk-rp-b:26px}
.mk-cal{--rh:52px;--gut:58px}
.mk-tools{display:flex;align-items:center;gap:10px;height:50px;flex:0 0 auto;padding:0 14px;border-bottom:1px solid #EDEBE9}
.mk-btn-k{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 9px;border-radius:4px;background:var(--mk-ol);color:#fff;
  font-size:12.5px;font-weight:600;white-space:nowrap}
.mk .mk-btn-k .mk-i{width:15px;height:15px;stroke-width:2.2}
.mk-btn-o{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:4px;box-shadow:inset 0 0 0 1px #D1D1D1;font-size:12.5px;font-weight:600;color:#242424}
.mk-arrows{display:inline-flex;gap:2px;color:#424242}
.mk .mk-arrows .mk-i{width:17px;height:17px}
.mk-range{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#242424;white-space:nowrap}
.mk .mk-range .mk-i,.mk .mk-view .mk-i{width:14px;height:14px}
.mk-view{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-size:12.5px;color:#424242;white-space:nowrap}
.mk-days{display:grid;grid-template-columns:var(--gut) repeat(5,minmax(0,1fr));flex:0 0 auto;border-bottom:1px solid #EDEBE9}
.mk-day{position:relative;display:flex;align-items:baseline;gap:6px;padding:9px 10px 8px;border-left:1px solid #EDEBE9;color:#424242}
.mk-day b{font-size:16px;font-weight:400;letter-spacing:-.01em;color:#242424}
.mk-day span{font-size:12px}
.mk-day.sel b,.mk-day.sel span{color:var(--mk-ol);font-weight:600}
.mk-day.sel::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--mk-ol)}
.mk-cal-stage{position:relative;flex:1 1 auto;min-height:0}
.mk-grid{display:grid;grid-template-columns:var(--gut) repeat(5,minmax(0,1fr));height:100%;overflow:hidden}
.mk-hours{position:relative}
.mk-hours span{position:absolute;right:9px;top:calc(var(--s) * var(--rh) + 4px);font-size:11px;line-height:1;color:#616161;white-space:nowrap}
.mk-col{position:relative;min-width:0;border-left:1px solid #EDEBE9;
  background:repeating-linear-gradient(180deg,transparent 0 calc(var(--rh) - 1px),#F0EFEE calc(var(--rh) - 1px) var(--rh))}
.mk-ce{position:absolute;left:3px;right:4px;top:calc(var(--s) * var(--rh) + 2px);height:calc(var(--d) * var(--rh) - 3px);overflow:hidden;
  padding:4px 7px 3px 9px;border-radius:4px;background:var(--f);color:var(--c);box-shadow:inset 3px 0 0 var(--b)}
.mk-ce-t{font-size:11.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ce-s{font-size:11px;line-height:1.25;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ce.short{padding-top:3px}
.mk-ce.short .mk-ce-s{display:none}
.mk-ce.k-move{--f:#DEECF9;--b:#2B88D8;--c:#0F3A5E}
.mk-ce.k-int{--f:#EFE3F5;--b:#8764B8;--c:#3E2A55}
.mk-ce.k-est{--f:#DFF6DD;--b:#3B9C46;--c:#1B4D22}
.mk-ce.k-svc{--f:#F3F2F1;--b:#A19F9D;--c:#3B3A39}
.mk-ce.k-desk{--f:#FFF4CE;--b:#C19C00;--c:#4D3A00}
.mk-ce.k-pick{--f:var(--mk-ol);--b:#0B4F8A;--c:#fff;box-shadow:inset 3px 0 0 #0B4F8A,0 6px 16px -8px rgba(15,108,189,.7)}
.mk-pop{position:absolute;z-index:5;left:calc(var(--gut) + (100% - var(--gut)) / 5 + 10px);top:calc(.35 * var(--rh));width:356px;
  overflow:hidden;border-radius:8px;background:#fff;border-top:4px solid var(--mk-ol);transform-origin:0 30%;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 26px 52px -20px rgba(0,0,0,.32),0 8px 18px -10px rgba(0,0,0,.14)}
.mk-pop-in{padding:13px 17px 14px}
.mk-pop-t{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;line-height:1.3;color:var(--mk-ol)}
.mk-sq{flex:0 0 auto;width:10px;height:10px;border-radius:2px;background:var(--mk-ol)}
.mk-pop-cal{margin:1px 0 0 19px;font-size:11.5px;color:#616161}
.mk .mk-pop.fx-pop{transform-origin:0 12%;transition:opacity .35s var(--mk-ease),transform .6s cubic-bezier(.3,1.25,.5,1)}
.mk.mk-armed .mk-pop.fx-pop:not(.mk-in){transform:scale(.55) translateX(-14px)}
.mk.mk-armed .mk-ce.fx-pop:not(.mk-in){transform:scale(.82)}
.mk .mk-ce.fx-pop{transition:opacity .35s var(--mk-ease),transform .5s cubic-bezier(.3,1.4,.5,1)}
.mk-pop-rows{display:grid;gap:8px;margin-top:12px}
.mk-pop-rows li{display:flex;gap:10px;font-size:12.5px;line-height:1.45;color:#323130}
.mk .mk-pop-rows .mk-i{margin-top:1px;color:#616161}
.mk-link{color:var(--mk-ol)}
.mk-note{margin-top:11px;padding:8px 11px;border-radius:4px;background:#FFF8DB;color:#3F3200;font-size:12.5px;line-height:1.45}
.mk-pop-ft{display:flex;align-items:center;gap:8px;padding:10px 17px 11px;background:#EFF6FC;color:var(--mk-ol);font-size:12.5px;font-weight:500}
.mk .mk-pop-ft .mk-i{width:15px;height:15px}
@container mk (max-width:600px){
  .mk-cal{--rh:50px;--gut:46px}
  .mk-btn-o,.mk-view,.mk-arrows{display:none}
  .mk-tools{height:46px;padding:0 10px;gap:8px}
  .mk-range{font-size:13px}
  .mk-days{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 6px 5px}
  .mk-days>span:first-child{display:none}
  .mk-day{flex-direction:column;align-items:center;gap:0;padding:4px 0 5px;border:0;border-radius:6px}
  .mk-day b{order:2;font-size:16px}
  .mk-day span{order:1;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
  .mk-day.sel{background:#EFF6FC}
  .mk-day.sel::before{display:none}
  .mk-grid{grid-template-columns:var(--gut) minmax(0,1fr)}
  .mk-col:not(.d-mon){display:none}
  .mk-pop{left:12px;right:12px;top:auto;bottom:12px;width:auto}
}

/* ═══ 3. YOUR SOFTWARE: SmartMoving's white bar and blue tabs ════════════════════════════════════ */
.mk-software{--mk-rp-r:28px;--mk-rp-b:26px}
.mk-crm{display:flex;flex-direction:column;height:100%}
.mk-crm-nav{display:flex;align-items:center;gap:20px;height:50px;flex:0 0 auto;padding:0 14px 0 16px;background:#fff;color:#1F2937;border-bottom:1px solid var(--mk-line)}
.mk-crm-co{display:flex;align-items:center}
.mk-sm-logo{display:block;height:16px;width:auto}
.mk-crm-nav nav{display:flex;gap:2px;min-width:0;overflow:hidden;align-self:stretch}
.mk-crm-nav nav span{display:flex;align-items:center;padding:0 9px;font-size:12.5px;color:#6B7280;white-space:nowrap}
.mk-crm-nav nav span.on{color:#0973EB;box-shadow:inset 0 -2px 0 #0973EB;font-weight:500}
.mk-crm-r{display:flex;align-items:center;gap:12px;margin-left:auto;color:#6B7280}
.mk-crm-r .mk-av{background:#0973EB;color:#fff}
.mk-crm-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 322px;background:#F6F7F9}
.mk-board{display:flex;flex-direction:column;min-width:0;padding:14px 12px 14px 14px}
.mk-legend{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font-size:12px;color:var(--mk-ink3)}
.mk-legend-k{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#FFFDF7;color:var(--mk-gold);box-shadow:inset 3px 0 0 var(--mk-gold),0 0 0 1px var(--mk-gline)}
.mk .mk-legend-k .mk-i{width:13px;height:13px}
.mk-board-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.mk-board-hd p{font-size:15px;font-weight:600;white-space:nowrap}
.mk-chips{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:#E9EBEF;font-size:11.5px}
.mk-chips>*{padding:3px 9px;border-radius:7px;color:var(--mk-ink2)}
.mk-chips b{background:#fff;color:var(--mk-ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mk-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start}
.mk-pcol{display:flex;flex-direction:column;gap:7px;min-width:0}
.mk-pcol-hd{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 2px 3px;font-size:12px;font-weight:600;color:var(--mk-ink2);white-space:nowrap}
.mk-card{position:relative;padding:9px 10px 9px 11px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #E5E7EB,0 1px 2px rgba(20,19,23,.05)}
.mk-card.desk{background:#FFFDF7;box-shadow:inset 3px 0 0 var(--mk-gold),0 0 0 1px var(--mk-gline),0 1px 2px rgba(20,19,23,.05)}
.mk-card-n{font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-card.desk .mk-card-n{padding-right:16px}
.mk-card-s{margin-top:2px;font-size:11.5px;line-height:1.3;color:var(--mk-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-desk{position:absolute;top:9px;right:8px;color:var(--mk-gold)}
.mk .mk-desk .mk-i{width:14px;height:14px}
.mk .mk-card.mk-moved{transition:opacity .25s,transform .95s cubic-bezier(.55,0,.15,1)}
.mk-more{padding:1px 4px;font-size:12px;color:var(--mk-ink3)}
.mk-rec{position:relative;min-width:0;background:#fff;border-left:1px solid var(--mk-line)}
.mk-rec-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;font-size:12.5px;color:var(--mk-ink3)}
.mk .mk-rec-empty .mk-i{width:28px;height:28px;stroke-width:1.5}
.mk-rec-in{padding:16px 18px 16px}
.mk-rec-hd{display:flex;align-items:center;gap:12px}
.mk-rec-hd>div{min-width:0}
.mk-rec-name{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.mk-rec-sub{font-size:12px;color:var(--mk-ink3)}
.mk-stage{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--mk-gsoft);color:var(--mk-gink);
  font-size:12px;font-weight:600;box-shadow:inset 0 0 0 1px var(--mk-gline)}
.mk .mk-stage .mk-i{width:14px;height:14px;color:var(--mk-gold)}
.mk-steps{display:none}
.mk-fields{margin-top:12px;border-top:1px solid var(--mk-line)}
.mk-f{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:6px 0;border-bottom:1px solid #F1EFEB}
.mk-f dt{font-size:11.5px;line-height:1.55;color:var(--mk-ink3)}
.mk-f dd{font-size:12.5px;line-height:1.45;color:var(--mk-ink)}
.mk-src{color:var(--mk-gink);font-weight:500}
.mk-dd2{display:block;font-size:12px;color:var(--mk-ink3)}
.mk-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mk-file{display:inline-flex;align-items:center;gap:6px;padding:6px 9px 6px 7px;border-radius:8px;background:#F8F7F4;box-shadow:inset 0 0 0 1px var(--mk-line);font-size:12px;white-space:nowrap}
.mk .mk-file .mk-i{width:14px;height:14px;color:var(--mk-gold)}
.mk-rec-ft{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;line-height:1.4;color:var(--mk-gink)}
.mk-rec-ft .mk-dd2{font-size:11.5px}
.mk .mk-rec-ft .mk-i{width:15px;height:15px;color:var(--mk-gold)}
@container mk (max-width:600px){
  .mk-crm-nav{gap:12px}
  .mk-crm-nav nav,.mk-crm-r>.mk-i{display:none}
  .mk-crm-body{grid-template-columns:minmax(0,1fr)}
  .mk-board{display:none}
  .mk-rec{border-left:0}
  .mk-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;margin-top:14px;padding:3px;border-radius:11px;background:#F2F1ED}
  .mk-steps span{position:relative;z-index:1;padding:6px 3px;text-align:center;font-size:11px;font-weight:500;line-height:1.2;color:var(--mk-ink2)}
  .mk-steps-hl{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);border-radius:8px;background:var(--mk-gsoft);
    box-shadow:inset 0 0 0 1px var(--mk-gline),0 1px 3px rgba(20,19,23,.08);transform:translateX(calc(var(--k,1) * 100%));transition:transform .75s var(--mk-ease)}
  .mk-stage{display:none}
  .mk-rec-in{padding:15px 15px 14px}
}

/* ═══ 4. THE INBOX: Outlook mail, the list beside the reading pane ═════════════════════════════════ */
.mk-inbox{--mk-rp-r:28px;--mk-rp-b:26px}
@container mk (max-width:600px){.mk-inbox .mk-shot{--ch:640}}
.om-main{flex-direction:row}
.om-list{flex:0 0 300px;min-width:0;display:flex;flex-direction:column;border-right:1px solid #EDEBE9}
.om-tabs{display:flex;gap:18px;flex:0 0 auto;height:44px;align-items:flex-end;padding:0 16px;border-bottom:1px solid #EDEBE9;font-size:13px;color:#616161}
.om-tabs>*{padding-bottom:10px}
.om-tabs b{color:#242424;box-shadow:inset 0 -2px 0 var(--mk-ol)}
.om-grp{padding:9px 16px 7px;font-size:12px;font-weight:600;color:#424242;background:#FAFAFA;border-bottom:1px solid #F0F0F0}
.om-row{position:relative;display:flex;gap:10px;height:74px;padding:10px 14px 0 14px;border-bottom:1px solid #F0F0F0}
.om-row>div{min-width:0;flex:1}
.om-row.sel{background:#EBF3FC;box-shadow:inset 3px 0 0 var(--mk-ol)}
.om-av{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#8A8886;color:#fff;font-size:11.5px;font-weight:600}
.om-av.c0{background:#A4262C}.om-av.c1{background:#5C7E10}.om-av.c2{background:#0973EB}.om-av.c3{background:#4F6BED}.om-av.c4{background:#7A7574}
.om-who{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;line-height:1.3}
.om-who b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-who span{flex:0 0 auto;font-size:11.5px;color:#616161}
.om-row.sel .om-who span,.om-row.sel .om-subj{color:var(--mk-ol)}
.om-subj{font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#242424}
.om-row.sel .om-subj{font-weight:600}
.om-pre{font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#616161}
.om-read{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:#F5F5F5}
.om-h{flex:0 0 auto;padding:14px 18px 10px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#242424;background:#fff;border-bottom:1px solid #EDEBE9}
.om-thread{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:9px 12px 8px}
.om-m{position:relative;flex:0 0 auto;padding:8px 13px 9px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #E8E8E8,0 1px 2px rgba(0,0,0,.04)}
.om-mh{display:flex;gap:10px;align-items:center}
.om-mh>div{min-width:0;flex:1}
.om-mh p:first-child{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.om-mh p:first-child span{font-size:11.5px;color:#616161;white-space:nowrap}
.om-to{font-size:11.5px;color:#616161}
.om-m .om-av{width:28px;height:28px;font-size:10.5px;background:#A4262C}
.om-m.desk .om-av{background:#1C2B3D}
.om-b{margin:5px 0 0 38px;font-size:12.5px;line-height:1.45;color:#242424}
.om-inv{display:flex;align-items:center;gap:10px;margin:6px 0 0 38px;padding:6px 10px;border-radius:6px;background:#EFF6FC;box-shadow:inset 3px 0 0 var(--mk-ol)}
.om-inv-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#fff;color:var(--mk-ol)}
.om-inv>div{flex:1;min-width:0;font-size:12px;line-height:1.35;color:#242424}
.om-inv-ok{font-size:11.5px;font-weight:600;color:#107C10;white-space:nowrap}
.om-acts{flex:0 0 auto;display:flex;gap:8px;padding:0 12px 12px}
.om-acts span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px #D1D1D1;font-size:12.5px;color:#242424}
.mk .om-acts .mk-i{width:15px;height:15px}
@container mk (max-width:600px){
  .om-list{display:none}
  .om-h{padding:12px 14px 9px;font-size:15px}
  .om-thread{padding:8px 8px 6px}
  .om-m{padding:8px 10px 9px}
  .om-b{margin-left:0;font-size:12px;line-height:1.42}
  .om-to{display:none}
  .om-mh p:first-child span{font-size:10.5px}
  .om-inv{margin-left:0}
  .om-acts{padding:0 8px 8px}
}

/* ═══ 5. THE CALL-BACK: the company's site in Safari, an incoming call, then Messages ════════════════ */
.mk-callback{--mk-rp-r:24px;--mk-rp-b:22px}
/* the quote page in Hale & Marrow's own colours (forest green, a moving-truck orange, a cool light ground), the
   company's name in type, no app icon and no menu; the form is a white card over the green band */
.wf{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:14.7cqw;background:#F2F4F1;color:#13241A}
.wf-top{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;padding:7px 14px 8px;background:#fff}
.wf-brand{font-size:14px;font-weight:800;letter-spacing:-.02em;color:#17452E;white-space:nowrap}
.wf-brand i{font-style:normal;color:#E8742A}
.wf-tel{font-size:10px;font-weight:600;color:#17452E}
.wf-hero{flex:0 0 auto;padding:12px 14px 30px;background:#17452E;color:#fff}
.wf-h{font-size:15.5px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.wf-k{margin-top:3px;font-size:10px;color:rgba(255,255,255,.78)}
.wf-pane{position:relative;flex:1 1 auto;margin:-22px 10px 0}
.wf-form,.wf-done{position:absolute;left:0;right:0;top:0;padding:11px 11px 12px;border-radius:12px;background:#fff;
  box-shadow:0 0 0 1px rgba(19,36,26,.06),0 10px 24px -14px rgba(19,36,26,.4)}
.wf-row{display:flex;gap:7px}
.wf-row>.wf-f{flex:1 1 0;min-width:0}
.wf-f{display:block;margin-bottom:7px}
.wf-f span{display:block;margin-bottom:2px;font-size:9px;font-weight:700;letter-spacing:.02em;color:#4D5E54}
.wf-f i{font-style:normal}
.wf-f b{display:block;min-height:25px;padding:5px 8px;border-radius:7px;background:#F7F8F6;box-shadow:inset 0 0 0 1px #D6DDD7;font-size:11px;font-weight:500;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-ok{display:flex;gap:7px;margin:2px 0 9px;font-size:8.5px;line-height:1.38;color:#56665C}
.wf-box{display:grid;place-items:center;flex:0 0 auto;width:14px;height:14px;margin-top:1px;border-radius:4px;background:#17452E;color:#fff;transition:background .25s}
.mk .wf-box .mk-i{width:10px;height:10px;stroke-width:3}
.mk.mk-armed .wf-box:not(.mk-in){background:#fff;box-shadow:inset 0 0 0 1.5px #B4BFB8}
.mk.mk-armed .wf-box:not(.mk-in) .mk-i{opacity:0}
.wf-btn{display:block;padding:9px;border-radius:999px;background:#E8742A;color:#fff;text-align:center;font-size:12px;font-weight:700;transition:transform .2s,filter .2s}
.mk.mk-armed .wf-btn.mk-in{animation:mk-press .4s ease}
@keyframes mk-press{40%{transform:scale(.95);filter:brightness(.9)}}
.wf-done{display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 14px 24px;text-align:center}
.wf-done span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#E3F1E7;color:#17452E}
.mk .wf-done .mk-i{width:20px;height:20px;stroke-width:2.6}
.wf-done p{max-width:180px;font-size:12px;line-height:1.45;color:#4D5E54}
.wf-done b{display:block;margin-bottom:2px;font-size:14.5px;color:#13241A}
.wf-bar{position:absolute;left:3.5cqw;right:3.5cqw;bottom:5.4cqw;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 8px 20px -10px rgba(0,0,0,.3);color:#1C1C1E}
.wf-url{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500}
.mk .wf-bar .mk-i{width:14px;height:14px}
.mk .wf-url .mk-i{width:10px;height:10px;color:#8A8A8F}
/* the incoming call takes the whole glass, on the same light poster as the call above */
.rg{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;padding-top:30cqw;color:#1C1C1E;
  background:radial-gradient(110% 46% at 18% 0%,rgba(255,252,243,.95) 0%,rgba(255,252,243,0) 62%),
  radial-gradient(90% 44% at 100% 100%,rgba(206,208,213,.9) 0%,rgba(206,208,213,0) 70%),linear-gradient(172deg,#F1E8D4 0%,#E6D8B8 44%,#DAD4C8 100%)}
.rg-s{font-size:12.5px;color:rgba(60,60,67,.6)}
.rg-n{margin-top:2px;padding:0 16px;font-size:22px;font-weight:700;letter-spacing:-.015em;text-align:center;line-height:1.15}
.rg-keys{display:flex;justify-content:space-between;width:100%;margin-top:auto;padding:0 12cqw 18cqw}
.rg-k{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;color:#1C1C1E}
.rg-k i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#EB3B30}
.rg-k.yes i{background:#30C65A}
.rg-k svg{width:25px;height:25px;fill:#fff;color:#fff}
.rg-k.yes svg{width:22px;height:22px}
.mk .rg.fx-temp{transition:opacity .45s var(--mk-ease),transform .55s var(--mk-ease);transform:scale(1.04)}
.mk.mk-armed .rg.fx-temp.mk-in:not(.mk-out){transform:none}
/* Messages, as it ships: grey in, green SMS out */
.mk-im{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:#fff;color:#0B0B0D}
/* opaque, in the flow: a blurred header is its own layer and escapes the screen's rounded corners */
.mk-im-hd{flex:0 0 auto;display:grid;grid-template-columns:34px 1fr 34px;align-items:start;padding:14.7cqw 8px 6px;border-bottom:.5px solid #E2E2E5;background:#F7F7F8}
.mk-im-back,.mk-im-x{padding-top:9px;color:var(--mk-tint)}
.mk-im-x{justify-self:end}
.mk .mk-im-back .mk-i{width:21px;height:21px;stroke-width:2.2}
.mk .mk-im-x .mk-i{width:19px;height:19px}
.mk-im-who{display:flex;flex-direction:column;align-items:center;gap:3px}
.mk-im-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#A6AAB4,#80848F);color:#fff;font-size:13px;font-weight:600}
.mk-im-who b{display:inline-flex;align-items:center;gap:1px;font-size:11px;font-weight:500}
.mk .mk-im-who b .mk-i{width:10px;height:10px;color:#A0A0A5;stroke-width:2.4}
.mk-im-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:8px 9px 6px}
.mk-im-body>*{flex-shrink:0}
.mk-im-day{margin:2px 0 2px;text-align:center;font-size:10.5px;color:#8A8A8F}
.mk-im-day b{font-weight:600}
.mk-b{max-width:84%;padding:6px 10px;border-radius:16px;font-size:11.5px;line-height:1.36}
.mk-b.in{align-self:flex-start;background:#E9E9EB;color:#000;border-bottom-left-radius:6px}
.mk-b.out{align-self:flex-end;background:#34C759;color:#fff;border-bottom-right-radius:6px}
.mk .mk-b[data-t]{transition:opacity .22s,transform .55s cubic-bezier(.34,1.42,.64,1)}
.mk .mk-b.in.fx-up{transform-origin:0 100%}
.mk .mk-b.out.fx-up{transform-origin:100% 100%}
.mk.mk-armed .mk-b.fx-up:not(.mk-in){transform:scale(.55)}
.mk-im-in{display:flex;align-items:center;gap:7px;padding:6px 9px 8.5cqw}
.mk-im-plus{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#EFEFF1;color:#6B6B70}
.mk .mk-im-plus .mk-i{width:15px;height:15px;stroke-width:2.2}
.mk-im-field{flex:1;display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 10px 0 12px;border-radius:999px;
  box-shadow:inset 0 0 0 1px #DADADD;color:#A0A0A5;font-size:12px;white-space:nowrap}
.mk .mk-im-field .mk-i{width:15px;height:15px}
/* the desk's log: a plain timeline, a small ring for each step and a green one for the booking */
.mk-log{display:flex;flex-direction:column}
.mk-log-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;height:46px;padding:0 18px;border-bottom:1px solid var(--mk-line)}
.mk-log-ttl{font-size:13px;font-weight:600}
.mk-tlw{flex:1 1 auto;min-height:0;overflow:hidden}
.mk-tl{position:relative;padding:18px 18px 6px;transition:transform .8s var(--mk-ease)}

.mk-le{--tc:76px;position:relative;display:grid;grid-template-columns:var(--tc) 10px minmax(0,1fr);column-gap:14px;padding:0 0 18px}
.mk-le:not(:last-child)::after{content:"";position:absolute;left:calc(var(--tc) + 18px);top:16px;bottom:-2px;width:1px;background:#E6E4DF}
.mk-le-time{font:500 11px/1.7 "Inter",sans-serif;color:var(--mk-ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-le-dot{width:9px;height:9px;margin-top:5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #BDBAC2}
.mk-le:last-child .mk-le-dot{background:#22A05B;box-shadow:none}
.mk-le-main{min-width:0}
.mk-le-t{font-size:13px;font-weight:600;line-height:1.45}
.mk-le-txt{font-size:12.5px;line-height:1.45;color:var(--mk-ink2)}
.mk-log-ft{margin:auto 12px 12px;padding:11px 14px;border-radius:12px;background:#FAFAF8;box-shadow:inset 0 0 0 1px var(--mk-line);
  font-size:12.5px;line-height:1.45;color:var(--mk-ink2)}
.mk-log-ft b{color:var(--mk-ink)}
@container mk (max-width:600px){
  .mk-log-hd{padding:0 14px}
  .mk-tl{padding:14px 14px 4px}
  .mk-le{--tc:62px;column-gap:10px;padding-bottom:14px}
  .mk-le:not(:last-child)::after{left:calc(var(--tc) + 14px)}
  .mk-le-time{font-size:10.5px}
  .mk-le-t{font-size:12.5px}
  .mk-le-txt{font-size:12px}
  .mk-log-ft{margin:0 10px 10px;padding:9px 12px;font-size:12px}
}

/* ═══ 6. THE BIG JOBS: Slack on the desktop, its own window and the Aubergine theme ══════════════════ */
.mk-urgent{--mk-rp-r:28px;--mk-rp-b:26px}
.mk-urgent .mk-shot{--ch:560}
@container mk (max-width:600px){.mk-urgent .mk-shot{--ch:650}}
.sk{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:12px;color:#fff;
  background:linear-gradient(180deg,#3F0458 0%,#4E1463 34%,#6A2771 72%,#7C357B 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.12),0 18px 36px -26px rgba(20,19,23,.4)}
.sk-top{display:grid;grid-template-columns:1fr minmax(0,420px) 1fr;align-items:center;height:40px;flex:0 0 auto;padding:0 12px}
.sk-dots{display:flex;gap:8px}
.sk-dots i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.sk-dots i:nth-child(2){background:#FEBC2E}
.sk-dots i:nth-child(3){background:#28C840}
.sk-search{display:flex;align-items:center;justify-content:center;gap:7px;height:26px;border-radius:6px;background:rgba(255,255,255,.16);font-size:12px;color:rgba(255,255,255,.88)}
.mk .sk-search .mk-i{width:13px;height:13px}
.sk-help{justify-self:end;color:rgba(255,255,255,.85)}
.mk .sk-help .mk-i{width:17px;height:17px}
.sk-wrap{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:66px 212px minmax(0,1fr);padding:0 6px 6px 0}
.sk-rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:6px}
.sk-ws{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#fff;color:#3F0458;font-size:11px;font-weight:800}
.sk-ri{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:rgba(255,255,255,.88)}
.sk-ri .mk-i{width:34px;height:34px;padding:8px;border-radius:9px}
.sk-ri.on .mk-i{background:rgba(255,255,255,.2)}
.sk-me{display:grid;place-items:center;width:30px;height:30px;margin-top:auto;margin-bottom:8px;border-radius:7px;background:#B97B3C;font-size:11px;font-weight:600}
.sk-side{display:flex;flex-direction:column;gap:1px;padding:8px 10px 0 4px;font-size:13.5px;color:rgba(255,255,255,.78);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.1));border-radius:10px 0 0 10px}
.sk-wsn{display:flex;align-items:center;gap:4px;padding:6px 10px 10px;font-size:17px;font-weight:800;color:#fff}
.mk .sk-wsn .mk-i{width:15px;height:15px;stroke-width:2.4}
.sk-ch{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:6px;white-space:nowrap}
.sk-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mk .sk-ch .mk-i{width:15px;height:15px;opacity:.8}
.sk-ch.on{background:rgba(249,240,252,.94);color:#3F0458}
.sk-ch.bold{color:#fff;font-weight:700}
.sk-badge{margin-left:auto;padding:1px 7px;border-radius:999px;background:#CD2553;color:#fff;font-size:11px;font-weight:700}
.sk-sec-h{display:flex;align-items:center;gap:6px;margin-top:10px;padding:0 10px 3px;font-size:13px}
.mk .sk-sec-h .mk-i{width:12px;height:12px;stroke-width:2.6}
.sk-pa{display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:5px;background:#5D7A3C;color:#fff;font-size:9px;font-weight:700}
/* the desk's app icon: our mark on a white tile */
.sk-pa.fd,.sk-av.fd{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sk-mark{display:block;width:84%;height:84%}
.sk-pa.n{background:#B97B3C}
.sk-app{margin-left:6px;padding:0 4px;border-radius:3px;background:rgba(255,255,255,.16);font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.02em}
.sk-main{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:0 10px 10px 0;background:#fff;color:#1D1C1D;overflow:hidden}
.sk-chh{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;height:48px;padding:0 14px 0 18px;border-bottom:1px solid #E8E8E8}
.sk-chh p{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:800}
.mk .sk-chh p .mk-i{width:16px;height:16px;stroke-width:2.4}
.sk-hp{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;box-shadow:inset 0 0 0 1px #DDD;color:#616061}
.mk .sk-hp .mk-i{width:16px;height:16px}
.sk-feed{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 6px}
.sk-day{position:relative;margin:4px 0 6px;text-align:center}
.sk-day::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#E8E8E8}
.sk-day span{position:relative;display:inline-block;padding:4px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #DDD;font-size:12px;font-weight:700}
.sk-msg{display:flex;gap:10px;padding:6px 18px}
.sk-av{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:7px;background:#B97B3C;color:#fff;font-size:12px;font-weight:700}
.mk .sk-av .mk-i{width:20px;height:20px;stroke-width:2}
.sk-body{min-width:0;flex:1;font-size:13.5px;line-height:1.46}
.sk-who{display:flex;align-items:baseline;gap:7px}
.sk-who b{font-weight:800}
.sk-who .sk-app{margin-left:0;background:#E8E8E8;color:#616061}
.sk-who span{font-size:11.5px;color:#616061}
.sk-att{margin-top:6px;padding:2px 0 2px 14px;border-left:4px solid #C28E2B}
.sk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px;font-size:13px;line-height:1.4}
.sk-fk{font-weight:700}
.sk-links{display:flex;gap:16px;margin-top:10px;font-size:13px;color:#1264A3}
.sk-links u{text-decoration:none}
.sk-btns{display:flex;gap:8px;margin-top:10px}
.sk-btns span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:5px;font-size:12.5px;font-weight:700}
.sk-go{background:#007A5A;color:#fff}
.sk-sec{box-shadow:inset 0 0 0 1px #BBB;color:#1D1C1D}
.sk-took{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;color:#616061}
.sk-took .sk-pa{width:18px;height:18px;border-radius:4px}
.sk-in{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;margin:0 14px 22px;height:42px;padding:0 13px;border-radius:9px;box-shadow:inset 0 0 0 1px #BBB;
  font-size:13px;color:#868686}
.mk .sk-in .mk-i{width:16px;height:16px}
.sk-typing{position:absolute;left:18px;bottom:5px;display:flex;align-items:center;gap:3px;font-size:11px;color:#616061}
.sk-typing i{width:4px;height:4px;border-radius:50%;background:#868686;animation:mk-dot 1.2s infinite}
.sk-typing i:nth-child(2){animation-delay:.15s}
.sk-typing i:nth-child(3){animation-delay:.3s;margin-right:4px}
@keyframes mk-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
@container mk (max-width:600px){
  .sk-top{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .sk-help{display:none}
  .sk-wrap{grid-template-columns:minmax(0,1fr);padding:0 6px 6px}
  .sk-rail,.sk-side{display:none}
  .sk-main{border-radius:10px}
  .sk-msg{padding:6px 12px}
  .sk-grid{grid-template-columns:minmax(0,1fr);gap:6px}
  .sk-body{font-size:13px}
  .sk-in{margin:0 10px 22px}
}

/* ═══ 7. YOUR PORTAL: a browser window ═══════════════════════════════════════════════════════════════ */
.mk-portal .mk-shot{--ch:740}
@container mk (max-width:600px){.mk-portal .mk-shot{--ch:860}}
.mk-portal{--mk-rp-r:28px;--mk-rp-b:26px}
.mk .fr-mac{display:flex;flex-direction:column;width:100%;height:100%;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px var(--mk-line),0 1px 2px rgba(20,19,23,.04),0 18px 36px -26px rgba(20,19,23,.26)}
.mk .fr-chrome{flex:0 0 auto;height:40px;gap:12px;background:#EFEEEA;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--mk-line)}
.mk .fr-url{flex:0 1 300px;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;margin:0 auto;padding:0 10px;border-radius:8px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--mk-line);color:var(--mk-ink2);font-size:12px;letter-spacing:0;transform:translateX(-31px)}
.mk .fr-url .mk-i{width:12px;height:12px;color:var(--mk-ink3)}
.mk .fr-pane{flex:1 1 auto;min-height:0;background:#fff}
.mk-pt{display:grid;grid-template-columns:186px minmax(0,1fr);height:100%}
.mk-pt-side{display:flex;flex-direction:column;gap:2px;padding:14px 10px 12px;background:#FAF9F7;border-right:1px solid var(--mk-line)}
.mk-pt-co{display:flex;align-items:center;gap:8px;padding:0 4px 12px;font-size:12.5px;white-space:nowrap;min-width:0}
.mk-pt-co b{overflow:hidden;text-overflow:ellipsis}
.mk .mk-pt-co .mk-i{width:14px;height:14px;margin-left:auto;color:var(--mk-ink3)}
.mk-pt-co .mk-av{width:24px;height:24px;font-size:11px}
.mk-pt-srch{display:flex;align-items:center;gap:8px;height:30px;margin:0 0 8px;padding:0 9px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--mk-line);color:var(--mk-ink3);font-size:12px}
.mk .mk-pt-srch .mk-i{width:14px;height:14px}
.mk-pt-side nav{display:flex;flex-direction:column;gap:2px}
.mk-nav{display:flex;align-items:center;gap:10px;height:32px;padding:0 9px;border-radius:8px;font-size:12.5px;color:var(--mk-ink2);white-space:nowrap}
.mk .mk-nav .mk-i{width:16px;height:16px}
.mk-nav.on{background:#fff;color:var(--mk-ink);font-weight:500;box-shadow:0 0 0 1px var(--mk-line),0 1px 2px rgba(0,0,0,.04)}
/* the desk is on: a green light, a full bar, every setup step done */
.mk-pt-live{margin-top:auto;padding:11px 11px 10px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--mk-line)}
.mk-pt-live p{display:flex;align-items:center;gap:8px;font-size:12px}
.mk-on{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#22A05B;box-shadow:0 0 0 3px rgba(34,160,91,.16)}
.mk-pt-bar{display:block;height:4px;margin:9px 0 7px;border-radius:4px;background:#22A05B}
.mk-pt-live>span:last-child{display:block;font-size:11px;color:var(--mk-ink3)}
.mk-pt-main{min-width:0;display:flex;flex-direction:column}
.mk-pt-top{display:flex;align-items:center;gap:8px;height:42px;flex:0 0 auto;padding:0 16px 0 20px;border-bottom:1px solid var(--mk-line);font-size:12.5px;color:var(--mk-ink2)}
.mk-pt-crumb{display:flex;align-items:center;gap:8px}
.mk .mk-pt-top .mk-i{width:15px;height:15px}
.mk-pt-top .mk-av{margin-left:auto}
.mk-pt-menu,.mk-pt-mco{display:none}
.mk-pt-page{display:flex;flex-direction:column;gap:13px;padding:16px 20px 14px}
.mk-pt-hi{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.mk-pt-hi p{font-size:20px;font-weight:600;letter-spacing:-.02em}
.mk-pt-hi .mk-mono{text-transform:none;letter-spacing:.01em}
.mk-pt-card{padding:14px 18px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--mk-line)}
.mk-pt-chart{display:grid;grid-template-columns:186px minmax(0,1fr);gap:24px;align-items:center}
.mk-pt-num .mk-mono{text-transform:none;letter-spacing:.01em}
.mk-big{margin-top:6px;font-size:44px;font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mk-big small{margin-left:2px;font-size:20px;letter-spacing:0;color:var(--mk-ink3)}
.mk-pt-say{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--mk-ink2)}
.mk-leg{display:grid;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--mk-line);font-size:12px;color:var(--mk-ink2)}
.mk-leg li{display:flex;align-items:center;gap:8px}
.mk-leg i{flex:0 0 auto;width:8px;height:8px;border-radius:50%}
.mk-leg i.a{background:#B8862A}
.mk-leg i.o{background:#A3A09A}
.mk-leg b{color:var(--mk-ink);font-variant-numeric:tabular-nums}
/* the week as dots, one column an hour, sized by calls: gold after hours, grey inside the office's own hours */
.mk-hm{position:relative;display:grid;grid-template-columns:30px repeat(24,minmax(0,1fr));grid-template-rows:20px repeat(7,19px) 18px;align-items:center}
.mk-hm-d{grid-column:1;font-size:11px;line-height:1;color:var(--mk-ink3)}
.mk-hm-h{grid-row:9;justify-self:start;align-self:end;font:500 10.5px/1 "Inter",sans-serif;color:var(--mk-ink3);font-variant-numeric:tabular-nums}
.mk-hm-band{align-self:stretch;margin:-2px 0;border-radius:9px;background:#F2F1ED;box-shadow:inset 0 0 0 1px #E7E5DF}
.mk-hm-cap{justify-self:center;align-self:center;font-size:11px;line-height:1;color:var(--mk-ink3);white-space:nowrap}
.mk-hd{justify-self:center;align-self:center;width:var(--ds);height:var(--ds);border-radius:50%;background:var(--dc);
  transition:opacity .4s var(--mk-ease) calc(var(--c) * 30ms),transform .5s cubic-bezier(.3,1.4,.5,1) calc(var(--c) * 30ms)}
.mk-hd.a{--dc:#B8862A}
.mk-hd.o{--dc:#A3A09A}
.mk-hd.s0{--ds:3px;--dc:#DCDAD4}
.mk-hd.s1{--ds:5px}
.mk-hd.s2{--ds:7.5px}
.mk-hd.s3{--ds:10px}
.mk-hd.s4{--ds:12.5px}
.mk.mk-armed .mk-hm:not(.mk-in) .mk-hd{opacity:0;transform:scale(.2)}
.mk-pt-ph{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:11px}
.mk-pt-ph p{display:flex;align-items:baseline;gap:10px;font-size:14px}
.mk-pt-ph .mk-mono{font-size:12px;text-transform:none;letter-spacing:.01em;color:var(--mk-ink2)}
.mk-pt-ph .mk-cnt{background:var(--mk-gsoft);color:var(--mk-gink)}
.mk-pt-note{font-size:12px;color:var(--mk-ink3)}
.mk-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.mk-slot{position:relative;display:grid;min-width:0}
.mk-slot>div{min-height:62px;padding:9px 11px;border-radius:10px}
.mk-slot>.fx-pre{position:absolute;inset:0}
.mk-slot-on{background:var(--mk-gsoft);box-shadow:inset 0 0 0 1px var(--mk-gline)}
.mk-slot-open{border:1.5px dashed #D9D5CC}
.mk-slot span{display:block;font:500 11px/1 var(--mk-mono);color:var(--mk-ink3)}
.mk-slot-on span{color:var(--mk-gold)}
.mk-slot p{margin-top:9px;font-size:12.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-slot-open p{margin-top:8px;font-size:11.5px;font-weight:400;line-height:1.3;white-space:normal;color:var(--mk-ink3)}
.mk-slot em{display:block;margin-top:1px;font-size:11.5px;color:var(--mk-gink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-pt-lh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mk-pt-lh p{font-size:14px;font-weight:600}
.mk-pt-lh span{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--mk-ink2)}
.mk .mk-pt-lh .mk-i{width:14px;height:14px}
.mk-tbl{overflow:hidden;border-radius:12px;box-shadow:inset 0 0 0 1px var(--mk-line)}
.mk-tr{--rh:40px;position:relative;display:grid;grid-template-columns:1.2fr 1.05fr 1.95fr .9fr;align-items:center;gap:12px;height:var(--rh);padding:0 14px;border-bottom:1px solid #F1EFEB}
.mk-th{--rh:32px;background:#FAF9F7;border-bottom-color:var(--mk-line)}
.mk-th .mk-td{font-size:11.5px;font-weight:500;color:var(--mk-ink3)}
.mk-tb{--rh:40px;height:calc(4 * var(--rh));overflow:hidden}
.mk-tb-in{transform:translateY(calc(var(--n,0) * var(--rh) * -1));transition:transform .75s var(--mk-ease)}
.mk-tr-hl{position:absolute;inset:0;background:var(--mk-gsoft)}
.mk-td{position:relative;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-td.n{display:flex;align-items:center;gap:9px}
.mk-td.n>span:last-child{display:flex;flex-direction:column;min-width:0}
.mk-td.n b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.mk-td.n em{display:none}
.mk-tbl .mk-av{width:24px;height:24px;background:#F1F0EC;color:var(--mk-ink2)}
.mk-td.s{display:flex;align-items:center;gap:6px;color:var(--mk-ink2)}
.mk .mk-td.s .mk-i{width:14px;height:14px;color:var(--mk-ink3)}
.mk-td.w{font:500 11.5px/1 var(--mk-mono);color:var(--mk-ink3)}
.mk-pill{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:500;line-height:1.4;overflow:hidden;white-space:nowrap}
.mk-pill::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:currentColor}
.mk-pill.ok{background:#E3F4E8;color:#15703F}
.mk-pill.o{background:#FDEEDF;color:#B05A10}
.mk-pill.n{background:#F1F0EC;color:var(--mk-ink2)}
.mk-px{margin-left:-6px}
@container mk (max-width:600px){
  .mk-pt{grid-template-columns:minmax(0,1fr)}
  .mk-pt-side{display:none}
  .mk-pt-menu,.mk-pt-mco{display:inline-flex}
  .mk-pt-crumb{display:none}
  .mk-pt-mco{font-weight:600;color:var(--mk-ink)}
  .mk-pt-top{padding:0 12px 0 14px;gap:10px}
  .mk .fr-url{transform:none;flex:1 1 auto}
  .mk-pt-page{padding:14px 12px 14px;gap:12px}
  .mk-pt-hi p{font-size:18px}
  .mk-pt-card{padding:13px}
  .mk-pt-chart{grid-template-columns:minmax(0,1fr);gap:12px}
  .mk-big{font-size:38px}
  .mk-hm{grid-template-columns:26px repeat(24,minmax(0,1fr));grid-template-rows:20px repeat(7,15px) 16px}
  .mk-hd.s4{--ds:10px}
  .mk-hd.s3{--ds:8px}
  .mk-hd.s2{--ds:6px}
  .mk-hm-h{font-size:9.5px}
  .mk-slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .mk-slot>div{min-height:0;padding:7px 6px}
  .mk-slot p{font-size:11px;white-space:normal;line-height:1.2}
  .mk-slot em{display:none}
  .mk-pt-note{display:none}
  .mk-tr{grid-template-columns:minmax(0,1fr) auto;--rh:46px;padding:0 12px}
  .mk-tb{--rh:46px}
  .mk-th{--rh:30px}
  .mk-td.s,.mk-td.w,.mk-px{display:none}
  .mk-td.n em{display:block;font-size:11px;color:var(--mk-ink3)}
}

@media (prefers-reduced-motion:reduce){.mk *,.mk *::before,.mk *::after{animation:none!important;transition:none!important}}

html.past-hero body{background:var(--foot)}