/* ===== 10-base.css ===== */
/* =====================================================================
   BLINKI v5 - the platform, as a website.

   Every surface here is lifted from portal.html rather than invented:
   the advert box with its grain + scrim + photo blend, the white
   highlight pill, the promoted input, the endpoint terminal, the green
   greeting wave. One stylesheet, every page.
   ===================================================================== */
:root{
  --ink:#161410; --ink-2:#3A3526; --ink-3:#736B5B;
  --paper:#FAF8F3; --card:#FFFFFF; --line:#EDE9E0; --line-2:#DDD6C8;
  --g:#0E6355; --g-2:#17806A; --g-3:#08423A; --g-br:#12D39B;
  --g-soft:#E8F3EF; --g-deep:#0A4C46; --clay:#E8714C;
  --r:18px;
  --f:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --grain:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.72'/%3E%3C/svg%3E");
  --scrim:linear-gradient(100deg,rgba(10,9,6,.95) 0%,rgba(10,9,6,.93) 34%,rgba(10,9,6,.85) 54%,rgba(10,9,6,.52) 74%,rgba(10,9,6,.22) 91%,rgba(10,9,6,.14) 100%);
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;font-family:var(--f);font-size:16.5px;line-height:1.6;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.06}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* ── the pill ─────────────────────────────────────────────────────── */
.hl{display:inline-block;background:#fff;border-radius:16px;padding:0 17px 5px;
  box-shadow:6px 6px 0 rgba(0,0,0,.42);margin:0 3px}
.hl em{font-style:normal;background-image:linear-gradient(100deg,#08423A 0%,#0E6355 48%,#17806A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hl.lite{box-shadow:6px 6px 0 rgba(22,20,16,.13)}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  font-family:var(--f);font-weight:800;font-size:16px;letter-spacing:-.01em;
  padding:16px 30px;border-radius:14px;border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink:hover{background:#000;transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{transform:translateY(-1px)}
.btn-line{background:rgba(255,255,255,.9);color:var(--ink);border-color:rgba(22,20,16,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-line:hover{background:#fff;border-color:var(--ink);transform:translateY(-1px)}
.btn-ghostw{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghostw:hover{background:rgba(255,255,255,.2)}
.btn-sm{padding:11px 20px;font-size:14.5px;border-radius:11px}

/* ── chrome ───────────────────────────────────────────────────────── */

/* ===== 20-header.css ===== */
/* ── the header ───────────────────────────────────────────────────────
   It sits over a photograph, so a thin strip of small links just gets
   swallowed: this is a capsule with real weight, real type and real
   target areas. It was overdone at 104px though - the header was
   competing with the headline underneath it rather than framing it -
   so everything here has come down a notch. Still furniture, not a rule. */
.nav{position:fixed;top:20px;left:0;right:0;z-index:80;padding:0 22px}
.nav-in{max-width:1280px;margin:0 auto;height:86px;padding:0 14px 0 32px;
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);
  border:1px solid rgba(22,20,16,.06);border-radius:999px;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 1px 2px rgba(22,20,16,.04),0 4px 14px -4px rgba(22,20,16,.1),
             0 24px 60px -24px rgba(22,20,16,.5)}
.nav .logo{margin-right:26px;display:flex;align-items:center}
.nav .logo img{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:3px}
.nav-links>a,.has-mega>button{font-family:var(--f);font-size:17px;font-weight:600;
  color:var(--ink-2);padding:13px 19px;border-radius:999px;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;letter-spacing:-.015em;transition:.14s}
.nav-links>a:hover,.nav-links>a.on,.has-mega:hover>button,.has-mega.open>button{
  background:var(--paper);color:var(--ink)}
.has-mega>button svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;opacity:.45}
.has-mega.open>button svg{transform:rotate(180deg);opacity:.8}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-r:before{content:"";width:1px;height:34px;background:rgba(22,20,16,.09);margin:0 13px 0 7px}
.nav-r .li{font-size:17px;font-weight:600;color:var(--ink-2);padding:13px 18px;border-radius:999px;
  letter-spacing:-.015em}
.nav-r .li:hover{background:var(--paper);color:var(--ink)}
.nav-r .btn{padding:16px 30px;font-size:16px;border-radius:999px;font-weight:700}
@media(max-width:1180px){
  .nav-links>a,.has-mega>button{font-size:15px;padding:11px 13px}
  .nav-in{height:76px;padding:0 10px 0 24px}
  .nav .logo{margin-right:12px}
  .nav-r .btn{padding:13px 22px;font-size:15px}
}
@media(max-width:1000px){
  .nav-links{display:none}
  .nav{top:12px}
  .nav-in{height:64px;padding:0 8px 0 20px;max-width:none}
  .nav-r:before{display:none}
  .nav-r .btn{padding:14px 22px;font-size:15px}
}

/* ── the menu on a phone ──────────────────────────────────────────────
   Below 1000px .nav-links is hidden, and for a while nothing replaced it:
   every page on a phone had a logo, Log in and Start building, and no way
   to reach the other nineteen pages. */
.burger{display:none;width:46px;height:46px;border:0;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;
  margin-left:2px}
.burger span{display:block;width:21px;height:2.2px;border-radius:2px;background:var(--ink);
  transition:transform .2s,opacity .2s}
.burger.on span:first-child{transform:translateY(4px) rotate(45deg)}
.burger.on span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:79;background:var(--paper);overflow-y:auto;
  padding:96px 0 40px}
.mnav-in{padding:0 24px;max-width:520px;margin:0 auto}
.mnav h6{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:26px 0 6px}
.mnav h6:first-child{margin-top:0}
.mnav a{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  padding:13px 0;border-bottom:1px solid var(--line)}
.mnav-cta{display:flex;gap:10px;margin-top:28px}
.mnav-cta .btn{flex:1;border-bottom:0}
@media(max-width:1000px){.burger{display:flex}}
@media(min-width:1001px){.mnav{display:none!important}}

/* ===== 25-mega.css ===== */
/* ── the mega menu ───────────────────────────────────────────────────
   Scaled to match the header. A panel this size can afford to show the
   thing being sold rather than list it, so the right-hand side carries a
   real advert with the tool marks on it and the left is a proper two
   column index rather than a stack of links. */
.has-mega{position:static}
.mega{position:fixed;top:120px;left:50%;transform:translateX(-50%) translateY(-10px);
  width:min(1080px,calc(100vw - 44px));background:#fff;border:1px solid rgba(22,20,16,.07);
  border-radius:28px;padding:34px;z-index:70;
  box-shadow:0 2px 6px rgba(22,20,16,.04),0 8px 20px -6px rgba(22,20,16,.1),
             0 44px 90px -40px rgba(22,20,16,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.3,1)}
.has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.mega-g{display:grid;grid-template-columns:1fr 1fr 400px;gap:30px}
.mega h6{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px;padding-left:14px}
.mlink{display:flex;gap:15px;align-items:flex-start;padding:14px;border-radius:16px;
  transition:.14s;margin-bottom:2px}
.mlink:hover{background:var(--paper)}
.mlink .mi{width:44px;height:44px;border-radius:13px;background:var(--g-soft);color:var(--g);
  display:grid;place-items:center;flex:none;transition:.14s}
.mlink:hover .mi{background:var(--g);color:#fff}
.mlink .mi svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.85;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.mlink b{display:block;font-size:16px;font-weight:700;letter-spacing:-.025em}
.mlink span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px;font-weight:500;
  line-height:1.45}

/* the advert in the panel: the platform's own surface, shrunk */
.mfeat{position:relative;overflow:hidden;border-radius:20px;padding:28px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:330px;
  background-color:#161410;
  background-image:var(--grain),
    linear-gradient(180deg,rgba(10,9,6,.35) 0%,rgba(10,9,6,.72) 52%,rgba(10,9,6,.96) 100%),
    url(/assets/hero-web.webp);
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:150px 150px,cover,cover;
  background-position:0 0,center,center 22%;
  background-blend-mode:overlay,normal,normal}
.mfeat.dom{background-image:var(--grain),
    linear-gradient(180deg,rgba(10,9,6,.35) 0%,rgba(10,9,6,.72) 52%,rgba(10,9,6,.96) 100%),
    url(/assets/hero-domain.webp)}
.mfeat .k{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--g-br);margin-bottom:12px}
.mfeat h5{font-size:26px;font-weight:600;letter-spacing:-.035em;margin:0;line-height:1.1}
.mfeat p{font-size:14px;color:rgba(255,255,255,.74);margin-top:10px;font-weight:500;line-height:1.5}
.mtools{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.mtools i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mtools i img,.mtools i svg{width:17px;height:17px}
.mfeat .go{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
  color:var(--ink);background:#fff;border-radius:999px;padding:12px 22px;margin-top:20px;
  align-self:flex-start}
.mfeat .go:after{content:"\2192"}
.mfeat .go:hover{transform:translateY(-1px)}
@media(max-width:1180px){.mega-g{grid-template-columns:1fr 1fr}.mfeat{display:none}}
@media(max-width:1000px){.has-mega{display:none}}

/* ── the mega, second go ──────────────────────────────────────────────
   Three changes. The advert now uses the platform's own diagonal scrim
   rather than a vertical one, so it matches the advert boxes in the
   portal exactly. Every link carries its price, because "Domains" tells
   a visitor nothing and "Domains, from £12.99 a year" tells them whether
   to click. And the panel ends in a bar of the four numbers people came
   to find, which is worth more than a third column of links. */
.mlink .mt{min-width:0}
.mlink .mp{display:inline-block;font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.02em;color:var(--g-3);background:var(--g-soft);border-radius:999px;
  padding:3px 9px;margin-left:9px;vertical-align:2px}
.mlink:hover .mp{background:var(--g);color:#fff}

.mfeat{background-image:var(--grain),
  linear-gradient(170deg,rgba(10,9,6,.42) 0%,rgba(10,9,6,.62) 40%,rgba(10,9,6,.88) 72%,rgba(10,9,6,.97) 100%),
  url(/assets/hero-web.webp);
  background-size:150px 150px,cover,cover;
  /* Portrait crop, so the character's face is in the box rather than the back
     of their head. The panel is tall and narrow; the photograph is not. */
  background-position:0 0,center,72% 18%}
.mfeat.dom{background-image:var(--grain),
  linear-gradient(170deg,rgba(10,9,6,.42) 0%,rgba(10,9,6,.62) 40%,rgba(10,9,6,.88) 72%,rgba(10,9,6,.97) 100%),
  url(/assets/hero-domain.webp)}
.mfeat h5{font-size:25px}
.mfeat p{max-width:34ch}

.mega-b{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin:26px -34px -34px;padding:20px 34px;border-top:1px solid var(--line);
  background:var(--paper);border-radius:0 0 28px 28px}
.mb-say{font-size:14px;font-weight:600;color:var(--ink-2)}
.mb-px{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.mb-px a{font-size:13.5px;font-weight:500;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;transition:.14s}
.mb-px a b{font-weight:700;color:var(--ink)}
.mb-px a:hover{border-color:var(--ink)}
.mb-go{font-size:14px;font-weight:700;color:var(--g);white-space:nowrap}
.mb-go:hover{color:var(--g-3)}
@media(max-width:1180px){.mb-px{display:none}}

/* Half the tool logos are solid black artwork, which on a translucent dark
   chip is a chip with nothing in it. White chips, so every mark reads. */
.mtools i{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.4)}

/* ===== 30-hero.css ===== */
/* ── the hero ─────────────────────────────────────────────────────────
   The street already has a big sunlit cream wall down its left side, so
   the copy sits on that and reads in ink. The old version blanketed the
   whole thing in a near-black scrim and then put white text on top,
   which threw away the picture we were paying for.

   Only a light warm veil, to even the wall out and lift the type off it. */
.hero{position:relative;color:var(--ink);background:#EFE6D6;
  background-image:
    linear-gradient(100deg,rgba(250,246,238,.92) 0%,rgba(250,246,238,.86) 26%,rgba(250,246,238,.55) 42%,rgba(250,246,238,.12) 56%,rgba(250,246,238,0) 68%),
    url(/assets/hero-street.webp);
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  background-position:center,center 44%}
/* the foot of the hero melts into the page instead of stopping dead */
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:280px;
  background:linear-gradient(180deg,rgba(250,248,243,0) 0%,rgba(250,248,243,.55) 55%,var(--paper) 100%);
  pointer-events:none}
.hero-in{max-width:1240px;margin:0 auto;padding:172px 28px 160px;position:relative;z-index:2}
.hero-top{max-width:660px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  color:var(--ink-2);background:rgba(255,255,255,.72);border:1px solid rgba(22,20,16,.08);
  border-radius:999px;padding:9px 17px;margin-bottom:26px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero .eyebrow svg{width:14px;height:14px;stroke:var(--g);fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
.hero h1{font-size:62px;font-weight:600;line-height:1.05;letter-spacing:-.04em;max-width:15ch}
.hero .sub{font-size:19px;font-weight:500;color:var(--ink-2);max-width:46ch;margin-top:22px;
  line-height:1.55}

/* the MCP, in the hero, on light */
.hmcp{max-width:620px;margin-top:32px}
.hmcp .lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:11px}
.htools{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.htools .t{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.86);
  border:1px solid rgba(22,20,16,.07);border-radius:10px;padding:8px 13px;
  font-size:13px;font-weight:600;color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.htools .t img,.htools .t svg{width:15px;height:15px;flex:none}
/* This sat as bare grey text straight on the photograph, which is exactly
   where the picture stops being a lit wall and starts being a shopfront -
   so it read as half a sentence trailing off. Same chip as its neighbours,
   ghosted, so it is legible wherever the row happens to wrap to. */
.htools .more{color:var(--ink-2);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;padding:8px 13px;border-radius:10px;
  background:rgba(255,255,255,.7);border:1px dashed rgba(22,20,16,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hterm{background:#14120E;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 4px rgba(22,20,16,.06),0 24px 44px -26px rgba(22,20,16,.7)}
.hterm .trow{display:flex;align-items:center;gap:11px;padding:13px 13px 13px 18px}
.hterm code{flex:1;min-width:0;font-family:var(--mono);font-size:13.5px;color:#fff;
  overflow-x:auto;white-space:nowrap}
.hterm .cp{display:inline-flex;align-items:center;gap:6px;background:var(--g-br);border:0;
  color:var(--g-3);font-family:var(--f);font-size:12px;font-weight:700;padding:9px 13px;
  border-radius:9px;cursor:pointer}
.hterm .cp:hover{background:#3ee0af}
.hterm .cp svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.hsay{border-top:1px solid rgba(255,255,255,.1);padding:12px 18px;font-family:var(--mono);
  font-size:13.5px;color:rgba(255,255,255,.8)}
.hcta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;align-items:center;position:relative;z-index:4}
.hcta .fine{font-size:13.5px;color:var(--ink-3);font-weight:500}

@media(max-width:1100px){
  .hero{background-position:center,72% 44%}
  .hero-in{padding:130px 24px 170px}
  .hero h1{font-size:44px}
}
@media(max-width:700px){
  .hero{background-image:linear-gradient(180deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 55%,rgba(250,246,238,.75) 100%),url(/assets/hero-street.webp)}
  .hero h1{font-size:34px}.hero .sub{font-size:16.5px}
  .hero-in{padding:110px 20px 120px}
}

/* ===== 35-pagehero.css ===== */
/* ── page heroes ──────────────────────────────────────────────────────
   The service images share the street's composition: a lit wall on the
   left, the character on the right. So they take the same light hero
   treatment rather than a dark scrim, and each page just swaps the
   picture. Shorter than the homepage because they have work to do
   further down. */
.hero.pg{background-color:#F1EAE0}
.hero.pg .hero-in{padding:176px 28px 92px}
.hero.pg h1{font-size:56px;max-width:14ch}
.hero.pg:after{height:180px}
.hero.dom{background-image:
  linear-gradient(100deg,rgba(250,246,238,.94) 0%,rgba(250,246,238,.88) 28%,rgba(250,246,238,.5) 44%,rgba(250,246,238,.08) 60%,rgba(250,246,238,0) 72%),
  url(/assets/hero-domain.webp)}
.hero.mail{background-image:
  linear-gradient(100deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 30%,rgba(250,246,238,.55) 46%,rgba(250,246,238,.1) 62%,rgba(250,246,238,0) 74%),
  url(/assets/hero-mail.webp)}
.hero.tel{background-image:
  linear-gradient(100deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 30%,rgba(250,246,238,.55) 46%,rgba(250,246,238,.1) 62%,rgba(250,246,238,0) 74%),
  url(/assets/hero-phone.webp)}
.hero.web{background-image:
  linear-gradient(100deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 30%,rgba(250,246,238,.55) 46%,rgba(250,246,238,.1) 62%,rgba(250,246,238,0) 74%),
  url(/assets/hero-web.webp)}
.hero.design{background-image:linear-gradient(100deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 30%,rgba(250,246,238,.55) 46%,rgba(250,246,238,.1) 62%,rgba(250,246,238,0) 74%),url(/assets/hero-design.webp)}
.hero.move{background-image:linear-gradient(100deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 30%,rgba(250,246,238,.55) 46%,rgba(250,246,238,.1) 62%,rgba(250,246,238,0) 74%),url(/assets/hero-move.webp)}
.hero.price{background-image:linear-gradient(100deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 30%,rgba(250,246,238,.55) 46%,rgba(250,246,238,.1) 62%,rgba(250,246,238,0) 74%),url(/assets/hero-price.webp)}
.hero.blog{background-image:
  linear-gradient(100deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 30%,rgba(250,246,238,.55) 46%,rgba(250,246,238,.1) 62%,rgba(250,246,238,0) 74%),
  url(/assets/hero-blog.webp)}
.hero.shop{background-image:
  linear-gradient(100deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.9) 30%,rgba(250,246,238,.55) 46%,rgba(250,246,238,.1) 62%,rgba(250,246,238,0) 74%),
  url(/assets/hero-shop.webp)}
.hero.pg .heroctl{max-width:520px;margin-top:28px}
.hero.pg .heroctl form{display:flex;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:8px 8px 8px 18px;align-items:center;
  box-shadow:0 2px 4px rgba(22,20,16,.04),0 18px 34px -22px rgba(22,20,16,.4)}
.hero.pg .heroctl input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--f);font-size:17px;font-weight:600;color:var(--ink);padding:8px 0}
.hero.pg .heroctl input::placeholder{color:#A69E8D;font-weight:500}
.hero.pg .heroctl .at{font-size:15px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.hero.pg .heroctl .btn{padding:13px 22px;font-size:15px;border-radius:12px}
.hero.pg .chips2{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.hero.pg .chips2 button{font-family:var(--f);font-size:13px;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.8);border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:999px;padding:8px 15px}
.hero.pg .chips2 button:hover{border-color:var(--ink);color:var(--ink)}
.hero.pg .price{display:block;font-size:13.5px;font-weight:600;color:var(--ink-3);margin-top:16px}
@media(max-width:1100px){.hero.pg .hero-in{padding:104px 24px 70px}.hero.pg h1{font-size:38px}}
@media(max-width:700px){
  .hero.pg{background-image:linear-gradient(180deg,rgba(250,246,238,.95) 0%,rgba(250,246,238,.86) 100%)}
  .hero.pg h1{font-size:31px}
}

/* ── the point list, for pages that need to say four things ─────────── */
.pts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1240px;margin:0 auto}
.pts .pt .n{width:34px;height:34px;border-radius:10px;background:var(--g-soft);color:var(--g);
  display:grid;place-items:center;font-size:13px;font-weight:700;margin-bottom:14px}
.pts .pt h3{font-size:18px;font-weight:600;letter-spacing:-.02em}
.pts .pt p{font-size:14.5px;color:var(--ink-2);margin-top:8px;font-weight:500;line-height:1.55}
@media(max-width:900px){.pts{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:560px){.pts{grid-template-columns:1fr}}

/* ── the advert hero ──────────────────────────────────────────────────
   The websites page gets the platform's own advert surface rather than
   the character illustration: grain over the scrim ramp over the
   photograph, exactly as portal.html blends its advert boxes. Asked for
   specifically, and right, because this page is selling the engine
   rather than introducing the company. */
.hero.pg.ad{background-color:#0F0D08;background-image:none;color:#fff}
.hero.pg.ad:before{content:"";position:absolute;inset:0;
  /* Not var(--scrim): the portal's ramp is flat to 54% and then falls off a
     cliff, which across a full-width hero reads as a hard vertical line down
     the middle of the photograph. Same intent, spread evenly. */
  background-image:var(--grain),
    linear-gradient(100deg,rgba(10,9,6,.96) 0%,rgba(10,9,6,.92) 18%,rgba(10,9,6,.8) 34%,
      rgba(10,9,6,.6) 50%,rgba(10,9,6,.38) 66%,rgba(10,9,6,.18) 82%,rgba(10,9,6,.08) 100%),
    url(/assets/hero-web.webp);
  background-size:160px 160px,cover,cover;
  background-position:0 0,center,center right;
  background-blend-mode:overlay,normal,normal}
.hero.pg.ad .hero-in{position:relative}
.hero.pg.ad .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.hero.pg.ad .eyebrow svg{stroke:var(--g-br)}
.hero.pg.ad .sub{color:rgba(255,255,255,.8)}
.hero.pg.ad .price{color:rgba(255,255,255,.62)}
.hero.pg.ad .hl.lite{box-shadow:6px 6px 0 rgba(0,0,0,.42)}
.hero.pg.ad:after{display:none}
.hero.pg.ad .btn-ghostw{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.hero.pg.ad .btn-ghostw:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ===== 40-sections.css ===== */
/* ── sections ─────────────────────────────────────────────────────── */
.sec{padding:72px 0}
.sec.tight{padding:0 0 72px}
.sec-head{max-width:720px;margin:0 auto 34px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.kick{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g);margin-bottom:14px}
.sec-head h2{font-size:46px;font-weight:600}
.sec-head p{font-size:18px;color:var(--ink-2);margin-top:17px;font-weight:500}
@media(max-width:620px){.sec-head h2{font-size:31px}.sec{padding:56px 0}}

/* ── the showcase strip ───────────────────────────────────────────────
   Replaces the text-block-beside-image-block split: the heading is
   centred above and the content runs full width underneath as a row of
   scenes you can push sideways. */
.strip{position:relative;padding:0 0 20px}
.strip-scroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 0 26px;scrollbar-width:none;-ms-overflow-style:none}
.strip-scroll::-webkit-scrollbar{display:none}
.strip-scroll:before,.strip-scroll:after{content:"";flex:none;
  width:max(28px,calc((100vw - 1240px)/2))}
.scene{flex:none;width:420px;scroll-snap-align:center;border-radius:22px;overflow:hidden;
  position:relative;height:520px;background:#161410;
  box-shadow:0 1px 2px rgba(22,20,16,.06),0 26px 54px -34px rgba(22,20,16,.7)}
.scene .ph{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.scene:hover .ph{transform:scale(1.04)}
.scene .vl{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,7,0) 30%,rgba(12,10,7,.55) 62%,rgba(12,10,7,.93) 100%)}
.scene .cn{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 24px;color:#fff}
.scene .k{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-br);margin-bottom:9px}
.scene h3{font-size:29px;font-weight:600;letter-spacing:-.03em;line-height:1.08}
.scene p{font-size:14.5px;color:rgba(255,255,255,.78);margin-top:9px;font-weight:500;line-height:1.5}
.scene .pr{display:inline-block;font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:999px;padding:6px 14px;margin-top:16px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media(max-width:700px){.scene{width:290px;height:430px}.scene h3{font-size:23px}}

.tryrow{max-width:660px;margin:8px auto 0;text-align:center}
.tryrow form{display:flex;gap:9px;background:#fff;border:1px solid var(--line);border-radius:17px;
  padding:9px 9px 9px 20px;align-items:center;
  box-shadow:0 2px 4px rgba(22,20,16,.04),0 20px 40px -24px rgba(22,20,16,.45)}
.tryrow input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:var(--f);
  font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink);padding:8px 0}
.tryrow input::placeholder{color:#A69E8D;font-weight:500}
.tryrow .at{font-size:16px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.tryrow .btn{padding:14px 26px;font-size:15px;border-radius:13px}
.tryrow .chips2{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.tryrow .chips2 button{font-family:var(--f);font-size:13px;font-weight:600;cursor:pointer;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:999px;padding:8px 16px;transition:.13s}
.tryrow .chips2 button:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:700px){.tryrow form{flex-direction:column;align-items:stretch;padding:12px}
  .tryrow .btn{width:100%}}

/* ── the point list ───────────────────────────────────────────────── */
.pts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1240px;margin:0 auto}
.pts .pt .n{width:34px;height:34px;border-radius:10px;background:var(--g-soft);color:var(--g);
  display:grid;place-items:center;font-size:13px;font-weight:700;margin-bottom:14px}
.pts .pt h3{font-size:18px;font-weight:600;letter-spacing:-.02em}
.pts .pt p{font-size:14.5px;color:var(--ink-2);margin-top:8px;font-weight:500;line-height:1.55}
@media(max-width:900px){.pts{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:560px){.pts{grid-template-columns:1fr}}

/* ── a scene you can actually use ─────────────────────────────────────
   The cards were a picture, a line of copy and a price. You could not
   tell what you were getting. Each one now carries the real control for
   that service, so the card IS the thing rather than a poster of it. */
.scene{height:auto;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end}
.scene .cn{position:relative;padding:150px 24px 24px}
.scene .go{display:block;margin-top:16px}
.scene .go form{display:flex;gap:7px;background:#fff;border-radius:14px;padding:7px 7px 7px 15px;
  align-items:center;box-shadow:0 14px 30px -16px rgba(0,0,0,.7)}
.scene .go input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:var(--f);
  font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);padding:8px 0}
.scene .go input::placeholder{color:#A69E8D;font-weight:500}
.scene .go .at{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.scene .go .btn{padding:11px 17px;font-size:13.5px;border-radius:10px;flex:none}
.scene .go .btn.wide{width:100%;justify-content:center;padding:14px 18px;font-size:14.5px}
.scene .hint{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-top:11px;font-weight:500}
.scene .pr{margin-top:14px}
@media(max-width:700px){
  .scene{width:300px}
  .scene .go form{flex-direction:column;align-items:stretch;padding:9px}
  .scene .go .btn{width:100%}
  .scene .go .at{display:none}
}

/* ===== 45-content.css ===== */
/* ── content sections ─────────────────────────────────────────────────
   The pages were four sections each and read like a poster. Every
   credible page on a domain or a mailbox runs a dozen: what it costs to
   renew, what happens if you leave, what is included, what people ask on
   the phone. These are the blocks that carry that, in the platform's own
   surfaces rather than new ones. */

/* ── the contents band under the hero ─────────────────────────────── */
.jump{border-bottom:1px solid var(--line);background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.jump-in{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:4px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.jump-in::-webkit-scrollbar{display:none}
.jump b{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;padding-right:18px;flex:none}
.jump a{font-size:14.5px;font-weight:600;color:var(--ink-2);padding:19px 15px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:.14s}
.jump a:hover{color:var(--ink);border-bottom-color:var(--g)}
.anch{scroll-margin-top:126px}
@media(max-width:700px){.jump b{display:none}.jump-in{padding:0 18px}}

/* ── the trust row ────────────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.trust .tr{background:var(--card);padding:26px 24px}
.trust .tr b{display:block;font-size:27px;font-weight:600;letter-spacing:-.035em;color:var(--ink);
  line-height:1.1}
.trust .tr span{display:block;font-size:14px;color:var(--ink-2);margin-top:7px;font-weight:500;
  line-height:1.5}
@media(max-width:900px){.trust{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.trust{grid-template-columns:1fr}}

/* ── what is included ─────────────────────────────────────────────────
   A tick list grouped under headings, which is the only honest way to
   show a spec: everything visible at once rather than drip-fed. */
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.inc .g{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 24px}
.inc .g h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
.inc .g ul{list-style:none;margin:16px 0 0;padding:0}
.inc .g li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);
  font-weight:500;line-height:1.5;padding:7px 0}
.inc .g li svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--g);stroke-width:3;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.inc{grid-template-columns:1fr}}

/* ── the price table ──────────────────────────────────────────────────
   Register price AND renewal price on the same line. Everybody in this
   market shows the first year in big type and buries the renewal, which
   is exactly the thing customers get angry about a year later. */
.spec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec table{width:100%;border-collapse:collapse}
.spec th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:17px 26px;background:var(--paper);border-bottom:1px solid var(--line)}
.spec td{padding:17px 26px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2);
  font-weight:500;vertical-align:middle}
.spec tr:last-child td{border-bottom:0}
.spec td.n{font-weight:700;color:var(--ink);font-size:16px}
.spec td.p{font-weight:700;color:var(--ink)}
.spec .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  background:var(--g-soft);color:var(--g-3);border-radius:999px;padding:4px 10px;margin-left:9px}
.spec-note{font-size:13.5px;color:var(--ink-3);margin-top:14px;font-weight:500;text-align:center}
@media(max-width:760px){
  .spec table,.spec tbody,.spec tr,.spec td{display:block;width:100%}
  .spec thead{display:none}
  .spec tr{border-bottom:1px solid var(--line);padding:8px 0}
  .spec tr:last-child{border-bottom:0}
  .spec td{border:0;padding:5px 20px}
  .spec td:before{content:attr(data-l);display:block;font-size:11px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
}

/* ── the comparison ───────────────────────────────────────────────── */
.ctab{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ctab table{width:100%;border-collapse:collapse}
.ctab th{font-size:13px;font-weight:700;padding:19px 22px;background:var(--paper);
  border-bottom:1px solid var(--line);text-align:center;color:var(--ink-3)}
.ctab th:first-child{text-align:left;width:38%}
.ctab th.us{background:var(--g-soft);color:var(--g-3);font-size:14px}
.ctab td{padding:17px 22px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2);
  font-weight:500;text-align:center}
.ctab td:first-child{text-align:left;font-weight:600;color:var(--ink)}
.ctab td.us{background:rgba(232,243,239,.45);font-weight:700;color:var(--ink)}
.ctab tr:last-child td{border-bottom:0}
.ctab svg{width:17px;height:17px;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  display:inline-block;vertical-align:-3px}
.ctab .y svg{stroke:var(--g)}
.ctab .n svg{stroke:#C0B8A6}
@media(max-width:760px){.ctab{overflow-x:auto}.ctab table{min-width:560px}}

/* ── the questions ────────────────────────────────────────────────────
   Real questions, in the words people use, including the awkward ones
   about leaving. A page that will not answer those reads as a page with
   something to hide. */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;
  overflow:hidden;transition:.15s}
.faq details[open]{border-color:var(--line-2);box-shadow:0 1px 2px rgba(22,20,16,.04),
  0 18px 34px -26px rgba(22,20,16,.45)}
.faq summary{list-style:none;cursor:pointer;padding:21px 26px;font-size:17px;font-weight:600;
  letter-spacing:-.02em;display:flex;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;margin-left:auto;width:11px;height:11px;
  border-right:2.4px solid var(--ink-3);border-bottom:2.4px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s;margin-top:-4px}
.faq details[open] summary:after{transform:rotate(-135deg);margin-top:2px}
.faq .a{padding:0 26px 24px;font-size:15.5px;color:var(--ink-2);font-weight:500;line-height:1.62;
  max-width:68ch}
.faq .a p+p{margin-top:12px}
@media(max-width:620px){.faq summary{font-size:15.5px;padding:17px 20px}.faq .a{padding:0 20px 20px}}

/* ── the advert band, straight off the platform ───────────────────────
   Grain, then the scrim ramp, then the photograph, blended the way the
   portal's advert boxes are. This is the surface the platform uses for
   anything it is selling, so it is the surface the site uses too. */
.band{position:relative;overflow:hidden;border-radius:26px;color:#fff;background:#0F0D08;
  min-height:440px;display:flex;align-items:flex-end}
.band:before{content:"";position:absolute;inset:0;background-image:var(--grain),
  /* Not var(--scrim). The portal's ramp is almost flat from 0 to 54% and then
     falls away steeply, which on a box this shape reads as a hard vertical
     line down the middle of the photograph. Same idea, spread evenly. */
  linear-gradient(100deg,rgba(10,9,6,.95) 0%,rgba(10,9,6,.9) 20%,rgba(10,9,6,.76) 38%,
    rgba(10,9,6,.54) 55%,rgba(10,9,6,.3) 72%,rgba(10,9,6,.12) 88%,rgba(10,9,6,.06) 100%),
  var(--bandimg);background-size:160px 160px,cover,cover;
  background-position:0 0,center,center right;background-blend-mode:overlay,normal,normal}
.band-in{position:relative;padding:56px 54px;max-width:640px}
.band .k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-br);margin-bottom:15px}
.band h2{font-size:42px;font-weight:600;letter-spacing:-.035em;line-height:1.07}
.band p{font-size:17px;color:rgba(255,255,255,.8);margin-top:17px;font-weight:500;line-height:1.55}
.band .row{display:flex;gap:11px;margin-top:28px;flex-wrap:wrap}
.band ul{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.band li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:600;
  color:rgba(255,255,255,.9)}
.band li svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--g-br);stroke-width:3;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){.band-in{padding:38px 26px}.band h2{font-size:30px}
  .band ul{grid-template-columns:1fr}}

/* ── a plain two-column explainer, for the things that need prose ──── */
.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:0 auto}
.notes .nt{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.notes .nt h3{font-size:19px;font-weight:600;letter-spacing:-.025em}
.notes .nt p{font-size:15px;color:var(--ink-2);margin-top:10px;font-weight:500;line-height:1.6}
.notes .nt p+p{margin-top:11px}
@media(max-width:820px){.notes{grid-template-columns:1fr}}

/* ── the legal pages ──────────────────────────────────────────────────
   The wording is unchanged; the page around it is not. A policy is only
   any use if somebody can read it, which means a measured column, real
   headings and the contents bar every other page here has. */
.hero.legal{background-color:#F1EAE0;background-image:
  linear-gradient(100deg,rgba(250,246,238,.96) 0%,rgba(250,246,238,.9) 34%,rgba(250,246,238,.6) 52%,rgba(250,246,238,.12) 68%,rgba(250,246,238,0) 80%),
  url(/assets/hero-price.webp)}
.hero.legal .hero-in{padding:166px 28px 80px}
.hero.legal h1{font-size:50px;max-width:16ch}
.lgup{display:inline-block;font-size:13px;font-weight:600;color:var(--ink-2);
  background:rgba(255,255,255,.8);border:1px solid rgba(22,20,16,.07);border-radius:999px;
  padding:9px 17px;margin-top:24px}
.legal{max-width:760px;margin:0 auto;font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.legal h2{font-size:27px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  margin:46px 0 14px;padding-top:6px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:19px;font-weight:700;color:var(--ink);margin:28px 0 10px}
.legal p{margin:0 0 16px}
.legal ul,.legal ol{margin:0 0 18px;padding-left:22px}
.legal li{margin:8px 0}
.legal a{color:var(--g);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--g-3)}
.legal strong,.legal b{color:var(--ink)}
.legal table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.legal th{text-align:left;font-weight:700;color:var(--ink);padding:12px 14px;
  background:var(--paper);border-bottom:1px solid var(--line)}
.legal td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.legal .note{background:var(--g-soft);border:1px solid rgba(14,99,85,.14);border-radius:16px;
  padding:22px 24px;margin:0 0 28px;font-size:15.5px;color:var(--g-3)}
.legal .note b{color:var(--g-3)}
@media(max-width:700px){.hero.legal h1{font-size:31px}.legal h2{font-size:22px}}

/* ── the blog listing ─────────────────────────────────────────────────
   Same card language as the rest of the site: white surface, hairline,
   a photograph that lifts on hover. The markup and the class names are
   the old page's, because the script that builds them was left alone. */
.blog-filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.blog-chip{font-family:var(--f);font-size:14px;font-weight:600;cursor:pointer;background:#fff;
  border:1px solid var(--line-2);color:var(--ink-2);border-radius:999px;padding:10px 20px;
  transition:.14s}
.blog-chip:hover{border-color:var(--ink);color:var(--ink)}
.blog-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bfeatured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:26px;overflow:hidden;margin-bottom:22px;
  box-shadow:0 1px 2px rgba(22,20,16,.05),0 26px 54px -40px rgba(22,20,16,.6);transition:.18s}
.bfeatured:hover{transform:translateY(-2px);border-color:var(--line-2)}
.bfeatured .thumb{min-height:340px;background:#E7E0D2 center/cover no-repeat}
.bfeatured .body{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center}
.bfeatured h3{font-size:34px;font-weight:600;letter-spacing:-.035em;line-height:1.1;margin:12px 0 0}
.bfeatured p{font-size:16px;color:var(--ink-2);margin-top:13px;font-weight:500;line-height:1.55}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.bcard:hover{transform:translateY(-2px);border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(22,20,16,.05),0 22px 46px -34px rgba(22,20,16,.6)}
.bcard .thumb{height:190px;background:#E7E0D2 center/cover no-repeat}
.bcard .body{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1}
.bcard h3{font-size:20px;font-weight:600;letter-spacing:-.028em;line-height:1.2;margin:11px 0 0}
.bcard p{font-size:14.5px;color:var(--ink-2);margin-top:9px;font-weight:500;line-height:1.55;flex:1}
.btag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--g-3);background:var(--g-soft);border-radius:999px;
  padding:5px 12px}
.bmeta{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:13px;font-weight:600;
  color:var(--ink-3)}
.bavatar{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;flex:none;
  background:var(--g);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
.blog-empty{text-align:center;padding:70px 20px;background:var(--card);border:1px solid var(--line);
  border-radius:22px}
.blog-empty h3{font-size:23px;font-weight:600;letter-spacing:-.03em}
.blog-empty p{font-size:16px;color:var(--ink-2);margin-top:10px;font-weight:500}
@media(max-width:1000px){.blog-grid{grid-template-columns:1fr 1fr}
  .bfeatured{grid-template-columns:1fr}.bfeatured .thumb{min-height:230px}
  .bfeatured .body{padding:30px 26px 28px}.bfeatured h3{font-size:26px}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}

/* ── a single post ────────────────────────────────────────────────────
   Class names are the old page's because its rendering script was left
   alone; the treatment is this site's. One measured column, because a
   long read at full page width is a long read nobody finishes. */
.artpage{padding-top:128px}
.art-wrap{max-width:760px;margin:0 auto;padding:0 28px}
.art-head{padding:44px 0 26px}
.art-crumb{font-size:13.5px;font-weight:600;color:var(--ink-3);margin-bottom:20px}
.art-crumb a{color:var(--g);font-weight:700}
.art-head h1{font-size:47px;font-weight:600;letter-spacing:-.04em;line-height:1.06;margin:14px 0 0}
.art-meta{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;font-weight:600;
  color:var(--ink-3)}
.art-cover{max-width:1080px;margin:34px auto 0;padding:0 28px}
.art-cover .img{height:min(52vw,470px);border-radius:24px;background:#E7E0D2 center/cover no-repeat;
  box-shadow:0 1px 2px rgba(22,20,16,.05),0 30px 60px -40px rgba(22,20,16,.6)}
.art-body{padding:44px 0 64px}
.art-body-inner{font-size:17.5px;line-height:1.75;color:var(--ink-2)}
.art-body-inner h2{font-size:30px;font-weight:600;letter-spacing:-.032em;color:var(--ink);
  margin:48px 0 14px}
.art-body-inner h3{font-size:21px;font-weight:700;color:var(--ink);margin:32px 0 10px}
.art-body-inner p{margin:0 0 18px}
.art-body-inner ul,.art-body-inner ol{margin:0 0 20px;padding-left:22px}
.art-body-inner li{margin:9px 0}
.art-body-inner img{border-radius:18px;margin:12px 0 22px}
.art-body-inner a{color:var(--g);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.art-body-inner blockquote{margin:24px 0;padding:20px 26px;background:var(--g-soft);
  border-radius:16px;color:var(--g-3);font-weight:500}
.art-body-inner code{font-family:var(--mono);font-size:15px;background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.art-related{max-width:1080px;margin:0 auto;padding:0 28px}
.art-related h4{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.relc{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:block;transition:.16s}
.relc:hover{transform:translateY(-2px);border-color:var(--line-2)}
.relc .thumb{height:130px;background:#E7E0D2 center/cover no-repeat}
.relc .rb{padding:18px}
.relc h3{font-size:17px;font-weight:600;letter-spacing:-.025em;line-height:1.22;margin:9px 0 0}
.art-loading{text-align:center;padding:110px 20px;color:var(--ink-3);font-size:16px;font-weight:500}
.art-loading h1{font-size:34px;color:var(--ink);margin-bottom:10px}
@media(max-width:900px){.rel-grid{grid-template-columns:1fr}}
@media(max-width:700px){.artpage{padding-top:90px}.art-head h1{font-size:31px}
  .art-body-inner{font-size:16.5px}.art-body-inner h2{font-size:24px}}

/* ── the redesign form ────────────────────────────────────────────────
   Class names are the old page's, because its validation script was kept
   whole. The form sits in the hero rather than under it: it is the only
   thing this page is asking anybody to do. */
.rdwrap{max-width:680px;margin-top:30px}
.rd-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px}
.rd-card{box-shadow:0 2px 6px rgba(22,20,16,.05),0 30px 60px -38px rgba(22,20,16,.55)}
.rd-lede{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink);
  margin:0 0 20px}
.rd-lede svg{width:19px;height:19px;stroke:var(--g);stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.rd-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rd-f{display:block;margin-bottom:12px}
.rd-f>span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.rd-f>span i{font-style:normal;font-weight:500;color:var(--ink-3)}
.rd-f input{width:100%;font-family:var(--f);font-size:16px;font-weight:500;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;
  outline:0;transition:.14s}
.rd-f input::placeholder{color:#A69E8D}
.rd-f input:focus{border-color:var(--g);background:#fff;box-shadow:0 0 0 3px rgba(14,99,85,.1)}
.rd-f input.bad{border-color:var(--clay);background:#FEF6F3}
.rd-wide{margin-bottom:16px}
.rd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rd-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.rd-foot .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.rd-foot .btn:hover{background:#000}
.rd-note{font-size:12.5px;color:var(--ink-3);font-weight:500;line-height:1.5;flex:1;min-width:200px;
  margin:0}
.rd-msg{font-size:14px;font-weight:600;margin:14px 0 0}
.rd-msg:empty{display:none}
.rd-err{color:var(--clay)}
.rd-ok{color:var(--g)}
@media(max-width:700px){.rd-row{grid-template-columns:1fr}.rd-card{padding:22px}
  .rd-foot .btn{width:100%}}
.rd-form{margin:0}

/* ===== 50-mcp-plans.css ===== */
/* ── the MCP card, from the portal's Websites page ────────────────── */
.mcp{background:linear-gradient(160deg,#F3F7F5 0%,#FBFAF7 55%,#F6F3EC 100%);
  border:1px solid var(--line);border-radius:var(--r);padding:46px 50px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.mcp h2,.mcp h3{font-size:42px;max-width:14ch;font-weight:600}
.mcp>div>p{font-size:17px;color:var(--ink-2);margin-top:17px;font-weight:500;max-width:46ch}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:530px}
.tools .t{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:9px 14px;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.tools .t img,.tools .t svg{width:15px;height:15px;flex:none}
.tools .more{display:inline-flex;align-items:center;color:var(--ink-3);font-size:13px;
  font-weight:500;padding-left:3px}
.mcpcta{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mcpcta .p{font-size:13.8px;color:var(--ink-2);font-weight:500;max-width:34ch;line-height:1.5}
.mcpcta .p b{color:var(--ink);font-weight:700}
.term{background:#12100C;border-radius:15px;overflow:hidden;
  box-shadow:0 26px 48px -28px rgba(22,20,16,.8)}
.term .tbar{display:flex;align-items:center;gap:7px;padding:12px 15px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.term .tbar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);display:block}
.term .tbar b{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.5);margin-left:5px}
.term .trow{display:flex;align-items:center;gap:12px;padding:16px 16px 16px 19px}
.term code{flex:1;min-width:0;font-family:var(--mono);font-size:14px;color:#fff;
  overflow-x:auto;white-space:nowrap}
.term .cp{display:inline-flex;align-items:center;gap:7px;background:var(--g);border:0;color:#fff;
  font-family:var(--f);font-size:12.5px;font-weight:700;padding:10px 15px;border-radius:10px;cursor:pointer}
.term .cp:hover{background:var(--g-2)}
.term .cp svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.say{margin-top:13px;background:#12100C;border-radius:13px;padding:16px 19px;
  font-family:var(--mono);font-size:14.5px;color:#fff}
.saylbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:20px 0 9px}
.saylbl:first-child{margin-top:0}
@media(max-width:980px){.mcp{grid-template-columns:1fr;padding:32px 24px;gap:30px}
  .mcp h2,.mcp h3{font-size:30px}}

/* ── pricing cards ────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px 28px;display:flex;flex-direction:column}
.plan.lead{background:var(--ink);color:#fff;border-color:var(--ink);position:relative}
.plan .tag{position:absolute;top:-11px;left:28px;background:var(--g-br);color:var(--g-3);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:8px}
.plan h3{font-size:20px;font-weight:600}
.plan .d{font-size:14px;color:var(--ink-3);margin-top:7px;font-weight:500;min-height:42px}
.plan.lead .d{color:rgba(255,255,255,.66)}
.plan .n{font-size:44px;font-weight:700;letter-spacing:-.045em;margin-top:16px;line-height:1}
.plan .n s{font-size:15px;font-weight:600;text-decoration:none;color:var(--ink-3);letter-spacing:-.01em}
.plan.lead .n s{color:rgba(255,255,255,.6)}
.plan .yr{font-size:13px;color:var(--ink-3);margin-top:8px;font-weight:500}
.plan.lead .yr{color:rgba(255,255,255,.6)}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:10px 0;font-weight:500}
.plan li svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--g);
  stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.plan.lead li svg{stroke:var(--g-br)}
.plan .btn{width:100%}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* ── the greeting band, from the portal ───────────────────────────── */
.greet{position:relative;overflow:hidden;color:#fff;background:var(--g-deep);
  background-image:var(--grain),
    linear-gradient(96deg,rgba(5,32,26,.93) 0%,rgba(5,32,26,.72) 40%,rgba(5,32,26,.28) 76%,rgba(5,32,26,.1) 100%),
    url(/assets/home-greeting.webp);
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:150px 150px,cover,cover;
  background-position:0 0,center,62% 38%;
  background-blend-mode:overlay,normal,normal}
.greet-in{max-width:1240px;margin:0 auto;padding:92px 28px}
.greet h2{font-size:52px;font-weight:600;max-width:18ch}
.greet p{font-size:19px;color:rgba(255,255,255,.8);max-width:52ch;margin-top:19px;font-weight:500}
.greet .row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
@media(max-width:820px){.greet h2{font-size:32px}.greet-in{padding:56px 22px}}

/* ── plain cards ──────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.card h3{font-size:19px;font-weight:600}
.card p{font-size:15px;color:var(--ink-2);margin-top:10px;font-weight:500}
.card .num{width:38px;height:38px;border-radius:11px;background:var(--g-soft);color:var(--g);
  display:grid;place-items:center;font-size:14px;font-weight:700;margin-bottom:16px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

/* ===== 60-editor.css ===== */
/* ── the editor demo, ported from the portal's Websites page ────── */
/* ── the editor, coming out of the bottom edge ── */
.wsdemo{margin-top:auto;padding-top:24px}
.wsdcap{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0 0 11px}
.edw{position:relative;height:400px;margin-bottom:-190px;border-radius:16px 16px 0 0;
  background:#fff;border:1px solid rgba(22,20,16,.1);border-bottom:0;overflow:hidden;
  box-shadow:0 -1px 2px rgba(22,20,16,.03),0 26px 50px -34px rgba(22,20,16,.6)}
.edtop{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;
  border-bottom:1px solid var(--line);background:#FDFCFA}
.edb{font-size:13px;font-weight:800;letter-spacing:-.04em}
.edsep{width:1px;height:16px;background:var(--line)}
.edname{font-size:11px;font-weight:800;line-height:1.15;color:var(--ink)}
.edname i{display:block;font-style:normal;font-size:9.5px;font-weight:600;color:var(--ink-3)}
.edtabs{display:flex;align-items:center;gap:3px;margin:0 auto;background:#F4F2ED;
  border-radius:99px;padding:3px}
.edtabs b,.edtabs i{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-3);
  padding:5px 13px;border-radius:99px}
.edtabs b{background:#fff;color:var(--ink);font-weight:800;box-shadow:0 1px 2px rgba(22,20,16,.08)}
.edacts{display:flex;align-items:center;gap:7px}
.edacts i{font-style:normal;font-size:11px;font-weight:700;color:var(--ink);
  border:1px solid var(--line-2);border-radius:8px;padding:6px 11px}
.edpub{font-size:11px;font-weight:800;color:#fff;background:var(--ink);
  border-radius:8px;padding:7px 13px;display:inline-block}
.edmain{display:flex;height:calc(100% - 44px)}
.edcanvas{flex:1;min-width:0;background:#F4F2ED;padding:14px}
.edpage{border-radius:8px;height:100%;overflow:hidden;background:#141412;
  box-shadow:0 1px 3px rgba(22,20,16,.08)}
/* A site somebody would actually want. Full-bleed photograph, display type
   over the top of it at the size a real hero uses, one hot accent. A polite
   two-column layout with grey bars in it sells nothing, and this is the only
   picture of the product on the page. Green is the platform's; everything
   inside the page frame belongs to the imaginary customer. */
.edpage{--m:#F2603C}
.ednav{display:flex;align-items:center;gap:8px;height:37px;padding:0 14px;
  background:#141412;border-bottom:1px solid rgba(255,255,255,.1)}
.edmark{width:19px;height:19px;flex:none;color:var(--m);display:block}
.edmark svg{width:19px;height:19px;display:block}
.edwm{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;line-height:1.05}
.edwm i{display:block;font-style:normal;font-size:6px;font-weight:700;letter-spacing:.2em;
  color:rgba(255,255,255,.42);margin-top:2px}
.edlinks{display:flex;gap:14px;margin-left:18px}
.edlinks i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.66)}
.edcta2{margin-left:auto;font-size:8.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#141412;background:#fff;border-radius:99px;padding:7px 14px}
.edhero{position:relative;height:calc(100% - 37px);padding:20px 22px 0;
  background:#141412 url(/assets/ed-hero-salon.webp) center 34%/cover no-repeat}
.edhero:before{content:'';position:absolute;inset:0;
  background:linear-gradient(93deg,rgba(10,10,8,.9) 0%,rgba(10,10,8,.74) 44%,rgba(10,10,8,.42) 78%,rgba(10,10,8,.3) 100%)}
.edhero>*{position:relative;z-index:2}
.edkick{display:block;font-size:7.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--m);margin-bottom:22px}
.edsel{display:inline-block;position:relative;border:2px solid transparent;border-radius:4px;
  margin:0 -7px;padding:1px 7px}
.edtag{position:absolute;left:-2px;top:-22px;background:#12D39B;color:#062A22;opacity:0;
  font:800 10px/1 var(--f);padding:5px 8px;border-radius:7px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.edh1{font-size:31px;font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0;
  color:#fff;text-transform:uppercase;max-width:11ch}
.edtype{display:inline-block;clip-path:inset(0 100% 0 0);white-space:nowrap}
.edbtns{display:flex;gap:8px;margin-top:17px}
.edbtns i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;border-radius:99px;padding:8px 15px}
.edbtns .b1{background:var(--m);color:#fff}
.edbtns .b2{border:1px solid rgba(255,255,255,.42);color:#fff}
.edpanel{width:250px;flex:none;border-left:1px solid var(--line);padding:13px;background:#fff}
.edplbl{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.edfield{display:block;border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:7px}
.edfield b{display:block;font-size:10px;font-weight:800;color:var(--ink-3);margin-bottom:5px}
.edfield em{display:block;height:9px;border-radius:3px;background:#EFECE4;font-style:normal}
.edcur{position:absolute;left:82%;top:44%;width:19px;height:19px;z-index:6;
  filter:drop-shadow(0 2px 4px rgba(22,20,16,.35))}
.edcur svg{width:19px;height:19px;fill:var(--ink);stroke:#fff;stroke-width:1.4}
.edcur:after{content:'';position:absolute;left:-9px;top:-9px;width:34px;height:34px;
  border-radius:50%;border:2px solid var(--ink);opacity:0;transform:scale(.3)}
.edtoast{position:absolute;right:16px;top:54px;z-index:7;background:var(--ink);color:#fff;
  font-size:11px;font-weight:800;border-radius:9px;padding:8px 13px;opacity:0}

/* hover outlines it, the click adds the ring, exactly as the editor does */
.edsel{animation:edsel 10s linear infinite}
.edtag{animation:edtag 10s linear infinite}
@keyframes edsel{
  0%,24%{border-color:transparent;box-shadow:none}
  26%,29%{border-color:#12D39B;box-shadow:none}
  30%,64%{border-color:#12D39B;box-shadow:0 0 0 3px rgba(18,211,155,.22)}
  68%,100%{border-color:transparent;box-shadow:none} }
@keyframes edtag{ 0%,24%{opacity:0} 26%,64%{opacity:1} 68%,100%{opacity:0} }
.edcur{animation:edcur 10s cubic-bezier(.55,.05,.25,1) infinite}
.edcur:after{animation:edclick 10s linear infinite}
.edtype{animation:edtype 10s steps(26) infinite}
.edf1{animation:edfield 10s linear infinite}
.edpub{animation:edpub 10s linear infinite}
.edtoast{animation:edtoast 10s ease infinite}
@keyframes edcur{
  0%,14%{left:82%;top:44%} 26%,58%{left:16.5%;top:37%}
  70%,88%{left:93.5%;top:5.5%} 96%,100%{left:82%;top:44%} }
@keyframes edclick{
  0%,27.5%{opacity:0;transform:scale(.3)} 28%{opacity:.9;transform:scale(.3)}
  32%{opacity:0;transform:scale(1)} 32.1%,71.5%{opacity:0;transform:scale(.3)}
  72%{opacity:.9;transform:scale(.3)} 76%{opacity:0;transform:scale(1)}
  76.1%,100%{opacity:0;transform:scale(.3)} }
@keyframes edtype{ 0%,32%{clip-path:inset(0 100% 0 0)} 56%,100%{clip-path:inset(0 0 0 0)} }
@keyframes edfield{
  0%,29%{background:transparent;border-color:var(--line)}
  30%,62%{background:#F2F8F6;border-color:#0E6355}
  64%,100%{background:transparent;border-color:var(--line)} }
@keyframes edpub{ 0%,71%{transform:none} 73%{transform:scale(.93)} 76%,100%{transform:none} }
@keyframes edtoast{
  0%,75%{opacity:0;transform:translateY(7px)} 79%,90%{opacity:1;transform:none}
  95%,100%{opacity:0;transform:translateY(7px)} }
@media (prefers-reduced-motion:reduce){
  .edcur,.edcur:after,.edtype,.edf1,.edpub,.edtoast,.edsel,.edtag{animation:none}
  .edtype{clip-path:none}
  .edcur{display:none}
}

/* On the homepage it does not hang off the bottom of a card, it stands
   on the page as the proof, so the negative margin is undone. */
.edstage{max-width:1120px;margin:-118px auto 0;padding:0 28px;position:relative;z-index:3}
.edstage .edw{height:612px;margin-bottom:0;border-radius:16px;border-bottom:1px solid rgba(22,20,16,.1);
  box-shadow:0 2px 6px rgba(22,20,16,.05),0 44px 90px -48px rgba(22,20,16,.75)}
.edstage .wsdcap{text-align:center;font-size:14px;color:var(--ink-2);margin:0 0 16px;font-weight:600}
@media(max-width:820px){.edstage{margin-top:-90px;padding:0 18px}.edstage .edw{height:340px}}

/* ── the alternating rows ──────────────────────────────────────────────
   Full width, image bleeding to one edge, copy on the other, alternating
   down the page. This is the shape the four products want: they are the
   same kind of thing said four times, and a row reads as a rhythm where
   four stacked cards read as a list. */
.row2{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;min-height:520px}
.row2>.t{padding:80px 70px 80px calc((100vw - 1240px)/2 + 28px);max-width:none}
.row2>.im{height:100%;min-height:520px;background-size:cover;background-position:center}
.row2.flip>.t{order:2;padding:80px calc((100vw - 1240px)/2 + 28px) 80px 70px}
.row2.flip>.im{order:1}
@media(max-width:1300px){
  .row2>.t{padding:70px 50px}
  .row2.flip>.t{padding:70px 50px}
}
.row2 .kick{color:var(--g)}
.row2 h2{font-size:44px;max-width:13ch}
.row2 p{font-size:17.5px;color:var(--ink-2);margin-top:18px;max-width:44ch;font-weight:500}
.row2 .price{display:block;font-size:14px;font-weight:700;color:var(--ink-3);margin-top:18px}
.row2 .ctl{margin-top:26px;max-width:460px}
.row2 .ctl form{display:flex;gap:9px;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:8px 8px 8px 18px;align-items:center;
  box-shadow:0 2px 4px rgba(22,20,16,.04),0 18px 34px -22px rgba(22,20,16,.4)}
.row2 .ctl input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:var(--f);
  font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);padding:8px 0}
.row2 .ctl input::placeholder{color:#A69E8D;font-weight:600}
.row2 .ctl .at{font-size:15px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.row2 .ctl .btn{padding:13px 22px;font-size:15px;border-radius:12px}
.row2 .chips2{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.row2 .chips2 button,.row2 .chips2 span{font-family:var(--f);font-size:13px;font-weight:700;
  cursor:pointer;background:#fff;border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:99px;padding:8px 16px;transition:.13s}
.row2 .chips2 button:hover{border-color:var(--ink);color:var(--ink)}
/* a dark row, for contrast partway down */
.row2.dark{background:#161410;color:#fff}
.row2.dark .kick{color:var(--g-br)}
.row2.dark p{color:rgba(255,255,255,.78)}
.row2.dark .price{color:rgba(255,255,255,.55)}
.row2.dark .chips2 button,.row2.dark .chips2 span{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.26);color:#fff}
@media(max-width:960px){
  .row2,.row2.flip{grid-template-columns:1fr;min-height:0}
  .row2>.t,.row2.flip>.t{order:1;padding:46px 22px}
  .row2>.im,.row2.flip>.im{order:2;min-height:300px;height:300px}
  .row2 h2{font-size:31px}
}

/* ── the mock site inside the editor ──────────────────────────────────
   It was a near-black template with a headline and two buttons on it,
   which showed neither what a Blinki site looks like nor what is on one.
   This is a bright, ordinary café page with the things a café page
   actually has: a menu with prices, opening hours and an address. The
   point of the demo is the customer recognising their own website in it. */
.edpage{background:#fff !important;--m:#0E6355}
.ednav{background:#fff;border-bottom:1px solid #ECE8E0}
.ednav .edmark{color:#0E6355}
.edwm,.edwm i{color:#161410}
.edlinks i{color:#5C5648}
.edcta2{background:#161410;color:#fff}
.edhero{background:#FBF9F5 !important;height:auto !important;padding:18px 20px 14px !important;
  border-bottom:1px solid #F0ECE4}
.edkick{color:#8A8374 !important}
.edh1{color:#161410 !important;font-size:26px !important;font-weight:700 !important;max-width:14ch}
.edtype{color:#0E6355}
.edbtns .b1{background:#0E6355;color:#fff}
.edbtns .b2{border:1px solid #DDD6C8;color:#161410}
/* the rest of the page, under the fold of the mock */
.edbody{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;padding:14px 20px 18px;
  background:#fff}
.edmenu h6{font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#8A8374;margin:0 0 8px}
.edmenu .mrow{display:flex;align-items:baseline;gap:7px;margin:7px 0}
.edmenu .mrow b{font-size:10.5px;font-weight:700;color:#161410;white-space:nowrap}
.edmenu .mrow s{flex:1;height:1px;background:#EDE9E0;text-decoration:none}
.edmenu .mrow em{font-style:normal;font-size:10.5px;font-weight:700;color:#0E6355}
.edmenu .msub{font-size:8.5px;color:#8A8374;display:block;margin-top:1px;font-weight:500}
.edside .box{background:#F7F5F0;border:1px solid #EDE9E0;border-radius:8px;padding:11px 12px;
  margin-bottom:9px}
.edside h6{font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#8A8374;margin:0 0 7px}
.edside .hr{display:flex;justify-content:space-between;font-size:9.5px;margin:4px 0;color:#3A3526;
  font-weight:600}
.edside .hr b{font-weight:700;color:#161410}
.edside .addr{font-size:9.5px;line-height:1.5;color:#3A3526;font-weight:500}
.edshots{display:flex;gap:7px;margin-top:10px}
.edshots i{flex:1;height:44px;border-radius:6px;background-size:cover;background-position:center;
  display:block}
@media(max-width:820px){.edbody{grid-template-columns:1fr;gap:10px}.edside{display:none}}

/* ===== 65-edmock.css ===== */
/* ── the site inside the editor ───────────────────────────────────────
   This has to pass as a real website, not read as a wireframe. So: a
   real wordmark, a photographic hero with copy over it, a menu with
   prices, and TWO things visibly under edit - the headline and the
   picture - because "click it and change it" is the whole pitch. */
.edpage{background:#fff !important;--m:#C4562B}
.ednav{background:#fff;border-bottom:1px solid #EEEAE2;height:38px;padding:0 14px}
.edmark{width:24px;height:24px}
.edmark svg{width:24px;height:24px}
.edwm{font-size:12px;font-weight:800;letter-spacing:-.03em;color:#161410}
.edwm i{font-size:8px;font-weight:600;color:#9A9284;letter-spacing:.08em;text-transform:uppercase}
.edlinks i{color:#4A443A;font-size:9px;font-weight:600}
.edcta2{background:#C4562B;color:#fff;font-size:9px;font-weight:800;border-radius:99px;padding:6px 12px}

/* the photographic hero of the mock site */
.edshot{position:relative;height:196px;overflow:hidden;
  background:#2A1D16 url(/assets/mock-cafe.webp) center 58%/cover no-repeat}
.edshot:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,12,8,.82) 0%,rgba(20,12,8,.58) 44%,rgba(20,12,8,.1) 78%)}
.edshot .in{position:absolute;left:0;bottom:0;padding:16px 18px 17px;z-index:2;color:#fff}
.edshot .kk{display:block;font-size:7.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#F6C89A;margin-bottom:7px}
.edshot h5{font-size:25px;font-weight:700;letter-spacing:-.035em;line-height:1.03;color:#fff;
  margin:0;max-width:13ch}
.edshot .bts{display:flex;gap:7px;margin-top:13px}
.edshot .bts i{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;border-radius:99px;padding:7px 13px}
.edshot .bts .b1{background:#C4562B;color:#fff}
.edshot .bts .b2{border:1px solid rgba(255,255,255,.5);color:#fff}
/* the picture is a slot too, and it says so */
.edimgsel{position:absolute;right:9px;top:9px;bottom:9px;width:38%;border-radius:6px;
  border:2px solid #12D39B;box-shadow:0 0 0 3px rgba(18,211,155,.2);z-index:3;
  animation:edimg 10s linear infinite}
.edimgtag{position:absolute;right:9px;top:-9px;background:#12D39B;color:#062A22;
  font:800 8px/1 var(--f);padding:5px 8px;border-radius:6px;white-space:nowrap;z-index:4}
@keyframes edimg{
  0%,40%{opacity:0} 44%,60%{opacity:1} 66%,100%{opacity:0} }

.edbody{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;padding:15px 18px 18px;background:#fff}
.edmenu h6,.edside h6{font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#9A9284;margin:0 0 9px}
.edmenu .mrow{display:flex;align-items:baseline;gap:8px;margin:8px 0}
.edmenu .mrow b{font-size:11px;font-weight:700;color:#161410;white-space:nowrap}
.edmenu .mrow s{flex:1;height:1px;background:#EEEAE2;text-decoration:none}
.edmenu .mrow em{font-style:normal;font-size:11px;font-weight:800;color:#C4562B}
.edmenu .msub{font-size:8.5px;color:#9A9284;display:block;margin-top:2px;font-weight:500}
.edside .box{background:#FBF8F4;border:1px solid #F0ECE4;border-radius:9px;padding:12px 13px;
  margin-bottom:9px}
.edside .hr{display:flex;justify-content:space-between;font-size:9.5px;margin:5px 0;color:#4A443A;
  font-weight:600}
.edside .hr b{font-weight:800;color:#161410}
.edside .addr{font-size:9.5px;line-height:1.6;color:#4A443A;font-weight:500}
.edstars{color:#C4562B;font-size:10px;letter-spacing:2px}
@media(max-width:820px){.edbody{grid-template-columns:1fr}.edside{display:none}}

/* ===== 70-footer.css ===== */
/* ── the footer ───────────────────────────────────────────────────────
   It was five columns of links and a sentence. A footer is the last
   thing anyone reads, so it gets one more go at the offer first, then
   the index underneath, grouped by what a person is after rather than
   by how we happen to be organised. */
.foot{background:var(--ink);color:rgba(255,255,255,.6);padding:8px 0 30px;font-size:15px}
.foot-say{max-width:1240px;margin:0 auto;padding:64px 28px 58px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-say h3{font-size:38px;font-weight:600;color:#fff;letter-spacing:-.035em;max-width:17ch;
  line-height:1.12}
.foot-cta{display:flex;gap:12px;flex-wrap:wrap}
.foot-g{max-width:1240px;margin:0 auto;padding:52px 28px 0;display:grid;
  grid-template-columns:repeat(6,1fr);gap:30px}
.foot h6{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin:0 0 15px}
.foot-g>div>a{display:block;padding:6px 0;color:rgba(255,255,255,.7);font-size:14.5px;font-weight:500}
.foot-g>div>a:hover{color:#fff}
.foot-b{max-width:1240px;margin:44px auto 0;padding:22px 28px 0;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-size:13.5px;color:rgba(255,255,255,.45);flex-wrap:wrap}
.fb-tools{display:inline-flex;align-items:center;gap:8px}
/* Several of these marks are solid black artwork, so a dark chip showed
   nothing at all. Light chips, so every one of them reads. */
.fb-tools i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.35)}
.fb-tools i img,.fb-tools i svg{width:14px;height:14px}
@media(max-width:1080px){.foot-g{grid-template-columns:repeat(3,1fr);gap:26px}}
@media(max-width:640px){.foot-g{grid-template-columns:1fr 1fr}.foot-say h3{font-size:27px}
  .foot-say{padding:44px 22px 40px}}

/* The fine print beside the hero buttons was ink-3 sitting straight on
   a photograph, which is unreadable the moment the picture is busy. */
.hcta .fine{font-size:13.5px;color:var(--ink-2);font-weight:600;
  background:rgba(255,255,255,.82);border:1px solid rgba(22,20,16,.06);
  border-radius:999px;padding:10px 18px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ── the footer, second go ────────────────────────────────────────────
   Six columns of links told a visitor nothing they did not know. The
   four prices people came to find now sit across the top of it, and the
   first column says who we are and how to reach a person, which is the
   thing a small business actually looks for down here. */
.foot-px{max-width:1240px;margin:0 auto;padding:52px 28px 8px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.foot-px a{display:block;padding:20px 22px;border-radius:16px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);transition:.15s}
.foot-px a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
  transform:translateY(-1px)}
.foot-px b{display:block;font-size:29px;font-weight:700;letter-spacing:-.04em;color:#fff;
  line-height:1}
.foot-px b i{font-style:normal;font-size:14px;font-weight:600;color:rgba(255,255,255,.5);
  letter-spacing:-.01em;margin-left:3px}
.foot-px span{display:block;font-size:13.5px;color:rgba(255,255,255,.6);margin-top:9px;
  font-weight:500;line-height:1.45}
.foot-g{grid-template-columns:1.6fr repeat(5,1fr)}
/* The wordmark is one dark colour, and the white PNG of it carries a white
   card behind it. Knock the SVG through to white instead. */
.foot-brand img{height:26px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1);
  opacity:.92}
.foot-brand p{font-size:14px;color:rgba(255,255,255,.6);font-weight:500;line-height:1.55;
  max-width:34ch;margin-bottom:14px}
.foot-brand .fc{display:block;padding:3px 0;font-size:15px;font-weight:600;color:#fff}
.foot-brand .fc:hover{color:var(--g-br)}
.foot-brand .fh{display:block;font-size:13px;color:rgba(255,255,255,.42);margin-top:10px;
  font-weight:500}
@media(max-width:1080px){.foot-px{grid-template-columns:1fr 1fr}
  .foot-g{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1/-1}}
@media(max-width:640px){.foot-px{grid-template-columns:1fr;padding:32px 22px 4px}
  .foot-px b{font-size:25px}}