/* ─────────────────────────────────────────────────────────────────────────
   noti.com.au · the coming-soon page
   Its own stylesheet, on purpose. This page is the product's front door, so
   it wears the app.noti.au design system (warm cream, orange, pastel tinted
   blocks, chunky radii, big display type) rather than the consultancy site's
   theme in noti.css. Nothing here is shared with the rest of the site.
   Composition follows the launch card: one centred column, the pastel
   blocks floating loose around it, the handwriting bottom-right.
   Tokens copied from ~/noti-app/styles/noti.css. If they change there,
   change them here.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --cream:#FAF7F2; --white:#fff;
  --ink:#141210; --mid:#5C534B; --grey:#857A70; --faint:#A99E93;
  --orange:#F0611C; --orange-d:#D14E10;
  --mint:#D6EEDD;  --mint-d:#1F7A4C;
  --lav:#E3DEF8;   --lav-d:#4B3CA8;
  --butter:#FBEBC0;--butter-d:#8A6410;
  --sky:#D8E8F7;   --sky-d:#1E5A99;
  --peach:#FBDDD0; --peach-d:#B03E14;
  --sand:#E6D9C6;
  /* Hairlines. Used by .status, .door and the hero stream, and never defined
     until 26 Sep, so every one of those borders silently did not draw. */
  --line:#EFE7DB;
  --f:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Caveat',ui-rounded,cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The UA gives every button `2px outset ButtonBorder`, which survived setting a
   background and a radius and drew a black ring around the orange pill. */
button{font-family:inherit;border:0;background:none;color:inherit}
input{font-family:inherit}

/* overflow-x only: the floating blocks hang past the edges, but a tall page
   must still be able to scroll. `safe center` keeps the top reachable when the
   content is taller than the window. */
body{overflow-x:clip}
.soon{position:relative;min-height:100vh;min-height:100svh;display:flex;justify-content:center;
  align-items:center;align-items:safe center;padding:34px 20px 78px}
.stage{position:relative;width:100%;max-width:1040px;text-align:center;
  padding:clamp(14px,4vh,40px) clamp(0px,9vw,110px)}

/* ══ the floating blocks ══════════════════════════════════════════════════
   Decorative. They carry the four things Noti does without spelling them
   out, and they are what stops the page being a sad holding notice. */
.stage>.fl{position:absolute;z-index:1;pointer-events:none}
.fl .blk{width:clamp(52px,6.4vw,88px);aspect-ratio:1;border-radius:26%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 30px -20px rgba(20,18,16,.45)}
.fl .blk svg{width:44%;height:44%;stroke-width:2.1}
.fl .spark{position:absolute;width:clamp(30px,3.8vw,50px);height:auto;color:var(--sand);
  stroke-width:2.4}
.blk--lav{background:var(--lav);color:var(--lav-d)}
.blk--mint{background:var(--mint);color:var(--mint-d)}
.blk--butter{background:var(--butter);color:var(--butter-d)}
.blk--sky{background:var(--sky);color:var(--sky-d)}
/* The same tints on the explainer cards below. */
.ic--lav{background:var(--lav);color:var(--lav-d)}
.ic--mint{background:var(--mint);color:var(--mint-d)}
.ic--butter{background:var(--butter);color:var(--butter-d)}
.ic--sky{background:var(--sky);color:var(--sky-d)}
.ic--peach{background:var(--peach);color:var(--peach-d)}

.fl--a{left:1%;top:4%}            .fl--a .blk{transform:rotate(-9deg)}
.fl--a .spark{left:-70%;top:-40%;transform:rotate(-10deg)}
.fl--b{right:2%;top:7%}           .fl--b .blk{transform:rotate(9deg)}
.fl--b .spark{right:-68%;top:-38%;transform:scaleX(-1) rotate(-10deg)}
.fl--c{right:-2%;top:47%}         .fl--c .blk{transform:rotate(11deg)}
.fl--d{left:-1%;top:64%}          .fl--d .blk{transform:rotate(-11deg)}
.fl--d .spark{left:-66%;top:-30%;transform:rotate(-6deg)}

/* ══ the column ═══════════════════════════════════════════════════════════ */
.stage>*{position:relative;z-index:2}
.mark{display:inline-flex;align-items:flex-end;gap:5px;text-decoration:none;color:var(--ink)}
.mark b{font-size:clamp(30px,3.4vw,42px);font-weight:800;letter-spacing:-.05em;line-height:1}
.dot{background:var(--orange);border-radius:50%;display:block;flex:none}
.mark .dot{width:.235em;height:.235em;font-size:inherit;margin-bottom:.085em}

/* Was two words on a holding card. It is a positioning line now, so it needs a
   measure and a smaller top end or it eats the fold. */
h1{font-size:clamp(40px,6.4vw,82px);font-weight:800;letter-spacing:-.045em;line-height:.94;
  margin-top:clamp(22px,4.2vh,48px);max-width:15ch;margin-left:auto;margin-right:auto}
h1 b{font-weight:800}
h1 .dot{width:.158em;height:.158em;display:inline-block;vertical-align:baseline;margin-left:.02em}
.sub{font-size:clamp(20px,2.5vw,31px);font-weight:800;letter-spacing:-.03em;
  margin-top:clamp(20px,3.4vh,34px)}
.sub2{font-size:clamp(15px,1.65vw,19.5px);color:var(--grey);font-weight:500;margin-top:11px}
/* Said before the headline, not after it. A visitor who reads the rest of this
   page and only then learns it is not open has been misled for a full screen. */
.status{display:flex;width:fit-content;margin:18px auto 4px;align-items:center;gap:8px;padding:7px 15px 7px 12px;
  border-radius:999px;background:var(--white);border:1.5px solid var(--line);
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--grey)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;
  box-shadow:0 0 0 3px rgba(234,88,12,.16)}
.status b{color:var(--ink);font-weight:800}

/* ══ waitlist ═════════════════════════════════════════════════════════════ */
/* 530 held an email and a button. With the business question between them
   it holds three, and at 530 the email was crushed to about twenty pixels —
   "yo" and an ellipsis. Wider on a desktop only; stacked on a phone it is
   the viewport that decides. */
.wl{margin:clamp(26px,4.4vh,42px) auto 0;max-width:530px}
@media (min-width:761px){ .wl{max-width:726px} }
.wl-form{display:flex;gap:8px;background:var(--white);border:2px solid var(--white);
  border-radius:99px;padding:7px 7px 7px 10px;transition:border-color .15s;
  box-shadow:0 18px 40px -24px rgba(20,18,16,.5)}
.wl-form:focus-within{border-color:var(--orange)}
.wl-form input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;
  font-weight:500;color:var(--ink);padding:0 12px;text-align:left}
.wl-form input::placeholder{color:var(--faint);font-weight:500}
.wl-form button{display:flex;align-items:center;gap:10px;flex:none;border:0;background:var(--orange);
  color:#fff;border-radius:99px;padding:16px 26px;font-size:12.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:transform .14s,background .14s}
.wl-form button:hover{background:var(--orange-d);transform:translateY(-1px)}
.wl-form button:active{transform:translateY(0)}
.wl-form button:disabled{opacity:.6;cursor:default;transform:none}
.wl-form button svg{width:19px;height:19px;flex:none}
/* The optional question, inside the pill between the email and the button.
   Quieter than both: no border of its own, just a hairline separating it
   from the field, and the grey of a thing you may leave alone. */
.wl-type{flex:none;width:214px;border:0;outline:0;background:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;font-family:var(--f);font-size:12.5px;
  font-weight:600;color:var(--grey);padding:0 26px 0 14px;margin:6px 0;
  border-left:1.5px solid var(--sand);
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A99E93' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:13px}
.wl-type:focus{color:var(--ink)}
.wl-type:hover{color:var(--mid)}

/* Spam trap. Off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* The honeypot is display:none, not merely off-screen. An off-screen input named
   "company" is still a real field to iOS autofill and to password managers, and
   a filled honeypot threw the whole signup away. .hp stays off-screen because it
   also hides the real label, which a screen reader still has to find. */
.trap{display:none}
.wl-note{font-size:13.5px;color:var(--grey);font-weight:500;margin-top:15px}
/* The three facts a stranger wants before handing over an address: does it fit
   what I already run, what will it cost me per head, and who am I dealing with.
   Directly under the form, because that is the moment the question gets asked. */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 18px;margin:14px 0 0;
  padding:0;list-style:none}
.trust li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:var(--grey);letter-spacing:-.01em}
.trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
.wl-msg{font-size:14px;font-weight:700;margin-top:13px;color:var(--orange-d)}
/* The second door. Secondary to the orange pill, but it has to be findable at a
   glance: Custom is the only side that can take money until Platform opens. */
.door{display:flex;align-items:center;gap:14px;text-align:left;text-decoration:none;
  margin-top:26px;padding:15px 18px;background:var(--white);border:1.5px solid var(--line);
  border-radius:22px;transition:border-color .15s,transform .15s,box-shadow .15s}
.door:hover{border-color:var(--orange);transform:translateY(-1px);
  box-shadow:0 16px 34px -24px rgba(20,18,16,.5)}
.door i{width:40px;height:40px;border-radius:14px;background:var(--lav);color:var(--lav-d);
  display:flex;align-items:center;justify-content:center;flex:none}
.door i svg{width:20px;height:20px;stroke-width:2}
.door b{display:block;font-size:15px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.door span{display:block;font-size:13.5px;color:var(--grey);font-weight:500;margin-top:2px;
  line-height:1.4}
.door em{font-style:normal;margin-left:auto;font-size:20px;color:var(--orange);flex:none;
  font-weight:700}
.is-done .door{margin-top:20px}
.wl-done{display:none;flex-direction:column;gap:16px;text-align:left;background:var(--white);
  border-radius:30px;padding:20px 26px;box-shadow:0 18px 40px -24px rgba(20,18,16,.5)}
.wl-head{display:flex;align-items:center;gap:15px}
.wl-done .tk{width:46px;height:46px;border-radius:16px;background:var(--mint);color:var(--mint-d);
  display:flex;align-items:center;justify-content:center;flex:none}
.wl-done .tk svg{width:23px;height:23px;stroke-width:2.6}
.wl-done b{display:block;font-size:17.5px;font-weight:800;letter-spacing:-.025em}
.wl-done span{display:block;font-size:14.5px;color:var(--grey);font-weight:500;margin-top:2px;
  line-height:1.45}
.is-done .wl-form,.is-done .wl-note,.is-done .wl-msg,.is-done .trust{display:none}
/* The optional second step, inside the done card. Quieter than step one: a
   hairline under the thank-you, sand pills, and the orange kept for Send. */
.wl-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:16px;
  border-top:1.5px solid var(--line)}
.wl-more[hidden]{display:none}
.wl-ask{flex-basis:100%;font-size:14px;font-weight:600;color:var(--mid);margin:0 0 4px}
.wl-more .wl-type,.wl-name{flex:1 1 180px;min-width:0;width:auto;margin:0;height:48px;
  border:1.5px solid var(--sand);border-radius:99px;font-family:var(--f);font-size:16px;
  font-weight:600;color:var(--ink);padding:0 18px;background-color:var(--white);outline:0}
.wl-more .wl-type{padding-right:34px;color:var(--mid);background-position:right 14px center}
.wl-name::placeholder{color:var(--faint);font-weight:500}
.wl-more .wl-type:focus,.wl-name:focus{border-color:var(--orange)}
.wl-more button[type=submit]{flex:none;height:48px;border:0;background:var(--orange);color:#fff;
  border-radius:99px;padding:0 24px;font-size:12.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;cursor:pointer}
.wl-more button[type=submit]:disabled{opacity:.6}
.wl-skip{flex-basis:100%;border:0;background:none;font-family:var(--f);font-size:13.5px;
  font-weight:600;color:var(--grey);text-decoration:underline;cursor:pointer;padding:10px 0 0;
  min-height:44px}
.is-done .wl-done{display:flex}

/* ══ handwriting and the address ══════════════════════════════════════════ */
.hand{position:absolute;z-index:2;right:clamp(-46px,-2vw,0px);bottom:-6px;width:210px;
  font-family:var(--hand);font-size:clamp(22px,2.4vw,29px);line-height:1.08;color:var(--faint);
  text-align:left;transform:rotate(-4deg)}
.hand u{text-decoration:none;display:block}
.hand svg{display:block;width:140px;height:10px;color:var(--sand);stroke-width:3;
  margin:2px 0 0 20px}
.doodle{position:absolute;z-index:1;right:clamp(30px,7vw,104px);bottom:86px;
  width:clamp(72px,8vw,112px);color:#DCD2C4;stroke-width:2}
.addr{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-top:clamp(30px,5vh,52px)}

/* ══ short laptops ════════════════════════════════════════════════════════
   A 13in screen is about 800 CSS px tall. With the custom-side card in it the
   hero no longer fits at that height, so the spacing tightens and the address
   line goes: the domain is in the address bar and in the footer already. */
@media (max-height:900px) and (min-width:761px){
  .stage{padding-top:0;padding-bottom:0}
  h1{margin-top:clamp(16px,2.6vh,32px)}
  .sub{margin-top:clamp(13px,2.2vh,24px)}
  .wl{margin-top:clamp(18px,2.8vh,30px)}
  .door{margin-top:18px}
  .addr{display:none}
  .hand{bottom:-2px}
}

/* ══ phone ════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* The bottom padding is the room reserved for the cue. The trust strip under
     the form wraps to two lines on a phone, so it has to clear both. */
  .soon{padding:30px 18px 104px}
  /* The text runs full width here, so the blocks go to the four corners: the
     only places on a phone that are reliably empty. */
  .stage{padding:8px 0 0}
  .fl .blk{width:46px;border-radius:15px}
  .fl .spark{width:22px}
  .fl--a{left:-2px;top:-4px}   .fl--b{right:-2px;top:-10px}
  .fl--c{right:-2px;top:auto;bottom:0}
  .fl--d{left:-2px;top:auto;bottom:12px}
  .fl--a .spark,.fl--b .spark,.fl--d .spark{display:none}
  h1{font-size:clamp(46px,13.4vw,66px);margin-top:30px}
  /* 25ch, not 20: the line is a list now, and at 20 it ran five heavy lines
     and pushed the button toward the fold inside Instagram's browser. */
  .sub{font-size:19px;margin-top:18px;max-width:25ch;margin-left:auto;margin-right:auto}
  .sub2{font-size:15.5px;max-width:30ch;margin-left:auto;margin-right:auto}
  .wl{margin-top:28px}
  /* ── the three stack, so they have to match ──────────────────────────
     Stacked, the pill stopped being a pill: a white card with a ghost line
     of text on top of a big orange button, which reads as a caption above
     a button rather than as a field you type in. And it sat under a
     hairline select pill of a different shape again — three elements, three
     treatments.
     So on a phone the wrapper stops being anything at all, and each of the
     three is the same pill: same width, same radius, same height. Only one
     of them is orange, which is the one to press. */
  .wl-form{flex-direction:column;background:none;border:0;padding:0;gap:10px;
    box-shadow:none}
  .wl-form input{background:var(--white);border:1.5px solid var(--sand);
    border-radius:99px;padding:15px 20px;text-align:center;
    box-shadow:0 10px 26px -20px rgba(20,18,16,.55)}
  .wl-form input:focus{border-color:var(--orange)}
  .wl-form button{justify-content:center;padding:17px 24px}
  /* Stacked, it is a pill like the other two rather than a segment of one:
     its own border back, full width, no divider to sit against. */
  .wl-type{max-width:none;width:100%;margin:0;padding:15px 20px;text-align:center;
    text-align-last:center;font-size:14.5px;color:var(--mid);
    background-color:rgba(255,255,255,.62);border:1.5px solid var(--sand);
    border-radius:99px;background-position:right 18px center;background-size:15px}
  .door{margin-top:22px;padding:14px 16px;gap:12px}
  .door i{width:36px;height:36px;border-radius:12px}
  .door b{font-size:14.5px}
  .door span{font-size:13px}
  .wl-done{text-align:center;gap:12px;border-radius:26px;padding:20px 18px}
  .wl-head{flex-direction:column;gap:12px}
  .wl-more{flex-direction:column;align-items:stretch;gap:10px}
  .wl-more .wl-type,.wl-name{flex:none;width:100%;text-align:center;text-align-last:center;
    height:52px}
  .wl-more button[type=submit]{height:54px}
  .doodle{display:none}
  .hand{position:static;width:auto;margin:34px auto 0;text-align:center;transform:rotate(-2deg)}
  .hand svg{margin:2px auto 0;width:128px}
  .addr{margin-top:26px}
}

/* ══ motion ═══════════════════════════════════════════════════════════════
   The blocks drift. Slowly, and never the same two together, so it reads as
   floating rather than as an animation playing. */
@media (prefers-reduced-motion:no-preference){
  .fl{animation:drift 7s ease-in-out infinite}
  .fl--b{animation-duration:8.4s;animation-delay:-2.2s}
  .fl--c{animation-duration:6.4s;animation-delay:-4.1s}
  .fl--d{animation-duration:9.1s;animation-delay:-1.3s}
  @keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  .stage>*{animation:rise .62s cubic-bezier(.2,.72,.3,1) both}
  .stage>.mark{animation-delay:.02s}
  .stage>h1{animation-delay:.09s}
  .stage>.sub{animation-delay:.15s}
  .stage>.sub2{animation-delay:.2s}
  .stage>.wl{animation-delay:.26s}
  .stage>.hand,.stage>.addr{animation-delay:.34s}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .stage>.hand{animation-name:rise-hand}
  @keyframes rise-hand{from{opacity:0;transform:translateY(16px) rotate(-4deg)}
                       to{opacity:1;transform:rotate(-4deg)}}
}

/* ══════════════════════════════════════════════════════════════════════════
   WHAT IT DOES
   Below the fold. Structure from Noti-Website-Deep-Dive (14 Sep 2026): lead
   behavioural, show the connected chain before the breadth, group capability
   by the job it does and never as a checklist, payments as a first-class
   story, and the trust rules from the competitor complaint deep dive. No
   links out of this page, so the closing call scrolls back to the one form.
   ══════════════════════════════════════════════════════════════════════════ */
.cue{position:absolute;left:50%;bottom:clamp(10px,3vh,30px);transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.cue:hover{color:var(--orange)}
.cue svg{width:17px;height:17px;stroke-width:2.4;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.cue svg{animation:none}}
/* Kept on every size. On a phone it is the only sign there is anything below
   the fold, so the hero reserves room for it rather than dropping it. */
@media (max-width:760px){
  .cue{font-size:10px;letter-spacing:.18em;bottom:14px}
  .cue svg{width:16px}
}
@media (max-height:620px) and (min-width:761px){.cue{display:none}}

.band{padding:clamp(58px,9vh,104px) 20px}
.band--top{padding-top:clamp(70px,11vh,128px)}
.band--ink{background:var(--ink);color:#fff}
.wrap{max-width:940px;margin:0 auto}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange)}
.band--ink .eyebrow{color:#F0876C}
h2{font-size:clamp(29px,4.3vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1.03;
  margin-top:16px;max-width:20ch;color:var(--faint)}
h2 b{color:var(--ink);font-weight:800}
.band--ink h2{color:#6B615A}.band--ink h2 b{color:#fff}
.say{font-size:clamp(16px,1.75vw,19.5px);color:var(--mid);font-weight:500;line-height:1.55;
  margin-top:20px;max-width:62ch}
.band--ink .say{color:#A69C92}
.say strong{color:var(--ink);font-weight:700}
.band--ink .say strong{color:#fff}

/* ── the morning readout ─────────────────────────────────────────────────── */
.morning{background:var(--white);border-radius:30px;padding:clamp(24px,3.4vw,38px);
  margin-top:clamp(32px,5vh,50px);box-shadow:0 26px 56px -34px rgba(20,18,16,.5)}
.morning .lb{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 34px;margin-top:16px}
.mrow{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid #F2ECE3}
.mrow:nth-last-child(-n+2){border-bottom:0}
.mrow b{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  flex:none;min-width:64px}
.mrow span{font-size:14.5px;color:var(--grey);font-weight:600}
.mrow.warn b{color:var(--orange)}
.mdone{display:flex;align-items:center;gap:11px;margin-top:18px;font-size:15px;font-weight:700;
  color:var(--mint-d)}
.mdone i{width:26px;height:26px;border-radius:9px;background:var(--mint);display:flex;
  align-items:center;justify-content:center;flex:none}
.mdone i svg{width:15px;height:15px;stroke-width:2.6;color:var(--mint-d)}
.cap{font-size:13px;color:var(--faint);font-weight:500;margin-top:15px;text-align:center}

/* ── the chain, run twice side by side ───────────────────────────────────── */
.wrap--wide{max-width:1120px}
/* Stretch, not start: one column has a row that wraps, and two cards of
   different heights read as a mistake rather than as two businesses. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(30px,4.6vh,48px);
  align-items:stretch}
/* Three chains, because two of them read as "this is for those two trades" and
   the third is what makes the point that the system underneath is the same one. */
.two--3{grid-template-columns:repeat(3,1fr)}

/* ── The work, start to finish ──────────────────────────────────────────────
   A plain sequence with arrows, not a cast list of who did what. The previous
   version labelled every step Them/You/Noti, which made the software the main
   character in a story about somebody's Tuesday. */
.flow{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:7px 9px}
.flow li{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  display:flex;align-items:center;gap:9px}
.flow li:not(:last-child)::after{content:"\2192";color:var(--orange);font-weight:800;font-size:15px}
.flow li:first-child{color:var(--orange-d,#C2410C)}
.chain-note{margin-top:auto;padding-top:14px;border-top:1px solid #F5F0E8;
  font-size:14px;color:var(--grey);font-weight:500;line-height:1.55}

/* The core list: the things almost every business needs. */
.core{list-style:none;margin:18px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px}
.core li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:600;
  letter-spacing:-.01em;line-height:1.45}
.core li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;
  background:var(--orange)}

/* Two ways to work with Noti, side by side, each with its own action. */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4.4vh,44px);
  align-items:stretch}
.way{background:var(--white);border-radius:28px;padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column}
.way h3{font-size:21px;font-weight:800;letter-spacing:-.035em;margin:0 0 4px}
.way .tag{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:13px;display:block}
.way p{font-size:15px;color:var(--grey);font-weight:500;line-height:1.62;margin:0 0 12px}
/* .jump carries its own top margin for the closing call, which is too much
   inside a card that has already pushed the action to the bottom. */
.way .act{margin-top:auto;padding-top:8px}
.way .act .jump{margin-top:4px}
@media (max-width:760px){
  .ways{grid-template-columns:1fr;gap:14px}
  .core{grid-template-columns:1fr}
}
.chain{background:var(--white);border-radius:28px;padding:clamp(20px,2.4vw,28px);
  box-shadow:0 26px 56px -34px rgba(20,18,16,.5);display:flex;flex-direction:column}
.chain-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;
  border-bottom:1px solid #F0EAE0;margin-bottom:4px}
.chain-head i{width:40px;height:40px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;flex:none}
.chain-head i svg{width:20px;height:20px;stroke-width:2}
.chain-head b{font-size:17px;font-weight:800;letter-spacing:-.03em}
.chain-head span{font-size:13px;color:var(--faint);font-weight:600;margin-left:auto;
  text-align:right}
.step{display:grid;grid-template-columns:62px 1fr;gap:13px;align-items:baseline;
  padding:10px 0;position:relative}
.step+.step{border-top:1px solid #F5F0E8}
.who{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 0;border-radius:99px;text-align:center;background:#F4EFE7;color:var(--grey)}
.step.is-noti .who{background:var(--orange);color:#fff}
.step.is-them .who{background:var(--sky);color:var(--sky-d)}
.step p{font-size:14.5px;font-weight:600;line-height:1.42}
.step.is-noti p{font-weight:700}
.step.is-wait p{color:var(--faint);font-weight:600}
.chain-foot{margin-top:auto;padding-top:14px;border-top:1px solid #F5F0E8;font-size:14.5px;
  font-weight:700;line-height:1.45}
.chain-foot em{font-style:normal;color:var(--orange)}
/* Both chains, one conclusion. */
.same{margin-top:clamp(24px,3.4vh,36px);text-align:center;font-size:clamp(17px,1.9vw,21px);
  font-weight:500;color:var(--grey);line-height:1.45;max-width:56ch;margin-left:auto;
  margin-right:auto}
.same b{color:var(--ink);font-weight:800;letter-spacing:-.02em}

/* Said right here, because this is the moment a reader decides whether it is
   another AI-does-your-admin product. */
.notai{margin-top:clamp(24px,3.4vh,36px);padding:22px 26px;background:var(--white);
  border-radius:22px;box-shadow:0 20px 46px -32px rgba(20,18,16,.45);
  font-size:14.5px;color:var(--grey);font-weight:500;line-height:1.6}
.notai b{display:block;font-size:18px;color:var(--ink);font-weight:800;letter-spacing:-.03em;
  margin-bottom:7px}
.notai strong{color:var(--ink);font-weight:700}

.oneline{margin-top:clamp(28px,4vh,42px);text-align:center;font-size:clamp(20px,2.6vw,30px);
  font-weight:800;letter-spacing:-.03em}
.oneline em{font-style:normal;color:var(--orange)}

/* ── the four groups ─────────────────────────────────────────────────────── */
.groups{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(32px,5vh,50px)}
.grp{background:var(--white);border-radius:26px;padding:26px 24px 28px}
.grp .ic{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;
  justify-content:center;margin-bottom:15px}
.grp .ic svg{width:22px;height:22px;stroke-width:2}
.grp b{display:block;font-size:18px;font-weight:800;letter-spacing:-.03em}
.grp p{font-size:14.5px;color:var(--grey);font-weight:500;line-height:1.6;margin-top:9px}
.ic--lav{background:var(--lav);color:var(--lav-d)}
.ic--mint{background:var(--mint);color:var(--mint-d)}
.ic--butter{background:var(--butter);color:var(--butter-d)}
.ic--sky{background:var(--sky);color:var(--sky-d)}
.ic--peach{background:var(--peach);color:var(--peach-d)}

/* ── payments ────────────────────────────────────────────────────────────── */
.pays{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:clamp(28px,4vh,42px)}
.pay{background:var(--white);border-radius:20px;padding:18px 20px;font-size:15px;font-weight:700}
.pay span{display:block;font-size:13.5px;color:var(--grey);font-weight:500;margin-top:3px;
  line-height:1.45}
.fine{font-size:13.5px;color:var(--faint);font-weight:500;margin-top:20px;line-height:1.55;
  max-width:62ch}

/* ── how it behaves ──────────────────────────────────────────────────────── */
.verbs{margin-top:clamp(30px,4.4vh,46px);display:grid;gap:2px}
.verb{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.verb:last-child{border-bottom:0}
.verb b{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.verb span{font-size:15.5px;color:#A69C92;font-weight:500;line-height:1.5}
.verb--ask b{color:var(--orange)}
.verb--ask span{color:#fff;font-weight:600}

/* ── the rules ───────────────────────────────────────────────────────────── */
.rules{margin-top:clamp(30px,4.4vh,46px);display:grid;gap:10px}
.rule{display:flex;gap:15px;align-items:flex-start;background:var(--white);border-radius:20px;
  padding:19px 22px}
.rule i{width:28px;height:28px;border-radius:10px;background:var(--mint);color:var(--mint-d);
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.rule i svg{width:16px;height:16px;stroke-width:2.6}
.rule b{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.rule span{display:block;font-size:14.5px;color:var(--grey);font-weight:500;margin-top:3px;
  line-height:1.5}

/* ── who is building it ──────────────────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(28px,4vh,42px)}
.fig{background:var(--white);border-radius:22px;padding:22px 20px 24px}
.fig b{display:block;font-size:clamp(23px,2.9vw,32px);font-weight:800;letter-spacing:-.04em;
  line-height:1}
.fig span{display:block;font-size:13.5px;color:var(--grey);font-weight:500;margin-top:9px;
  line-height:1.45}

/* ── close ───────────────────────────────────────────────────────────────── */
.end{text-align:center}
.end h2{margin:0 auto;max-width:16ch;text-align:center;color:var(--ink)}
.end .say{margin:20px auto 0;text-align:center}
.jump{display:inline-flex;align-items:center;gap:10px;margin-top:28px;border:0;background:var(--orange);
  text-decoration:none;
  color:#fff;border-radius:99px;padding:17px 30px;font-size:12.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:transform .14s,background .14s}
.jump:hover{background:var(--orange-d);transform:translateY(-1px)}
.jump svg{width:18px;height:18px}
.acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(26px,4vh,38px)}
.acts--mid{justify-content:center}
.acts .jump{margin-top:0;text-decoration:none}
.tlink{font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--sand);padding-bottom:2px;transition:.15s}
.tlink em{font-style:normal;color:var(--orange);margin-left:3px}
.tlink:hover{border-bottom-color:var(--orange)}

.figs--3{grid-template-columns:repeat(3,1fr)}
.figs:has(.fig:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}

.legal{text-align:center;margin-top:clamp(40px,6vh,64px);font-size:12px;color:#C2B8AC;
  font-weight:500;line-height:1.75;letter-spacing:.01em}

@media (max-width:760px){
  .band{padding:52px 18px}
  h2{font-size:28px;max-width:none}
  .mgrid{grid-template-columns:1fr;gap:0}
  .groups{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr 1fr}
  .figs--3{grid-template-columns:1fr}
  .acts{gap:16px}
  .acts--mid{flex-direction:column}
  .pays{grid-template-columns:1fr}
  .two{grid-template-columns:1fr;gap:14px}
  .step{grid-template-columns:58px 1fr;gap:12px}
  .step p{font-size:14.5px}
  .chain-head span{display:none}
  .same{font-size:17px}
  .verb{grid-template-columns:1fr;gap:5px;padding:13px 0}
  .oneline{font-size:21px}
}

/* ══════════════════════════════════════════════════════════════════════════
   PLATFORM PAGES
   Pages on the platform side that are not the launch card: a light bar and a
   light footer rather than the Custom nav, because there is nothing else to
   navigate to yet and the only action is the waitlist.
   ══════════════════════════════════════════════════════════════════════════ */
.pbar{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.85);backdrop-filter:blur(14px)}
.pbar-in{max-width:1120px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.mark--sm b{font-size:23px}
.mark--sm .dot{width:5.5px;height:5.5px;margin-bottom:4px}
.pbar-cta{flex:none;background:var(--orange);color:#fff;border-radius:99px;padding:12px 22px;
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;transition:background .15s}
.pbar-cta:hover{background:var(--orange-d)}

/* The hero line on a platform page sits between the launch card's h1 and a
   section h2, so it gets its own step rather than reusing either. */
.ph1{font-size:clamp(33px,5vw,58px)!important;max-width:17ch}
.ph2{max-width:21ch}

.pfoot{padding:clamp(40px,6vh,60px) 20px clamp(34px,5vh,48px);border-top:1px solid var(--line)}
.pfoot-links{text-align:center;font-size:14px;font-weight:700;margin-bottom:6px}
.pfoot-links a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--sand);
  padding-bottom:2px}
.pfoot-links a:hover{border-bottom-color:var(--orange)}
.pfoot-links span{color:var(--faint);font-weight:500;margin:0 8px;border:0}
.pfoot .legal{margin-top:16px}
@media(max-width:760px){
  .pbar-in{padding:14px 18px}
  .pbar-cta{padding:11px 16px;font-size:10.5px}
  .ph1,.ph2{max-width:none}
}

/* ══ proof: Noti doing something (26 Sep) ═════════════════════════════════
   Real screens and real entries from the demo businesses. Every class is
   pf-: .step, .cap and .fine already mean something else in this file. */
.pf-lead{max-width:17ch}
.pf-grid{display:grid;gap:30px}
.pf-src{font-size:13.5px;color:var(--grey);font-weight:600;margin-top:14px}
.pf-steps{list-style:none;margin:0;padding:0;display:grid;gap:26px;max-width:460px}
.pf-step{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:start}
.pf-n{width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;
  font-size:13.5px;font-weight:800;display:grid;place-items:center}
.pf-cap{font-size:18px;font-weight:800;letter-spacing:-.025em;line-height:1.3;color:var(--ink);
  padding-top:3px}
.pf-shot,.pf-step>.pf-card{grid-column:2;margin:14px 0 0}
.pf-shot{border-radius:24px;overflow:hidden;background:#fff;
  box-shadow:0 22px 44px -30px rgba(20,18,16,.55)}
.pf-shot img{display:block;width:100%;height:auto}
.pf-small{font-size:13.5px;color:var(--grey);font-weight:500;line-height:1.55;max-width:460px}
.pf-card{background:#fff;border-radius:24px;padding:18px 20px 8px;
  box-shadow:0 22px 44px -30px rgba(20,18,16,.55)}
.pf-card-h{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin-bottom:6px}
.pf-row{position:relative;font-size:15px;font-weight:700;line-height:1.4;color:var(--ink);
  padding:10px 0 10px 17px;border-top:1px solid #F2ECE3}
.pf-card-h+.pf-row{border-top:0}
.pf-row::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;border-radius:50%;
  background:var(--mint-d,#2F7A57)}
.pf-held{color:var(--mid);font-weight:600}
.pf-held::before{background:var(--faint)}
.pf-held b{color:var(--ink)}
.pf-pair{display:grid;gap:16px;margin-top:28px}
.pf-card--you .pf-card-h{color:var(--orange-d)}
.pf-need{display:grid;gap:3px;padding:12px 0 14px;border-top:1px solid #F2ECE3}
.pf-card-h+.pf-need{border-top:0}
.pf-need b{font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pf-need span{font-size:14px;color:var(--mid);font-weight:500}
.pf-need em{font-style:normal;font-size:14px;font-weight:800;color:var(--orange-d);margin-top:4px}
.pf-origin{max-width:46ch}
@media (min-width:900px){
  .pf-grid{grid-template-columns:minmax(0,1fr) 460px;column-gap:56px;align-items:start}
  .pf-head{position:sticky;top:40px}
  .pf-small{grid-column:2}
  .pf-pair{grid-template-columns:1fr 1fr;gap:22px}
}

/* ══ the hero, 26 Sep: what Noti is, then a stream of it happening ═════════
   hx- and bz- prefixes throughout; the signup inside is the .wl block above,
   unchanged. The stream is a drawn marketing visual, not an app screen. */
.hx{align-items:flex-start;padding:28px 16px 44px;min-height:0}
.hx-in{width:100%;max-width:1120px;text-align:center}
.hx .status{margin-top:14px}
.hx-grid{display:grid;gap:30px;margin-top:22px}
.hx h1{font-size:clamp(42px,12.4vw,80px);max-width:14ch;margin-top:0}
.hx-core{margin:18px auto 0;max-width:32ch;font-size:clamp(16px,4.3vw,19px);line-height:1.5;
  color:var(--mid);font-weight:500}
.hx-core b{color:var(--ink);font-weight:700}
.hx .wl{margin-top:24px}
.hx-nw{white-space:nowrap}

.hx-stream{background:#fff;border-radius:28px;padding:18px 16px 8px;text-align:left;width:100%;
  max-width:460px;margin:0 auto;box-shadow:0 30px 60px -38px rgba(20,18,16,.6)}
.hx-head{display:flex;align-items:center;gap:9px;padding:0 4px 12px;border-bottom:1px solid var(--line)}
.hx-pulse{width:9px;height:9px;border-radius:50%;background:var(--orange);position:relative;flex:none}
.hx-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--orange);
  opacity:0;animation:hx-ring 3.6s ease-out infinite}
@keyframes hx-ring{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.hx-head b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.hx-where{margin-left:auto;font-size:12px;font-weight:600;color:var(--faint)}
.hx-rows{list-style:none;margin:0;padding:0}
.hx-row{padding:13px 4px;border-bottom:1px solid var(--line);display:grid;gap:7px;
  animation:hx-enter 1.1s cubic-bezier(.25,.8,.25,1)}
.hx-row:last-child{border-bottom:0}
@keyframes hx-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hx-rtop{display:flex;align-items:center;gap:8px;min-width:0}
.hx-biz{flex:none;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px}
.hx-trade{background:var(--sky);color:var(--sky-d)} .hx-salon{background:var(--lav);color:var(--lav-d)}
.hx-whole{background:var(--butter);color:var(--butter-d)}
.hx-what{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.hx-out{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--mid);padding-left:2px}
.hx-out::before{content:"\2192";color:var(--faint);font-weight:700}
.hx-tag{margin-left:auto;flex:none;font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:99px}
.hx-done{background:var(--mint);color:var(--mint-d)} .hx-you{background:var(--peach);color:var(--peach-d)}
.hx-held{background:#F1ECE4;color:var(--grey)}
.hx-foot{font-size:11.5px;color:var(--faint);font-weight:600;text-align:center;padding:10px 0 6px}

@media (min-width:960px){
  .hx{padding:34px 32px 70px}
  .hx-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;margin-top:44px}
  .hx-copy{text-align:left}
  .hx h1{margin-left:0}
  .hx-core{margin-left:0}
  .hx .wl{margin-left:0}
  .hx .trust{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .hx-row,.hx-pulse::after{animation:none}
}

/* three businesses, same idea */
.bz-three{display:grid;gap:16px;margin-top:30px}
.bz-card{background:#fff;border-radius:26px;padding:20px;box-shadow:0 22px 44px -32px rgba(20,18,16,.55)}
.bz-top{display:flex;align-items:center;gap:10px}
.bz-top b{font-size:17px;font-weight:800;letter-spacing:-.025em}
.bz-flow{list-style:none;margin:16px 0 0;padding:0;position:relative}
.bz-flow::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--line)}
.bz-flow li{position:relative;display:flex;align-items:center;gap:12px;padding:7px 0;font-size:15px;
  font-weight:700;line-height:1.35}
.bz-flow li i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:13px;font-weight:800;z-index:1}
.bz-ev i{background:#F1ECE4} .bz-no i{background:var(--orange)}
.bz-ev i::after,.bz-no i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--faint)}
.bz-no i::after{background:#fff}
.bz-ok i{background:var(--mint);color:var(--mint-d)} .bz-yu i{background:var(--peach);color:var(--peach-d)}
.bz-ev span{color:var(--mid);font-weight:600} .bz-no span{color:var(--ink)}
.bz-say{margin-top:12px;font-size:14px;line-height:1.5;color:var(--grey);font-weight:500}
@media (min-width:960px){ .bz-three{grid-template-columns:repeat(3,1fr);gap:22px} }

/* ══ the breadth, under the frame (26 Sep, second pass) ════════════════════
   cf- capability families, xr- Xero, tr- trust. Own prefixes: .grp, .step,
   .cap and .fine already mean something here. */
.cf{display:grid;gap:14px;margin-top:clamp(28px,4.4vh,44px)}
.cf-card{background:#fff;border-radius:26px;padding:20px 20px 18px;display:flex;flex-direction:column;
  box-shadow:0 22px 44px -32px rgba(20,18,16,.55)}
.cf-top{display:flex;align-items:center;gap:12px}
.cf-top .ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none}
.cf-top .ic svg{width:21px;height:21px}
.cf-top b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.cf-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cf-list li{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink);
  background:var(--cream);border-radius:99px;padding:7px 12px}
.cf-next{margin-top:auto;padding-top:16px;font-size:14px;line-height:1.45;color:var(--mid);font-weight:600}
.cf-list+.cf-next{margin-top:16px;border-top:1px solid var(--line)}
.cf-next span{color:var(--orange-d);font-weight:800}
.cf-next span::after{content:" \2192 ";color:var(--orange)}
.cf-card--later{background:transparent;box-shadow:none;border:2px dashed var(--sand)}
.cf-card--later .cf-top b{color:var(--grey)}
.cf-card--later .cf-list li{background:#fff;color:var(--mid);font-weight:600}
@media (min-width:700px){ .cf{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .cf{grid-template-columns:repeat(3,1fr);gap:18px} }

.xr{display:grid;gap:12px;margin-top:clamp(26px,4vh,40px);align-items:stretch}
.xr-side{background:#221E1B;border-radius:22px;padding:20px 22px}
.xr-h{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#F0876C}
.xr-side p+p{margin-top:8px;font-size:16px;font-weight:700;line-height:1.45;color:#fff}
.xr-arrow{display:grid;place-items:center;color:#F0876C}
.xr-arrow svg{width:26px;height:26px;transform:rotate(90deg)}
.xr-fine{margin-top:18px;font-size:13.5px;color:#A69C92;font-weight:500}
@media (min-width:760px){
  .xr{grid-template-columns:1fr 44px 1fr}
  .xr-arrow svg{transform:none}
}

.tr{display:grid;gap:10px;margin-top:clamp(26px,4vh,40px)}
.tr-item{background:#fff;border-radius:22px;padding:18px 20px}
.tr-item b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.025em}
.tr-item p{margin-top:6px;font-size:14.5px;color:var(--grey);font-weight:500;line-height:1.55}
@media (min-width:700px){ .tr{grid-template-columns:1fr 1fr;gap:14px} }
@media (min-width:1000px){ .tr{grid-template-columns:repeat(3,1fr)} }