/* ============================================================================
   Signal Set, the website.

   Built on lifebase.ai's own system (main-app/site/assets/site.css), so the
   two front doors share an eye: the same paper, inks, type, radii, motion
   and button construction. Two things are Signal Set's own:

     the colour   a deep signal green, the one colour on the page
     the window   not a notebook but the system at work: its list, a
                  business's website, a contact form and an owner's inbox
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root{
  --paper:#ffffff;
  --ink:#171716;
  --ink-body:#242424;
  --ink-2:#5b5a59;
  --ink-3:#757575;
  --ink-4:#9b9997;

  --tint:#f7f7f7;
  --tint-2:#f1f1f0;
  --tint-3:#eaeae8;

  --line:#ebebeb;
  --line-2:#dfdfdf;

  /* The one colour. Green as in "go": calm, and not the purple Life Base
     owns, so the two companies never read as one. White on it is 6.4:1. */
  --brand:#156b52;
  --brand-hover:#1a7a5e;
  --brand-active:#105a45;
  --brand-ink:#0f5240;
  --brand-25:#f3faf7;
  --brand-50:#e7f4ee;
  --brand-100:#cfe8dc;
  --brand-200:#a9d5c1;

  /* No web fonts. On Apple devices the headline serif is New York and the
     body is San Francisco, both already on the device: zero network. */
  --font-display:ui-serif,"New York","Iowan Old Style","Palatino Linotype",
                 "Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --font-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",
              Helvetica,Arial,sans-serif;

  --t-display:clamp(2.35rem,4.6vw,3.5rem);
  --t-h2:clamp(1.7rem,2.7vw,2.3rem);
  --t-body:1.0625rem;

  --r-panel:20px;
  --r-card:12px;
  --r-control:8px;
  --r-pill:999px;

  --ease:cubic-bezier(.25,1,.5,1);
  --ease-pop:cubic-bezier(.2,.7,.3,1);

  /* Life Base's machined button: seven soft shadows and two inner lines,
     re-tinted from purple to green. */
  --shadow-btn:
    0 6px 16px -8px rgba(4,38,28,.16),
    0 4px 12px -6px rgba(4,38,28,.11),
    0 3px  8px -4px rgba(4,38,28,.10),
    0 2px  6px -3px rgba(4,38,28,.07),
    0 1px  4px -2px rgba(4,38,28,.07),
    0 1px  3px -1px rgba(4,38,28,.04),
    0 1px  2px      rgba(4,38,28,.02),
    inset 0 -1px 0 1px rgba(13,74,57,.34),
    inset 0  1px 2px -1px rgba(255,255,255,.32);
  --shadow-btn-hover:
    0 10px 22px -10px rgba(4,38,28,.22),
    0  6px 14px -7px  rgba(4,38,28,.15),
    0  3px  8px -4px  rgba(4,38,28,.10),
    0  1px  3px -1px  rgba(4,38,28,.06),
    inset 0 -1px 0 1px rgba(13,74,57,.30),
    inset 0  1px 2px -1px rgba(255,255,255,.38);
  --shadow-win:
    0 1px 1px rgba(0,0,0,.02),
    0 4px 8px -4px rgba(0,0,0,.04),
    0 18px 34px -18px rgba(0,0,0,.10),
    0 44px 80px -44px rgba(0,0,0,.14);

  --frame:1272px;
  --gutter:44px;
  --nav-h:66px;
  --band:96px;
}
@media (max-width:900px){ :root{ --gutter:22px; --band:72px; } }
@media (max-width:560px){ :root{ --gutter:16px; --t-display:clamp(1.95rem,8.2vw,2.4rem); } }

/* ---------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink-body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--brand-100);color:var(--ink)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------- */
.wrap{
  max-width:calc(var(--frame) - var(--gutter)*2);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
section{position:relative}
.rule{border-top:1px solid var(--line)}
.band{padding-top:var(--band);padding-bottom:var(--band)}
.tinted{background:var(--tint)}

/* ---------------------------------------------------------------------------
   4. TYPE
   ------------------------------------------------------------------------- */
.display,.h2{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--ink);
  text-wrap:balance;
}
.display{font-size:var(--t-display);line-height:1.06;letter-spacing:-.032em}
.h2{font-size:var(--t-h2);line-height:1.14;letter-spacing:-.024em}

/* One soft pill with a dot around one word, the only colour in the
   headline. One per page, never two. */
.mark{
  display:inline-flex;align-items:center;gap:.34em;
  background:var(--brand-50);
  border-radius:var(--r-pill);
  padding:.02em .44em .06em .40em;
  margin:0 -.06em;
  color:var(--ink);
  white-space:nowrap;
}
.mark::before{
  content:"";width:.36em;height:.36em;border-radius:50%;
  background:var(--brand);flex:none;margin-top:.06em;
}

/* ---------------------------------------------------------------------------
   5. BUTTONS AND LINKS
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:46px;padding:0 20px;
  border-radius:var(--r-control);
  font-family:var(--font-sans);
  font-size:.9688rem;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;
  transition:background .18s var(--ease),box-shadow .22s var(--ease),
             transform .18s var(--ease),color .18s var(--ease);
}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--brand-hover);box-shadow:var(--shadow-btn-hover)}
.btn-primary:active{background:var(--brand-active)}
.btn-soft{background:var(--brand-50);color:var(--brand-ink)}
.btn-soft:hover{background:var(--brand-100)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink-4)}
.btn-sm{height:38px;padding:0 15px;font-size:.9063rem}

.alink{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;color:var(--brand-ink);
  transition:color .16s var(--ease);
}
.alink::after{content:"\2192";transition:transform .22s var(--ease)}
.alink:hover{color:var(--brand)}
.alink:hover::after{transform:translateX(3px)}

/* ---------------------------------------------------------------------------
   6. NAV  -  stays put, scrolls away with the page
   ------------------------------------------------------------------------- */
.nav{position:relative;z-index:10;height:var(--nav-h);border-bottom:1px solid var(--line);background:var(--paper)}
.nav-inner{
  max-width:var(--frame);margin:0 auto;height:100%;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-logo{display:flex;align-items:center;gap:9px;color:var(--ink)}
.ss-mark{width:22px;height:22px;flex:none}
.nav-logo .ss-mark{color:var(--brand)}
.nav-logo span{font-family:var(--font-display);font-size:1.175rem;letter-spacing:-.022em;
               line-height:1;padding-bottom:2px}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-quiet{font-size:.9375rem;font-weight:500;color:var(--ink-2);padding:8px 10px;
           border-radius:var(--r-control);transition:color .15s var(--ease)}
.nav-quiet:hover{color:var(--ink)}
@media (max-width:380px){ .nav-quiet{display:none} }

/* ---------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.hero{padding-top:78px;padding-bottom:clamp(52px,6vw,88px);overflow:hidden}
.hero-head{max-width:940px;margin:0 auto;text-align:center;position:relative}
.hero-title{font-size:clamp(2.05rem,3.5vw,2.95rem);line-height:1.14;letter-spacing:-.026em}
.hero-sub{
  max-width:46ch;margin:22px auto 0;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  line-height:1.5;color:var(--ink-2);text-wrap:pretty;
}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:.875rem;color:var(--ink-3);text-wrap:pretty}
@media (max-width:560px){
  .hero{padding-top:52px}
  .hero-title{font-size:clamp(1.85rem,7.6vw,2.3rem)}
  .hero-actions{flex-direction:column;gap:10px}
  .hero-actions .btn{width:100%}
}
.hero-glow{
  position:absolute;left:50%;top:-40px;transform:translateX(-50%);
  width:1200px;height:520px;pointer-events:none;z-index:-1;
  background:radial-gradient(58% 52% at 50% 40%,var(--brand-25) 0%,rgba(255,255,255,0) 72%);
}
.hero-stage{margin-top:52px;position:relative}

/* ---------------------------------------------------------------------------
   8. THE WINDOW  -  Life Base's .appwin, the same chrome
   ------------------------------------------------------------------------- */
.appwin{
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow-win),0 0 0 1px rgba(0,0,0,.055);
  overflow:hidden;
  display:flex;flex-direction:column;
  text-align:left;
  user-select:none;-webkit-user-select:none;
}
.appwin-bar{
  height:38px;flex:none;
  background:linear-gradient(#fbfbfb,#f4f4f4);
  border-bottom:1px solid #e4e4e4;
  display:flex;align-items:center;gap:9px;padding:0 13px;
}
.dots{display:flex;gap:6px;flex:none}
.dots i{width:11px;height:11px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#ed6a5e}
.dots i:nth-child(2){background:#f4bf4f}
.dots i:nth-child(3){background:#61c554}
.appwin-tab{
  margin-left:8px;height:26px;border-radius:6px 6px 0 0;
  background:#fff;box-shadow:0 0 0 1px #e4e4e4;
  display:flex;align-items:center;gap:6px;padding:0 12px;
  font-size:.75rem;color:var(--ink-2);font-weight:500;white-space:nowrap;
}
.tab-ic{width:12px;height:12px;flex:none}
.tab-ic-mail{display:none}
.rp.is-blank .tab-ic{display:none!important}
.rp.is-mail .tab-ic-site{display:none}
.rp.is-mail .tab-ic-mail{display:block}
.appwin-url{
  margin-left:auto;height:22px;border-radius:var(--r-pill);
  background:#ececec;color:#8a8a8a;font-size:.6875rem;
  display:flex;align-items:center;padding:0 12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:46%;
}

/* ---------------------------------------------------------------------------
   9. THE REPLAY  -  its body
   ------------------------------------------------------------------------- */
.rp{width:min(1064px,100%);margin:0 auto;height:640px}
.rp-body{flex:1;display:flex;min-height:0;background:#fff;position:relative}

/* ---- the system's own list ---------------------------------------------- */
.rq{--rq-w:252px;width:var(--rq-w);flex:none;display:flex;flex-direction:column;
    background:#f9f9f9;border-right:1px solid #ebebeb;min-height:0;
    transition:margin-left .55s var(--ease) .12s,opacity .3s var(--ease) .1s}
/* the inbox is the owner's screen, not ours: the list steps out of the way */
.rp.is-mail .rq{margin-left:calc(var(--rq-w) * -1);opacity:0}
.rq-head{height:40px;flex:none;display:flex;align-items:center;gap:8px;
         padding:0 12px;border-bottom:1px solid #ebebeb}
.rq-head .ss-mark{width:15px;height:15px;color:var(--brand)}
.rq-head b{font-size:.75rem;font-weight:600;color:var(--ink-body)}
.rq-head span{margin-left:auto;font-size:.6875rem;color:#9b9997}
.rq-want{margin:12px 10px 6px;padding:9px 11px;border-radius:9px;background:#fff;
         box-shadow:inset 0 0 0 1px #ebebeb}
.rq-want small{display:block;font-size:.625rem;font-weight:600;color:#9b9997;
               letter-spacing:.02em;text-transform:uppercase}
.rq-want p{font-size:.75rem;line-height:1.4;color:var(--ink-body);margin-top:2px}
.rq-list{padding:6px 6px 0;flex:1;min-height:0}
.rq-row{
  position:relative;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  column-gap:8px;row-gap:1px;
  padding:7px 8px;margin-bottom:2px;border-radius:7px;
  transition:background .2s var(--ease);
}
.rq-row b{font-size:.71875rem;font-weight:600;color:var(--ink-body);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rq-why{grid-row:2;font-size:.6875rem;color:#8f8e8c;white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis;min-width:0}
.rq-tag{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;
        font-size:.625rem;font-weight:600;padding:2px 7px;border-radius:var(--r-pill);
        background:#ececea;color:#8a8987;opacity:1;transition:opacity .2s var(--ease)}
.rq-row[data-verdict="fit"] .rq-tag{background:var(--brand-50);color:var(--brand-ink)}
.rq-row[data-verdict="skip"]{opacity:.62}
.rq-row[data-verdict="skip"] b{text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.rq-row.is-next{opacity:.45}
.rq-row.is-cursor{background:#ececec;opacity:1}
.rq-row.is-hit{background:#fff;box-shadow:inset 0 0 0 1px var(--brand-100),0 1px 2px rgba(0,0,0,.04);opacity:1}
.rq-row.is-sent .rq-tag{background:var(--brand);color:#fff}
/* while the list is being read, a verdict appears only once it is made */
.rp.is-judging .rq-row:not(.is-judged) .rq-tag,
.rp.is-judging .rq-row:not(.is-judged) .rq-why{opacity:0}
.rp.is-judging .rq-row:not(.is-judged){opacity:1}
.rp.is-judging .rq-row:not(.is-judged) b{text-decoration:none}
.rq-foot{
  flex:none;margin:8px 10px 12px;padding:8px 10px;border-radius:8px;
  display:flex;align-items:center;gap:7px;
  font-size:.6875rem;font-weight:500;color:var(--brand-ink);background:var(--brand-50);
  opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.rq-foot svg{width:13px;height:13px;flex:none}
.rq-foot.is-on{opacity:1;transform:none}

/* ---- the screen: a website, then an inbox ------------------------------- */
.rv{flex:1;min-width:0;position:relative;overflow:hidden;background:#fff}
.biz,.ml{position:absolute;inset:0;transition:opacity .34s var(--ease),transform .5s var(--ease)}
.ml{opacity:0;transform:translateY(10px);pointer-events:none}
.rp.is-mail .ml{transition-delay:.26s}
.rp.is-mail .biz{opacity:0;transform:translateY(-8px)}
.rp.is-mail .ml{opacity:1;transform:none}
.biz.is-loading .biz-page{opacity:0}
.biz-page{position:absolute;left:0;right:0;top:0;
          transition:transform .62s var(--ease),opacity .3s var(--ease);
          font-family:var(--font-sans);color:#1f2b38}

/* a small business's own website: its own colours, its own voice.
   The frame stays plain; the object inside it is rich. */
.biz-nav{height:50px;display:flex;align-items:center;gap:18px;padding:0 26px;background:#1f2b38;color:#fff}
.biz-logo{display:flex;align-items:center;gap:7px;font-size:.875rem;font-weight:700;letter-spacing:-.01em}
.biz-logo svg{width:20px;height:20px}
.biz-logo b{font-weight:400;opacity:.8;margin-left:3px}
.biz-links{display:flex;gap:16px;margin-left:auto;font-size:.71875rem;opacity:.82}
.biz-links i{font-style:normal}
.biz-phone{font-size:.71875rem;font-weight:600;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.12)}
.biz-hero{
  display:flex;align-items:center;gap:20px;
  padding:30px 26px 32px;
  background:linear-gradient(135deg,#243446 0%,#2c4058 100%);
  color:#fff;
}
.biz-hero-copy{flex:1;min-width:0}
.biz-kicker{font-size:.65625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#f0a77f}
.biz-hero h3{font-size:1.5rem;line-height:1.18;font-weight:700;letter-spacing:-.02em;margin-top:8px;max-width:19ch}
.biz-hero h3 mark{background:transparent;color:inherit;border-radius:3px;padding:0 2px;margin:0 -2px;
                  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.biz-hero h3 mark.is-on{background:rgba(124,214,173,.30);box-shadow:0 0 0 1px rgba(124,214,173,.55)}
.biz-hero p{font-size:.78125rem;line-height:1.5;opacity:.82;margin-top:10px;max-width:42ch}
.biz-cta{display:inline-block;margin-top:16px;font-size:.71875rem;font-weight:700;
         padding:9px 14px;border-radius:7px;background:#e0703a;color:#fff}
.biz-roof{width:168px;flex:none}
.biz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px 26px;background:#f6f4f1}
.biz-cards div{background:#fff;border-radius:9px;padding:12px 13px;box-shadow:0 1px 2px rgba(31,43,56,.08)}
.biz-cards b{display:block;font-size:.75rem;color:#1f2b38}
.biz-cards span{display:block;font-size:.6875rem;line-height:1.45;color:#5d6875;margin-top:3px}
.biz-contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;padding:24px 26px 30px;background:#fff}
.biz-contact h4{font-size:1.125rem;font-weight:700;letter-spacing:-.015em;color:#1f2b38}
.biz-contact-copy p{font-size:.75rem;line-height:1.5;color:#5d6875;margin-top:7px}
.biz-small{font-size:.6875rem!important;color:#8a939d!important;margin-top:12px!important}

/* the contact form */
.bf{display:flex;flex-direction:column;gap:9px}
.bf-row{display:flex;flex-direction:column;gap:4px}
.bf-label{font-size:.65625rem;font-weight:600;color:#3c4752}
.bf-label i{font-style:normal;font-weight:400;color:#8a939d}
.bf-in{
  height:30px;border-radius:6px;background:#fff;
  box-shadow:inset 0 0 0 1px #cfd5db;
  font-size:.71875rem;line-height:30px;color:#1f2b38;
  padding:0 9px;white-space:nowrap;overflow:hidden;
  transition:box-shadow .16s var(--ease);
}
.bf-in.is-focus{box-shadow:inset 0 0 0 1.5px #3b82c4,0 0 0 3px rgba(59,130,196,.16)}
.bf-area{height:76px;line-height:1.5;padding:6px 9px;white-space:normal;
         display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.bf-send{
  align-self:flex-start;margin-top:3px;height:32px;padding:0 15px;border-radius:7px;
  background:#1f2b38;color:#fff;font-size:.71875rem;font-weight:700;
  display:flex;align-items:center;transition:transform .1s var(--ease),background .2s var(--ease);
}
.bf-send.is-press{transform:scale(.96);background:#2c3d50}
.bf-send.is-busy span{opacity:.6}
.bf-ok{
  display:flex;align-items:center;gap:7px;
  font-size:.71875rem;font-weight:600;color:#1f5f49;
  padding:8px 10px;border-radius:7px;background:#eef8f3;
  opacity:0;transform:translateY(-3px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.bf-ok svg{width:15px;height:15px;flex:none}
.bf-ok.is-on{opacity:1;transform:none}

.cur{display:inline-block;width:1.5px;height:1.05em;background:currentColor;
     vertical-align:-2px;margin-left:1px;animation:blink 1.06s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* reading: a soft light passes down the page */
.scan{
  position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(124,214,173,0) 0%,rgba(124,214,173,.20) 50%,rgba(124,214,173,0) 100%);
  border-bottom:1px solid rgba(124,214,173,.55);
}

/* the opening line, written from the site */
.cmp{
  position:absolute;right:22px;top:68px;width:min(330px,calc(100% - 44px));
  background:#fff;border-radius:12px;padding:13px 15px 14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 14px 34px -14px rgba(0,0,0,.30),0 4px 10px -6px rgba(0,0,0,.12);
  opacity:0;transform:translateY(-5px) scale(.985);transform-origin:top left;
  transition:opacity .18s var(--ease),transform .24s var(--ease-pop);
  pointer-events:none;
}
.cmp.is-open{opacity:1;transform:none}
.cmp-label{display:flex;align-items:center;gap:6px;font-size:.625rem;font-weight:600;
           letter-spacing:.02em;text-transform:uppercase;color:var(--brand-ink)}
.cmp-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.cmp-line{font-family:var(--font-sans);font-size:.875rem;line-height:1.45;color:var(--ink);
          margin-top:7px;font-weight:500;min-height:1.45em}
.cmp-rest{font-size:.71875rem;line-height:1.5;color:#8f8e8c;margin-top:8px;padding-top:8px;
          border-top:1px solid #efefef;opacity:0;transition:opacity .3s var(--ease)}
.cmp-rest b{color:var(--ink-2);font-weight:600}
.cmp-rest.is-on{opacity:1}

/* the screenshot it keeps of every form it sends */
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.is-on{animation:flash .42s ease-out}
@keyframes flash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}

/* ---- the owner's inbox ---------------------------------------------------- */
.ml{display:flex;background:#fff;font-family:var(--font-sans)}
.ml-list{width:300px;flex:none;border-right:1px solid #ebebeb;background:#fbfbfb;overflow:hidden}
.ml-head{height:44px;display:flex;align-items:baseline;gap:8px;padding:14px 16px 0;border-bottom:1px solid #ebebeb}
.ml-head b{font-size:.875rem;color:var(--ink)}
.ml-head span{font-size:.65625rem;color:#9b9997;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-item{position:relative;padding:11px 16px 12px 26px;border-bottom:1px solid #efefef;transition:background .2s var(--ease)}
.ml-meta{display:flex;align-items:baseline;gap:8px}
.ml-meta b{font-size:.75rem;font-weight:500;color:var(--ink-body);flex:1;min-width:0;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-meta time{font-size:.625rem;color:#9b9997;white-space:nowrap}
.ml-subj{font-size:.71875rem;color:var(--ink-body);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-snip{font-size:.6875rem;color:#8f8e8c;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-item.is-new .ml-meta b,.ml-item.is-new .ml-subj{font-weight:700;color:var(--ink)}
.ml-dot{position:absolute;left:11px;top:16px;width:7px;height:7px;border-radius:50%;background:#3b82c4}
.ml-item.is-new{background:#fff}
.ml-item.is-open{background:#eaf2fb}
.ml-item.is-open .ml-dot{opacity:0}
.ml-item[data-new].is-arriving{animation:arrive .45s var(--ease-pop)}
@keyframes arrive{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.ml-read{flex:1;min-width:0;position:relative;overflow:hidden}
.ml-read::before{content:"Select a message";position:absolute;inset:0;display:flex;align-items:center;
                 justify-content:center;font-size:.75rem;color:#b5b3b0}
.ml-msg{position:absolute;inset:0;background:#fff;padding:26px 30px;opacity:0;transform:translateY(6px);
        transition:opacity .3s var(--ease),transform .36s var(--ease)}
.ml-read.is-open .ml-msg{opacity:1;transform:none}
.ml-msg h5{font-size:1.125rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.ml-from{font-size:.6875rem;color:var(--ink-2);margin-top:6px;padding-bottom:12px;border-bottom:1px solid #efefef}
.ml-from b{color:var(--ink);font-weight:600}
.ml-from span{display:block;color:#9b9997;margin-top:1px}
.ml-body{margin-top:14px;font-size:.75rem;line-height:1.55;color:var(--ink-body)}
.ml-body dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:12px;padding:12px 14px;
            border-radius:9px;background:#f7f7f6}
.ml-body dt{font-weight:600;color:var(--ink-2)}
.ml-body dd{color:var(--ink)}
.ml-actions{margin-top:14px;display:flex;gap:8px}
.ml-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:7px;
        font-size:.71875rem;font-weight:600;color:var(--ink);background:#fff;
        box-shadow:inset 0 0 0 1px #dcdcda;transition:background .15s var(--ease),transform .1s var(--ease)}
.ml-btn svg{width:13px;height:13px}
.ml-btn.is-press{transform:scale(.96);background:#f2f2f1}
.ml-reply{margin-top:12px;min-height:56px;padding:10px 12px;border-radius:9px;
          box-shadow:inset 0 0 0 1px #3b82c4,0 0 0 3px rgba(59,130,196,.12);
          font-size:.78125rem;line-height:1.5;color:var(--ink);
          opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .3s var(--ease)}
.ml-reply.is-on{opacity:1;transform:none}

/* ---- the pointer -------------------------------------------------------- */
.rc{position:absolute;left:0;top:0;width:17px;height:21px;z-index:5;pointer-events:none;
    opacity:0;transition:opacity .25s var(--ease);
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));will-change:transform}
.rc.is-on{opacity:1}
.rc-ring{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:4;
         border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 2px rgba(21,107,82,.45)}
.rc-ring.is-on{animation:ring .42s ease-out}
@keyframes ring{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.15)}}

/* ---- the five steps, under the window ----------------------------------- */
.steps{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;margin-top:22px;
       font-size:.875rem;color:var(--ink-3)}
.steps li{display:flex;align-items:center;gap:8px;transition:color .25s var(--ease)}
.steps li::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--line-2);transition:background .25s var(--ease),transform .25s var(--ease);
}
.steps li.is-on{color:var(--ink)}
.steps li.is-on::before{background:var(--brand);transform:scale(1.25)}
.steps li.is-done::before{background:var(--brand-200)}

/* ---------------------------------------------------------------------------
   10. QUESTIONS
   ------------------------------------------------------------------------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,72px);
          align-items:start}
.faq-head{position:sticky;top:32px}
.faq-head .h2{max-width:16ch}
.faq-aside{margin-top:18px;font-size:.9375rem;color:var(--ink-2);max-width:30ch}
.faq-aside a{color:var(--brand-ink);font-weight:600;text-decoration:underline;
             text-decoration-color:var(--brand-200);text-underline-offset:3px}
.faq-aside a:hover{text-decoration-color:var(--brand)}
.faq{background:#fff;border-radius:var(--r-panel);padding:6px 28px;
     box-shadow:0 0 0 1px rgba(0,0,0,.05),0 10px 26px -16px rgba(0,0,0,.14)}
.faq details{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none;cursor:pointer;
  padding:21px 44px 21px 0;position:relative;
  font-family:var(--font-display);font-size:1.25rem;line-height:1.3;letter-spacing:-.014em;
  color:var(--ink);
  transition:color .15s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-ink)}
/* a plus that becomes a minus */
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:1.6px;margin-top:-.8px;
  background:var(--ink-3);border-radius:2px;transition:transform .26s var(--ease),background .15s var(--ease);
}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq summary:hover::before,.faq summary:hover::after{background:var(--brand)}
.faq details::details-content{
  height:0;overflow:clip;
  transition:height .32s var(--ease),content-visibility .32s allow-discrete;
}
.faq details[open]::details-content{height:auto}
.faq .ans{padding:0 44px 24px 0;color:var(--ink-2);line-height:1.62;font-size:1rem;max-width:62ch}
.faq .ans p + p,.faq .ans ol + p,.faq .ans p + ol{margin-top:.8em}
.faq .ans ol{counter-reset:step;display:flex;flex-direction:column;gap:6px}
.faq .ans ol li{counter-increment:step;display:grid;grid-template-columns:22px 1fr}
.faq .ans ol li::before{content:counter(step) ".";color:var(--brand-ink);font-weight:600}
.faq .ans a[href="#contact"],.faq .ans a[href="#book"]{color:var(--brand-ink);font-weight:600;text-decoration:underline;
                              text-decoration-color:var(--brand-200);text-underline-offset:3px}
@media (max-width:900px){
  .faq-wrap{grid-template-columns:1fr}
  .faq-head{position:static}
  .faq-head .h2{max-width:20ch}
}
@media (max-width:560px){
  .faq{padding:2px 18px;border-radius:16px}
  .faq summary{font-size:1.125rem;padding:18px 36px 18px 0}
  .faq .ans{padding-right:0}
}

/* ---------------------------------------------------------------------------
   11. CLOSING AND FOOTER
   ------------------------------------------------------------------------- */
.close-cta{text-align:center;padding-top:clamp(78px,9vw,124px);padding-bottom:clamp(78px,9vw,124px)}
.close-cta .display{max-width:16ch;margin:0 auto}
.close-cta .hero-actions{margin-top:32px}
.foot-min{border-top:1px solid var(--line);background:var(--tint);padding:30px 0;text-align:center}
.foot-min p{font-size:.8438rem;color:var(--ink-3)}

/* ---------------------------------------------------------------------------
   12. REVEAL  -  small, fast, upward only
   ------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(13px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .62s var(--ease)}
[data-reveal][data-delay="1"].in{transition-delay:.07s}
[data-reveal][data-delay="2"].in{transition-delay:.14s}
.hero-pop{opacity:0;animation:heropop .26s var(--ease-pop) forwards}
.hero-pop[data-delay="1"]{animation-delay:.06s}
.hero-pop[data-delay="2"]{animation-delay:.14s}
.hero-pop[data-delay="3"]{animation-delay:.24s}
.hero-pop[data-delay="4"]{animation-delay:.36s}
@keyframes heropop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* sticky needs the column to be in its final place, not mid-rise */
.faq-head[data-reveal].in{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero-pop{opacity:1;animation:none}
}

/* ---------------------------------------------------------------------------
   13. THE REPLAY ON SMALLER SCREENS
   On a phone the window drops the system's list and is the screen alone,
   the way Life Base's hero drops its nav panels: a window whose contents
   are crushed reads as broken; a window that shows less reads as chosen.
   ------------------------------------------------------------------------- */
@media (max-width:980px){
  .rq{--rq-w:212px}
  .biz-roof{display:none}
  .ml-list{width:250px}
}
@media (max-width:760px){
  .rp{height:600px}
  .rq{display:none}
  .biz-nav{padding:0 16px;gap:10px}
  .biz-links{display:none}
  .biz-phone{margin-left:auto}
  .biz-hero{padding:24px 18px 26px}
  .biz-hero h3{font-size:1.3rem}
  .biz-cards{grid-template-columns:1fr;padding:16px 18px;gap:8px}
  .biz-cards div:nth-child(n+2){display:none}
  .biz-contact{grid-template-columns:1fr;gap:12px;padding:20px 18px 24px}
  .biz-small{display:none}
  .cmp{right:14px;top:58px;width:calc(100% - 28px)}
  .ml-list{width:100%;border-right:0}
  .ml-read{position:absolute;inset:0;pointer-events:none;background:transparent}
  .ml-read::before{display:none}
  .ml-read.is-open{background:#fff}
  .ml-msg{padding:20px 18px}
  .steps{gap:6px 14px;font-size:.8125rem}
  .steps li:not(.is-on){font-size:0;gap:0}
  .steps li:not(.is-on)::before{margin:0}
}
@media (max-width:480px){
  /* the tab already names the page; a second, clipped copy is noise */
  .appwin-url{display:none}
}
@media (max-width:420px){
  .rp{height:560px}
  .biz-phone{display:none}
}

/* ---------------------------------------------------------------------------
   14. STATES THE REPLAY SETS
   ------------------------------------------------------------------------- */
.ml-item[data-new].is-hidden{display:none}
/* with motion turned down there is no "now", so every step keeps its words */
.steps.is-static li,.steps.is-static li:not(.is-on){font-size:inherit;gap:8px;color:var(--ink-2)}
.steps.is-static li::before{background:var(--brand-200)}

/* ---------------------------------------------------------------------------
   15. CHECKING EACH SITE  -  the page loading, and the verdict on it
   A window that opens blank is worse than a still image, so while the
   list is read, the screen shows each site loading and what was decided.
   ------------------------------------------------------------------------- */
.skel{position:absolute;inset:0;padding:0;opacity:0;pointer-events:none;
      transition:opacity .22s var(--ease);background:#fff}
.biz.is-loading .skel{opacity:1}
.skel i,.skel span i{display:block;background:#efefee;border-radius:6px}
.sk-bar{height:50px;border-radius:0!important;background:#e9e9e7!important}
.sk-hero{height:150px;margin:18px 26px 0;border-radius:10px!important}
.sk-lines{display:flex;flex-direction:column;gap:9px;margin:20px 26px 0}
.sk-lines i{height:10px}
.sk-lines i:nth-child(1){width:62%}
.sk-lines i:nth-child(2){width:48%}
.sk-lines i:nth-child(3){width:55%}
.sk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 26px 0}
.sk-cards i{height:74px;border-radius:9px!important}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%);
  background-size:220% 100%;animation:shimmer 1.1s linear infinite;
}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
.sk-verdict{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.96);z-index:1;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 15px;border-radius:var(--r-pill);background:#fff;
  font-size:.78125rem;font-weight:600;color:var(--ink-2);
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 10px 24px -12px rgba(0,0,0,.28);
  opacity:0;transition:opacity .16s var(--ease),transform .2s var(--ease-pop);
}
.sk-verdict::before{content:"";width:7px;height:7px;border-radius:50%;background:#c9c7c4;flex:none}
.sk-verdict.is-on{opacity:1;transform:translate(-50%,-50%)}
.sk-verdict.is-fit{color:var(--brand-ink)}
.sk-verdict.is-fit::before{background:var(--brand)}
@media (max-width:760px){
  .sk-hero{margin:14px 16px 0;height:130px}
  .sk-lines,.sk-cards{margin-left:16px;margin-right:16px}
  .sk-cards{grid-template-columns:1fr}
  .sk-cards i:nth-child(n+2){display:none}
}

/* the business site's own footer, which is also what lets its form scroll up */
.biz-foot{display:flex;flex-direction:column;gap:3px;padding:20px 26px 26px;background:#1f2b38;color:rgba(255,255,255,.7);
          font-size:.6875rem;line-height:1.5}
.biz-foot b{color:#fff;font-size:.78125rem}
@media (max-width:760px){ .biz-foot{padding:18px 18px 22px} }

/* ---------------------------------------------------------------------------
   16. THE CONTACT FORM  -  Sunny's own, under the page's last line
   The same quiet card as the questions, the same inputs a real form has.
   Email and message are the two that must be filled.
   ------------------------------------------------------------------------- */
.close-sub{max-width:46ch;margin:18px auto 0;font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.5;text-wrap:balance;
           color:var(--ink-2);text-wrap:pretty}
.cf-card{max-width:640px;margin:36px auto 0;text-align:left;background:#fff;border-radius:var(--r-panel);padding:28px;
         box-shadow:0 0 0 1px rgba(0,0,0,.055),0 18px 40px -24px rgba(0,0,0,.18)}
.cf{display:flex;flex-direction:column;gap:16px}
.cf-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.cf-label{font-size:.875rem;font-weight:600;color:var(--ink)}
.cf-label i{font-style:normal;font-weight:400;color:var(--ink-3)}
.cf input,.cf textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:0;border-radius:var(--r-control);
  box-shadow:inset 0 0 0 1px var(--line-2);padding:11px 13px;width:100%;
  transition:box-shadow .16s var(--ease);-webkit-appearance:none;appearance:none;
}
.cf input{height:46px}
.cf textarea{min-height:136px;resize:vertical;line-height:1.5}
.cf input::placeholder,.cf textarea::placeholder{color:#a5a3a0}
.cf input:hover,.cf textarea:hover{box-shadow:inset 0 0 0 1px var(--ink-4)}
.cf input:focus,.cf textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--brand),0 0 0 4px var(--brand-50)}
.cf-why{display:none;font-size:.8125rem;color:#b3261e}
.cf-field.is-bad input,.cf-field.is-bad textarea{box-shadow:inset 0 0 0 1.5px #c9382f,0 0 0 4px #fbeceb}
.cf-field.is-bad .cf-why{display:block}
.cf-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.cf-note{font-size:.875rem;color:var(--ink-3)}
.cf-error{font-size:.875rem;color:#b3261e}
.cf .btn[disabled]{opacity:.72;cursor:default}
.cf-done{display:flex;gap:14px;align-items:flex-start;padding:4px 0}
.cf-done svg{width:30px;height:30px;flex:none;margin-top:2px}
.cf-done b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.2;
           letter-spacing:-.016em;color:var(--ink)}
.cf-done span{color:var(--ink-2)}
@media (max-width:560px){
  .cf-card{padding:20px 16px;border-radius:16px;margin-top:28px}
  .cf-two{grid-template-columns:1fr}
  .cf-foot .btn{width:100%}
}

/* ---------------------------------------------------------------------------
   17. BOOKING A CALL  -  the second tab of the contact card
   ------------------------------------------------------------------------- */
.cf-switch{display:inline-flex;gap:4px;padding:4px;margin-bottom:22px;border-radius:var(--r-pill);background:var(--tint-2)}
.cf-switch button{font:inherit;font-size:.9063rem;font-weight:600;color:var(--ink-2);padding:8px 16px;border:0;
                  border-radius:var(--r-pill);background:transparent;cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease)}
.cf-switch button:hover{color:var(--ink)}
.cf-switch button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
.bk-lead{font-size:.9375rem;line-height:1.55;color:var(--ink-2);margin-bottom:16px}
.bk-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bk-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:9px 10px;border:0;
        border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:inherit;cursor:pointer;
        transition:box-shadow .16s var(--ease),background .16s var(--ease)}
.bk-day small{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.bk-day b{font-size:.9688rem;font-weight:600;color:var(--ink)}
.bk-day:hover{box-shadow:inset 0 0 0 1px var(--ink-4)}
.bk-day[aria-selected="true"]{background:var(--brand);box-shadow:none}
.bk-day[aria-selected="true"] small,.bk-day[aria-selected="true"] b{color:#fff}
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:14px}
.bk-time{height:42px;border:0;border-radius:var(--r-control);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);
         font:inherit;font-size:.9375rem;font-weight:600;color:var(--ink);cursor:pointer;transition:box-shadow .16s var(--ease),background .16s var(--ease)}
.bk-time:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.bk-time[aria-pressed="true"]{background:var(--brand-50);box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand-ink)}
.bk-wait{font-size:.9375rem;color:var(--ink-3);margin-top:14px}
.bk-form{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.bk-picked{font-size:.9688rem;font-weight:600;color:var(--brand-ink);padding:11px 14px;border-radius:10px;
           background:var(--brand-25);box-shadow:inset 0 0 0 1px var(--brand-100)}
.bk-done span{display:block}
.bk-done .alink{margin-top:10px}
@media (max-width:560px){
  .cf-switch{display:flex}
  .cf-switch button{flex:1;padding:9px 10px}
}