/* Layout and components. Colours, fonts and the radius come ONLY from brand/tokens.css.
   House rules (Armen): no all-caps labels above headlines, no thick coloured side
   borders, no 01/02 numbers, no hover lift or scale, no decorative mini lines,
   no shadows or gradients (thin plain rules instead), square-ish corners,
   slow calm motion only. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:96px}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--f-body);font-size:21px;line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--c-accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.15;letter-spacing:normal;margin:0 0 .5em;text-wrap:balance;font-synthesis:none}
h1{font-size:clamp(38px,5vw,72px)}
h2{font-size:clamp(30px,3.4vw,46px)}
h3{font-size:25px;line-height:1.2}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
b,strong{font-weight:700}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--c-bg);padding:8px 12px}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:14px 34px;border-radius:var(--radius);
  background:var(--c-cta);color:var(--c-cta-text);font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:normal;
  text-decoration:none;overflow-wrap:anywhere;border:2px solid var(--c-cta);transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.btn:hover{background:var(--c-cta-hover);border-color:var(--c-cta-hover);text-decoration:none}
.btn.ghost{background:transparent;color:var(--c-text);border-color:var(--c-text)}
.btn.ghost:hover{background:var(--c-accent-tint)}
.on-dark .btn.ghost{color:var(--c-on-dark);border-color:var(--c-on-dark-ghost)}
.on-dark .btn.ghost:hover{border-color:var(--c-on-dark);background:transparent}
.btn.small{min-height:52px;padding:10px 22px;font-size:18px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.under{font-size:19px;color:var(--c-muted);margin-top:16px}
.on-dark .under{color:var(--c-on-dark-muted)}

/* ---------------------------------------------------------------- header */
header.site{position:sticky;top:0;z-index:50;background-color:var(--c-bg);background-image:var(--tx-paper)}
/* one plain rule under the header */
header.site::after{content:"";display:block;border-top:2px solid var(--c-text)}
.bar{display:flex;align-items:center;gap:24px;min-height:80px}
.bar .home{display:inline-flex;text-decoration:none;flex:none}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>a,.navbtn{font:700 20px/1 var(--f-display);color:var(--c-text);text-decoration:none;padding:12px 12px;border-radius:var(--radius);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.nav>a:hover,.navbtn:hover,.navbtn[aria-expanded="true"]{background:var(--c-bg-alt)}
.nav a[aria-current="page"],.navbtn[aria-current="page"]{color:var(--c-accent);text-decoration:underline;text-underline-offset:6px}
.chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s ease}
[aria-expanded="true"]>.chev{transform:translateY(2px) rotate(-135deg)}
.dd{position:relative}
.ddmenu{position:absolute;top:calc(100% + 8px);left:0;min-width:340px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);padding:6px}
.ddmenu[hidden]{display:none}
.ddmenu a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--radius);color:var(--c-text);text-decoration:none}
.ddmenu a+a{border-top:1px solid var(--c-line)}
.ddmenu a:hover{background:var(--c-accent-tint)}
.ddmenu b{display:block;font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.3}
.ddmenu small{display:block;font-size:18px;line-height:1.45;color:var(--c-muted);margin-top:2px}
.ico{flex:none;width:24px;height:24px;color:var(--c-accent)}
.bar .btn{margin-left:8px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-card);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--c-text)}
.drawer{border-top:1px solid var(--c-line);padding:12px 0 24px;background:var(--c-bg);max-height:calc(100vh - 66px);overflow-y:auto}
.drawer[hidden]{display:none}
.drawer a{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 4px;font-family:var(--f-display);font-weight:700;font-size:21px;color:var(--c-text);text-decoration:none;border-bottom:1px solid var(--c-line)}
.drawer .dlabel{font-size:18px;color:var(--c-muted);margin:10px 0 0;padding:0 4px}
.drawer .btn{width:100%;margin-top:18px;justify-content:center;border-bottom:2px solid var(--c-cta);color:var(--c-cta-text)}

/* ---------------------------------------------------------------- bands */
section{padding:88px 0}
.alt{background:var(--c-bg-alt);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.on-dark{background:var(--c-dark);color:var(--c-on-dark)}
.on-dark a:not(.btn){color:var(--c-accent-on-dark)}
.sh{max-width:760px;margin-bottom:40px}
.sh p{font-size:23px;line-height:1.5;color:var(--c-text);margin:0}
.on-dark .sh p{color:var(--c-on-dark-muted)}
.lede{font-size:23px;line-height:1.55;color:var(--c-text);max-width:38em}
.on-dark .lede{color:var(--c-on-dark-muted)}

/* hero: copy left, phone right */
.hero{padding:72px 0 80px}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.hero h1{margin-bottom:22px}
.phead{padding:64px 0 60px}
.phead h1{max-width:18em}

/* two column rows: picture one side, text the other */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.row.flip>.pic{order:2}
.row .pic{display:flex;justify-content:center}
.prose p:last-child{margin-bottom:0}
.prose{max-width:36em}

/* benefit rows: check, bold label, one plain sentence */
.benefits{list-style:none;display:grid;gap:24px}
.benefits li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start}
.benefits .tick{width:28px;height:28px;color:var(--c-accent);margin-top:2px}
.benefits b{display:block;font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.3;margin-bottom:2px}
.benefits p{margin:0;color:var(--c-text);font-size:21px}
.benefits .tag{display:inline-block;margin-left:8px;font:700 18px/1 var(--f-body);color:var(--c-accent);border:1px solid currentColor;border-radius:var(--radius);padding:4px 6px;vertical-align:3px}
.also{margin-top:26px;font-size:19px;color:var(--c-text)}

/* industry picker on the homepage: an index of rows, like an old trade directory, not a grid
   of same-size icon cards (Armen 2026-10-01 reads icon card grids as AI-made). Each row is one
   big link: the name and who it covers on the left, what it does for them and the link on the
   right. One rule between rows, no boxes, no icons. Hover tints the row, nothing moves. */
.cards{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--c-text)}
.card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-content:start;column-gap:56px;
  padding:28px 12px 30px;border-bottom:1px solid var(--c-text);color:var(--c-text);text-decoration:none;transition:background-color .4s ease}
a.card:hover{background:var(--c-card)}
.card .ico{display:none}
.card h3{grid-column:1;grid-row:1;margin:0 0 6px;font-size:clamp(28px,2.6vw,32px)}
.card .who{grid-column:1;grid-row:2/span 2;align-self:start;margin:0;font-size:20px;line-height:1.5;color:var(--c-text)}
.card p:not(.who){grid-column:2;grid-row:1/span 2;align-self:start;margin:4px 0 10px;font-size:21px;line-height:1.55}
.card .go{grid-column:2;grid-row:3;align-self:start;font-weight:700;color:var(--c-accent);text-decoration:underline;text-underline-offset:3px}

/* plain ordered steps: real numbers, only because order matters */
.flow{list-style:none;counter-reset:f;display:grid;gap:0;max-width:780px}
.flow li{counter-increment:f;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--c-line)}
.flow li:last-child{border-bottom:1px solid var(--c-line)}
.flow li::before{content:counter(f) ".";font-family:var(--f-display);font-weight:700;font-size:24px;line-height:1.3;color:var(--c-accent)}
.flow b{display:block;font-size:22px;line-height:1.4}
.flow span{display:block;color:var(--c-text);font-size:20px;margin-top:4px}

/* sourced claim */
.claim{border:1px solid var(--c-line);border-radius:var(--radius);padding:36px 36px 30px;background:var(--c-card);max-width:880px}
.claim .big{font-family:var(--f-display);font-weight:700;font-size:clamp(23px,2.6vw,30px);line-height:1.3;margin-bottom:16px}
.claim .src{font-size:18px;color:var(--c-muted);margin:0}

/* dark "what it doesn't do" box */
.dont{background:var(--c-dark);color:var(--c-on-dark);border-radius:4px;padding:56px 48px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}
.dont h2{margin:0}
.dont p{color:var(--c-on-dark-muted)}
.dont p:last-child{margin-bottom:0}
.dont b{color:var(--c-on-dark)}

/* price */
.pricebox{border:1px solid var(--c-line);border-radius:var(--radius);padding:36px 34px;background:var(--c-card)}
.pricebox .fig{font-family:var(--f-display);font-weight:700;font-size:68px;line-height:1}
.pricebox .fig .per{font-family:var(--f-body);font-size:23px;color:var(--c-text);font-weight:700}
.pricebox .terms{margin:14px 0 24px;color:var(--c-text);font-size:20px}
.pricebox .btn{width:100%}
.ticks{list-style:none;display:grid;gap:10px;margin:0 0 28px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:20px;line-height:1.5}
.ticks svg{width:22px;height:22px;color:var(--c-accent);margin-top:5px}
.pricerow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}

/* plain three across */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.three h3{font-size:25px;line-height:1.2}
.three p{color:var(--c-text);font-size:20px;margin:0}
.three p+p{margin-top:12px}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.box{border:1px solid var(--c-line);border-radius:var(--radius);padding:28px;background:var(--c-card)}
.box p:last-child{margin-bottom:0}

/* FAQ */
.faq{max-width:820px;border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:22px;line-height:1.35}
.faq .fqc{flex:none;width:18px;height:18px;transition:transform .4s ease}
.faq details[open] .fqc{transform:rotate(180deg)}
.faq details>p{margin:0 0 24px;color:var(--c-text);max-width:42em}

/* closing call to action */
.close{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.close h2{margin:0 0 8px}
.close p{margin:0;color:var(--c-on-dark);font-size:23px}
.closeact{display:flex;align-items:center;gap:8px}
.plink{color:inherit;text-decoration:underline;text-decoration-color:var(--c-line);text-underline-offset:4px}
.plink:hover{text-decoration-color:currentColor}

/* other industries strip */
.others{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.others a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--c-line);border-radius:var(--radius);padding:10px 16px;min-height:48px;color:var(--c-text);background:var(--c-card);text-decoration:none;font-weight:700;font-size:20px;transition:border-color .4s ease,background-color .4s ease}
.others a:hover{border-color:var(--c-accent);background:var(--c-accent-tint)}
.others .ico{width:22px;height:22px}

/* ---------------------------------------------------------------- mockups
   These draw a real phone and a real app, so they use the system UI font
   and the device's own rounded shape. Thin rules, no shadows. */
.phone{width:100%;max-width:380px;background:var(--c-device);border-radius:40px;padding:11px}
.screen{background:var(--c-screen);border-radius:30px;overflow:hidden;color:var(--c-text);font-family:var(--f-ui);line-height:1.4}
.ph-top{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 16px 12px;border-bottom:1px solid var(--c-line);background:var(--c-card)}
.ph-top .av{width:44px;height:44px;border-radius:50%;background:var(--c-bg-alt);color:var(--c-text);display:flex;align-items:center;justify-content:center;font:700 17px/1 var(--f-ui)}
.ph-top b{font-size:17px;line-height:1.2;font-weight:600}
.thread{display:flex;flex-direction:column;gap:9px;padding:14px 12px 18px;font-size:17px;line-height:1.4;min-height:440px}
.sys{align-self:center;font-size:17px;color:var(--c-muted);text-align:center;margin:2px 0 4px}
.sys.missed{color:var(--c-alert);font-weight:600}
.bub{max-width:86%;padding:9px 12px;border-radius:17px;margin:0}
.bub.in{align-self:flex-start;background:var(--c-bubble-in);border-bottom-left-radius:5px}
.bub.out{align-self:flex-end;background:var(--c-accent);color:var(--c-bubble-out-text);border-bottom-right-radius:5px}
.bub .lnk{text-decoration:underline;text-underline-offset:2px}
.note{align-self:flex-end;font-size:17px;color:var(--c-muted);margin:-4px 0 0}

/* slow, calm arrival of the hero thread. Opacity only, no movement. */
@media (prefers-reduced-motion:no-preference){
  .hero .thread>*{opacity:0;animation:arrive 1s ease forwards}
  .hero .thread>*:nth-child(1){animation-delay:.3s}
  .hero .thread>*:nth-child(2){animation-delay:1s}
  .hero .thread>*:nth-child(3){animation-delay:1.5s}
  .hero .thread>*:nth-child(4){animation-delay:2.6s}
  .hero .thread>*:nth-child(5){animation-delay:3.7s}
  .hero .thread>*:nth-child(6){animation-delay:4.8s}
  .hero .thread>*:nth-child(n+7){animation-delay:5.8s}
}
@keyframes arrive{to{opacity:1}}

/* inbox mockup */
.inbox{width:100%;max-width:460px;background:var(--c-screen);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;font-family:var(--f-ui);line-height:1.4}
.inbox .ibh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--c-line);background:var(--c-card);font-weight:700;font-size:19px}
.inbox .ibh span{font-weight:500;font-size:17px;color:var(--c-muted)}
.inbox ul{list-style:none}
.inbox li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--c-line)}
.inbox li:last-child{border-bottom:0}
.inbox .av{width:44px;height:44px;border-radius:50%;background:var(--c-accent-tint);color:var(--c-accent);display:flex;align-items:center;justify-content:center;font:700 17px/1 var(--f-ui)}
.inbox .nm{font-weight:600;font-size:18px;line-height:1.3;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inbox .src{font:500 17px/1.3 var(--f-ui);color:var(--c-muted)}
.inbox .sn{font-size:17px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox time{font-size:17px;color:var(--c-muted);align-self:start;padding-top:2px}

/* booking mockup */
.cal{width:100%;max-width:460px;background:var(--c-screen);border:1px solid var(--c-line);border-radius:var(--radius);padding:22px;font-family:var(--f-ui);line-height:1.4}
.cal .ct{font-weight:700;font-size:21px;margin-bottom:2px}
.cal .cs{font-size:17px;color:var(--c-muted);margin-bottom:16px}
.cal .days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:14px}
.cal .day{text-align:center;border:1px solid var(--c-line);border-radius:var(--radius);padding:8px 0;font-size:17px;line-height:1.3;color:var(--c-muted)}
.cal .day b{display:block;font-size:20px;color:var(--c-text)}
.cal .day.on{border-color:var(--c-accent);background:var(--c-accent-tint)}
.cal .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cal .slot{text-align:center;border:1px solid var(--c-line);border-radius:var(--radius);padding:10px 0;font-size:17px;font-weight:600}
.cal .slot.on{border-color:var(--c-highlight);background:var(--c-highlight);color:var(--c-highlight-text)}
.cal .slot.off{color:var(--c-muted);background:var(--c-bg-alt);border-color:var(--c-bg-alt);text-decoration:line-through}   /* taken: 7.6:1, still reads as gone */
.cal .conf{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-line);font-size:17px}
.cal .conf .bub{max-width:100%}

/* review request mockup */
.ask{width:100%;max-width:460px;background:var(--c-screen);border:1px solid var(--c-line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px;font-family:var(--f-ui);font-size:17px;line-height:1.45}
.askh{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--c-line);font-size:19px}
.stars{display:flex;gap:4px;color:var(--c-highlight)}
.stars svg{width:20px;height:20px}

/* legal pages */
.legal-body{max-width:760px;padding:56px 0 88px}
.legal-body h1{font-size:clamp(32px,4.4vw,46px)}
.legal-body h2{font-size:25px;margin-top:1.6em}
.legal-body ul{padding-left:1.2em;margin:0 0 1em}
.legal-body li{margin-bottom:.4em}

/* ---------------------------------------------------------------- footer */
footer{background:var(--c-dark);color:var(--c-on-dark);padding:64px 0 40px;font-size:19px;border-top:1px solid var(--c-on-dark-line)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
footer .fabout{margin-top:18px;max-width:30em}
footer b{display:block;color:var(--c-on-dark);font-family:var(--f-display);font-weight:700;margin-bottom:12px}
footer.on-dark .fcol a{display:block;color:var(--c-on-dark-muted);text-decoration:none;padding:5px 0}
footer.on-dark .fcol a:hover{color:var(--c-on-dark);text-decoration:underline}
footer .fine{grid-column:1/-1;border-top:1px solid var(--c-on-dark-line);padding-top:22px;font-size:18px}
footer.on-dark .fine a{color:var(--c-on-dark-muted)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1060px){
  .nav,.bar>.btn{display:none}
  .burger{display:inline-flex}
}
@media (max-width:900px){
  section{padding:64px 0}
  .hero{padding:48px 0 64px}
  .hero .grid,.row,.pricerow,.dont{grid-template-columns:minmax(0,1fr);gap:40px}
  .row>.pic,.row.flip>.pic{order:2}
  .three{grid-template-columns:minmax(0,1fr);gap:16px}
  .card{grid-template-columns:minmax(0,1fr);padding:24px 4px 26px}
  .card h3,.card .who,.card p:not(.who),.card .go{grid-column:1;grid-row:auto}
  .card .who{margin-bottom:12px}
  .duo{grid-template-columns:minmax(0,1fr)}
  .dont{padding:40px 28px;gap:20px}
  .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fgrid>div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  body{font-size:19px}
  .lede,.sh p,.close p{font-size:20px}
  .benefits p,.flow span,.three p,.card p,.ticks li,.pricebox .terms{font-size:19px}
  .card .who,.card p:not(.who){font-size:19px}
  .phone{max-width:100%}
  .wrap{padding:0 16px}
  .bar{min-height:72px}
  .acts .btn{width:100%}
  .phead{padding:44px 0 44px}
  .claim{padding:26px 22px 22px}
  .pricebox{padding:28px 22px}
  .pricebox .fig{font-size:54px}
  .phone{border-radius:36px;padding:10px}
  .screen{border-radius:27px}
  .thread{min-height:0}
  .inbox li{padding:12px 14px;gap:10px}
  .cal{padding:18px 14px}
  .faq summary h3{font-size:20px}
}