/*
Theme Name: Sokocode
Theme URI: https://sokocode.com/
Author: Imagistack
Author URI: https://sokocode.com/
Description: The Sokocode company and Kavita product site. Hand-written CSS,
  no framework, no build step and nothing fetched from a third party at run
  time -- the fonts are served from this theme. Generated from the design
  reference by site/theme/build-theme.py, so the markup here is identical to
  the one that was designed rather than a reconstruction of it.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sokocode
*/

/* ---------------------------------------------------------------------------
   GENERATED FILE. Everything below comes from site/design/index.tpl.html.
   Edit the reference and run build-theme.py; do not edit this file.
   --------------------------------------------------------------------------- */
@font-face{font-family:'Jakarta';src:url('assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('assets/fonts/noto-sans-rupee.woff2') format('woff2');font-weight:400 800;font-style:normal;unicode-range:U+20B9;font-display:swap}

/* Light only, deliberately. Turquoise primary, electric blue secondary, deep
   navy ink, on a turquoise-tinted white. Every text colour below clears WCAG
   AA on the ground it sits on: the accent is 4.6:1 on white and the brighter
   cyans are used only in gradients and on large fills, never as body text. */
.sk{
  --bg:#EAF7FB; --panel:#FFFFFF; --panel2:#D3EFF8; --band2:#DCE9FE;
  --ink:#062A40; --soft:#2F5B72; --dim:#5A8299; --rule:#BEE3F0; --rule2:#89C9E0;
  --acc:#0891B2; --accsoft:#CFF4FC; --acc2:#2563EB; --acc2soft:#DBEAFE; --navy:#06375A;
  --good:#047857; --goodsoft:#CCFBEF; --bad:#BE123C; --badsoft:#FFE4E6;
  --warn:#B45309; --warnsoft:#FEF0C7;
  --cyan:#06B6D4; --cyanlit:#22D3EE; --blue:#3B82F6;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --shadow:0 1px 3px rgba(6,55,90,.09);
  --shadow2:0 10px 30px -12px rgba(8,145,178,.34);
  background:var(--bg);color:var(--ink);
  font-family:'Jakarta',system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
.sk *,.sk *::before,.sk *::after{box-sizing:border-box}
.sk p{margin:0}
.wrap{max-width:1440px;margin:0 auto;padding-inline:clamp(1.15rem,3.4vw,3.2rem)}

.navstack{position:sticky;top:0;z-index:60}
.top{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.topin{display:flex;align-items:center;gap:.5rem;padding:1.05rem 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.68rem;margin-right:2.1rem;font-weight:800;font-size:1.42rem;letter-spacing:-.035em;color:var(--navy)}
.dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 3px 10px -3px rgba(8,145,178,.55)}
.tab{font:inherit;font-size:.985rem;font-weight:650;color:var(--soft);background:none;border:0;padding:.5rem 1rem;border-radius:9px;cursor:pointer;letter-spacing:-.012em}
.tab:hover{color:var(--acc);background:var(--accsoft)}
.tab[aria-current="page"]{color:var(--acc);background:var(--accsoft)}
.tab:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.topcta{margin-left:auto;display:flex;gap:.5rem;align-items:center}

.eyebrow{font-family:var(--mono);font-size:.685rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:.9rem}
.eyebrow.mute{color:var(--dim)}
h1{font-size:clamp(2.15rem,4.5vw,3.4rem);line-height:1.06;letter-spacing:-.035em;font-weight:800;margin:0 0 1.15rem;text-wrap:balance;color:var(--navy)}
h2{font-size:clamp(1.55rem,2.9vw,2.2rem);line-height:1.15;letter-spacing:-.03em;font-weight:800;margin:0 0 .85rem;text-wrap:balance;color:var(--navy)}
h3{font-size:1.03rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .4rem;color:var(--navy)}
.lead{font-size:clamp(1.01rem,1.4vw,1.11rem);color:var(--soft);max-width:70ch;line-height:1.62}
.subtag{font-size:clamp(1.16rem,1.95vw,1.44rem);line-height:1.34;letter-spacing:-.02em;font-weight:650;
  color:var(--soft);max-width:68ch;text-wrap:balance;margin:-.4rem 0 1.15rem}
.subtag b{color:var(--navy);font-weight:750}
.hd{max-width:74ch;margin-bottom:2rem}

.sec{padding-block:clamp(2.9rem,5.5vw,4.5rem);border-top:1px solid var(--rule)}
.sec.flush{border-top:0}
.sec.alt{background:var(--panel2);box-shadow:0 0 0 100vmax var(--panel2);clip-path:inset(0 -100vmax);border-top:0}
.sec.alt2{background:var(--band2);box-shadow:0 0 0 100vmax var(--band2);clip-path:inset(0 -100vmax);border-top:0}

.hero{padding-block:clamp(3rem,6vw,4.75rem) clamp(2.2rem,4vw,3.2rem)}
/* The gradient paints the container and a flat tint bleeds past it, so the
   hero reads as a panel with a band either side rather than one wash. That
   two-tone edge is deliberate. */
.band-hero{background:
   radial-gradient(1000px 380px at 12% -10%, rgba(6,182,212,.30), transparent 62%),
   radial-gradient(820px 340px at 88% 0%, rgba(37,99,235,.22), transparent 60%),
   linear-gradient(168deg,#DFF4FC 0%,#CFEEFA 48%,#DCE8FE 100%);
  box-shadow:0 0 0 100vmax #DFF1FA;clip-path:inset(0 -100vmax);border-top:0;
  /* cancel the container's own gutter so the panel runs the full 1440px --
     the same span as the top bar -- then put the gutter back as padding so
     the text keeps its inset. */
  margin-inline:calc(-1 * clamp(1.15rem,3.4vw,3.2rem));
  padding-inline:clamp(2rem,4.6vw,5rem)}

.btn{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:700;font-size:.875rem;
  padding:.68rem 1.2rem;border-radius:8px;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .12s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.b-pri{background:linear-gradient(135deg,var(--cyan),var(--acc2));color:#fff;box-shadow:var(--shadow2)}
.b-pri:hover{background:linear-gradient(135deg,var(--cyanlit),var(--blue))}
.b-gh{border-color:var(--rule2);color:var(--navy);background:#fff}
.b-gh:hover{border-color:var(--acc);color:var(--acc)}
.b-sm{padding:.46rem .88rem;font-size:.82rem}

.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cell{background:var(--panel);padding:1.5rem 1.45rem}
.cell p{color:var(--soft);font-size:.9rem;line-height:1.58}
.ico{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accsoft),var(--acc2soft));
  display:grid;place-items:center;margin-bottom:.8rem;border:1px solid var(--rule)}
.ico svg{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.scen{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin-bottom:1rem;box-shadow:var(--shadow)}
.scen-h{background:linear-gradient(135deg,#ECFAFE,#DCEAFE);padding:1rem 1.4rem;grid-column:1/-1;border-bottom:1px solid var(--rule)}
.scen-h b{font-size:.98rem;font-weight:750;letter-spacing:-.015em;color:var(--navy)}
.scen-h span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:.3rem;font-weight:700}
.scen-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--rule);grid-column:1/-1}
.half{padding:1.25rem 1.4rem}
.half.them{background:var(--badsoft)}
.half.us{background:var(--goodsoft)}
.half .tagline{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-bottom:.55rem}
.half.them .tagline{color:var(--bad)}
.half.us .tagline{color:var(--good)}
.half p{font-size:.9rem;color:var(--soft);line-height:1.56}
.half.us p b{color:var(--navy);font-weight:700}
.half.them p b{color:#BE123C;font-weight:700}

.badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.775rem;font-weight:600;color:var(--soft);
  background:#fff;border:1px solid var(--rule2);padding:.34rem .8rem;border-radius:99px;margin-bottom:1.4rem;box-shadow:var(--shadow)}
.badge b{color:var(--acc)}
.soon{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--warn);background:var(--warnsoft);border:1px solid rgba(138,98,6,.3);padding:.14rem .45rem;border-radius:4px;margin-left:.55rem;vertical-align:middle}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin-top:2rem;max-width:860px;box-shadow:var(--shadow)}
.pillar{background:rgba(255,255,255,.88);padding:.95rem 1.1rem}
.pillar b{display:block;font-size:.94rem;font-weight:750;letter-spacing:-.015em;color:var(--navy);margin-bottom:.15rem}
.pillar b i{font-style:normal;color:var(--acc)}
.pillar span{font-size:.79rem;color:var(--dim);line-height:1.45;display:block}
.onlyhd{font-family:var(--mono);font-size:.665rem;letter-spacing:.16em;text-transform:uppercase;color:var(--good);
  font-weight:700;margin:2rem 0 .8rem;display:flex;align-items:center;gap:.6rem}
.onlyhd::after{content:"";flex:1;height:1px;background:var(--rule2)}
.only{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:.5rem;max-width:900px}
.onlyi{display:flex;gap:.6rem;align-items:flex-start;background:rgba(255,255,255,.92);
  border:1px solid var(--rule2);border-left:3px solid var(--good);border-radius:8px;padding:.7rem .85rem}
.onlyi svg{width:14px;height:14px;flex:none;margin-top:.24rem;stroke:var(--good);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.onlyi b{display:block;font-size:.855rem;font-weight:700;letter-spacing:-.012em;color:var(--navy)}
.onlyi span{font-size:.775rem;color:var(--soft);line-height:1.42}
.onlyi em{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--warn);background:var(--warnsoft);border:1px solid rgba(138,98,6,.3);padding:.06rem .3rem;border-radius:3px;margin-left:.35rem;vertical-align:1px}

.heroacts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem;align-items:center}
.note{font-size:.79rem;color:var(--dim);margin-top:.85rem}

/* Announcement bar. Every competitor runs a permanent strikethrough sale here;
   ours says what is not finished. That contrast is the point. */
.anno{background:linear-gradient(135deg,var(--navy),#075985);color:#ECFAFE;font-size:.795rem;
  text-align:center;padding:.52rem 1rem;letter-spacing:-.005em}
.anno b{color:#67E8F9;font-weight:700}
.anno a{color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* Tabbed screenshot gallery -- BookingPress and Booknetic both use one; it turns
   four placeholders into one block instead of four more strips down the page. */
.shotnav{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.05rem}
.shotnav button{font:inherit;font-size:.8rem;font-weight:650;color:var(--soft);background:var(--panel);
  border:1px solid var(--rule);padding:.44rem .8rem;border-radius:8px;cursor:pointer}
.shotnav button:hover{color:var(--acc);border-color:var(--acc)}
.shotnav button[aria-pressed="true"]{background:linear-gradient(135deg,var(--cyan),var(--acc2));
  color:#fff;border-color:transparent}
.shotpane{display:none}
.shotpane.on{display:block}

/* Logo band, as text chips: the page is one self-contained file and must not
   fetch a remote asset, so nobody's trademark is copied here. */
.logos{display:flex;flex-wrap:wrap;gap:.42rem}
.lgo{border:1px solid var(--rule);background:var(--panel);border-radius:9px;padding:.42rem .78rem;
  font-size:.795rem;font-weight:650;color:var(--soft);box-shadow:var(--shadow)}
.lgo.more{background:none;border-style:dashed;color:var(--dim);font-weight:500}

/* FAQ on <details> -- no JavaScript, keyboard and screen-reader correct for free. */
.faq{border:1px solid var(--rule);border-radius:12px;background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:.92rem 1.15rem;font-weight:700;color:var(--navy);font-size:.915rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-weight:800;font-size:1.05rem;line-height:1;flex:none}
.faq details[open] summary{color:var(--acc)}
.faq details[open] summary::after{content:"‘2"}
.faq summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.faq .a{padding:0 1.15rem 1rem;color:var(--soft);font-size:.87rem;line-height:1.62;max-width:74ch}

/* Industry cards -- twelve of the thirty-three, on the home page where all three
   competitors put theirs. Amelia, BookingPress and Booknetic each place this grid
   high on the page; "industries" is the word all three use, and it survives a US
   reader in a way "trades" does not. */
.trades{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:.45rem}
.trade{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:.68rem .8rem;box-shadow:var(--shadow)}
.trade b{display:block;font-size:.83rem;color:var(--navy);font-weight:700;letter-spacing:-.012em}
.trade span{font-size:.715rem;color:var(--dim);line-height:1.4}

/* Closing call to action. The page used to end on an about-us section. */
.endcta{background:linear-gradient(150deg,var(--navy),#0E7490 55%,var(--cyan));border-radius:16px;
  padding:clamp(1.9rem,4vw,3rem);color:#ECFAFE;text-align:center;box-shadow:var(--shadow2)}
.endcta h2{color:#fff;margin-bottom:.7rem}
.endcta .lead{color:#CBEAF5;max-width:56ch;margin:0 auto 1.5rem}
.endcta .heroacts{justify-content:center}
.endcta .note{color:#9AD5EA;margin-top:1.1rem}
.endcta .btn.b-gh{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);color:#fff}

/* Three headline capabilities, lifted out of the sub-tagline so they are not
   nine bold runs inside a paragraph. */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:.5rem;
  max-width:760px;margin:0 0 1.15rem}
.trioi{background:rgba(255,255,255,.92);border:1px solid var(--rule);border-radius:11px;
  padding:.72rem .85rem;box-shadow:var(--shadow)}
.trioi b{display:block;font-size:.87rem;font-weight:750;letter-spacing:-.015em;color:var(--navy);
  margin-bottom:.1rem}
.trioi span{display:block;font-size:.765rem;color:var(--soft);line-height:1.42}
.trioi .soon{margin-left:0;margin-top:.35rem;display:inline-block}

/* The feature enumeration, as chips. Six lines of grey prose became one block
   the eye can graze instead of read. */
.inbox{display:flex;flex-wrap:wrap;gap:.34rem;max-width:760px;margin-bottom:1.15rem}
.inbox span{font-size:.775rem;font-weight:600;color:var(--soft);background:rgba(255,255,255,.9);
  border:1px solid var(--rule);border-radius:7px;padding:.3rem .6rem}
.inbox span.k{color:var(--acc);border-color:var(--accsoft);background:var(--accsoft)}
.inbox span.more{border-style:dashed;background:none;color:var(--dim);font-weight:500}

/* Two-column hero. Amelia and BookingPress both park a product shot beside the
   headline; ours is built in HTML rather than captured, because no screenshot
   of this product exists yet and a dashed grey box in the most valuable space
   on the site is worse than nothing. Collapses to one column under 900px, with
   the mockup FIRST on a phone -- a picture of the thing beats a paragraph
   about it on a 380px screen. */
.herogrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.5rem,3.5vw,2.8rem);align-items:center}
@media(max-width:900px){
  .herogrid{grid-template-columns:1fr;gap:1.7rem}
  .herogrid .heroshot{order:-1}
}
.herogrid.copyfirst .heroshot{order:0}
.heroshot .mock{transform:rotate(-.55deg)}
.heroshot .mock:nth-child(2){transform:rotate(.7deg);margin-top:-1.4rem;margin-left:1.6rem;
  position:relative;z-index:2}
.mocknote{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  margin-top:.7rem;padding:.5rem .7rem;border:1px solid var(--rule);border-radius:8px;
  background:rgba(255,255,255,.85);font-size:.73rem;color:var(--dim)}
.mocknote b{color:var(--good);font-weight:700}
.mockline{display:flex;justify-content:space-between;align-items:center;font-size:.775rem;
  padding:.45rem .55rem;border:1px solid var(--rule);border-radius:7px;background:#fff;margin-bottom:.4rem}
.mockline b{font-weight:650;color:var(--navy);font-size:.78rem}
.mockline em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--dim)}
.mocktot{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;
  padding-top:.6rem;border-top:1px dashed var(--rule2);font-size:.82rem;color:var(--navy);font-weight:700}

/* Utility bar. Replaces the announcement strip rather than stacking a third bar
   above the fold -- the "in build" line it carried is still the hero badge and
   the whole proof band, so nothing honest was lost. Not sticky: the nav is, and
   two sticky bars eat a phone screen. */
.util{background:var(--navy);color:#BEE6F5;font-size:.86rem}
.utilin{display:flex;align-items:center;gap:1.05rem;padding:.62rem 0;flex-wrap:wrap}
.utiltag{margin-right:auto;letter-spacing:-.004em}
.utiltag b{color:#67E8F9;font-weight:650}
.util a{color:#BEE6F5;text-decoration:none;white-space:nowrap}
.util a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.utillinks{display:flex;gap:.9rem;align-items:center}
.utilsoc{display:flex;gap:.72rem;align-items:center;padding-left:1.05rem;
  border-left:1px solid rgba(255,255,255,.22)}
.utilsoc a{display:block;line-height:0;opacity:.82}
.utilsoc a:hover{opacity:1}
.utilsoc svg{width:17px;height:17px;fill:currentColor;display:block}
.util a:focus-visible,.utilsoc a:focus-visible{outline:2px solid #67E8F9;outline-offset:2px;border-radius:3px}
@media(max-width:620px){.utiltag{display:none}.utilin{justify-content:center}}

/* Compatibility strip -- BookingPress runs one of these ("Drops into the site
   you already have") and it answers the first thing a WordPress buyer worries
   about. The page was silent on it. */
.compat{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center}
.compat span{font-size:.8rem;font-weight:650;color:var(--soft);background:var(--panel);
  border:1px solid var(--rule);border-radius:8px;padding:.4rem .8rem;box-shadow:var(--shadow)}

/* Notify capture. The one conversion this page can actually complete: nobody
   can buy yet, so every visitor who likes it currently leaves with nothing. */
.notify{display:flex;gap:.5rem;flex-wrap:wrap;max-width:520px;margin-top:1.1rem}
.notify input{flex:1 1 240px;font:inherit;font-size:.9rem;padding:.62rem .85rem;
  border:1px solid var(--rule2);border-radius:9px;background:#fff;color:var(--ink)}
.notify input::placeholder{color:var(--dim)}
.notify input:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}

/* Persistent call to action, as Amelia has. Hidden until the reader is past the
   hero, and never on a phone -- it would sit on top of the content. */
.sticky{position:fixed;right:1.15rem;bottom:5.4rem;z-index:70;display:none;gap:.5rem;
  align-items:center;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border:1px solid var(--rule);border-radius:12px;padding:.55rem .6rem .55rem .95rem;
  box-shadow:var(--shadow2)}
.sticky.on{display:flex}
.sticky b{font-size:.83rem;color:var(--navy);font-weight:700}
@media(max-width:760px){.sticky{display:none!important}}

/* Footer, absorbing the catalogue and the biography that used to be sections. */
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.6rem;
  margin-bottom:.4rem}
.footcol h4{font-size:.755rem;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);font-weight:700;margin:0 0 .6rem}
.footcol a{display:block;color:var(--soft);font-size:.83rem;text-decoration:none;margin-bottom:.34rem}
.footcol a:hover{color:var(--acc)}
.footcol p{font-size:.83rem;color:var(--soft);line-height:1.55}

/* The Kavita page is an inventory, not a second sales page. Amelia's features
   page filters cards by category and badges each with its licence tier;
   BookingPress lists ~60 cards in three tiers. Both are reference, not
   narrative -- the argument belongs on the home page and was being made twice. */
.fbar{display:grid;gap:.75rem;margin-bottom:1rem}
.fsearch{position:relative;max-width:460px}
.fsearch svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:16px;height:16px;
  stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round}
.fsearch input{width:100%;font:inherit;font-size:.9rem;padding:.6rem .85rem .6rem 2.3rem;
  border:1px solid var(--rule2);border-radius:10px;background:var(--panel);color:var(--ink)}
.fsearch input:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.fchips{display:flex;flex-wrap:wrap;gap:.35rem}
.fchip{font:inherit;font-size:.785rem;font-weight:650;color:var(--soft);background:var(--panel);
  border:1px solid var(--rule);padding:.36rem .72rem;border-radius:8px;cursor:pointer}
.fchip:hover{color:var(--acc);border-color:var(--acc)}
.fchip[aria-pressed="true"]{background:linear-gradient(135deg,var(--cyan),var(--acc2));color:#fff;border-color:transparent}
.fcount{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.8rem}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:.55rem}
.fcard{background:var(--panel);border:1px solid var(--rule);border-radius:11px;padding:.85rem .95rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.4rem}
.fcard.hide{display:none}
.fcard-h{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.fcard h3{font-size:.885rem;font-weight:700;letter-spacing:-.014em;margin:0;color:var(--navy);line-height:1.32}
.fcard p{font-size:.795rem;color:var(--soft);line-height:1.46;flex:1}
.fcard code{font-family:var(--mono);font-size:.92em;background:var(--bg);padding:.05rem .25rem;border-radius:4px}
.ftier{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:.16rem .42rem;border-radius:5px;flex:none;white-space:nowrap}
.t-free{color:var(--good);background:var(--goodsoft)}
.t-solo{color:var(--acc2);background:var(--acc2soft)}
.t-clinic{color:var(--acc);background:var(--accsoft)}
.t-practice{color:var(--navy);background:var(--panel2)}
.fdoc{font-size:.735rem;font-weight:650;color:var(--acc);text-decoration:none}
.fdoc:hover{text-decoration:underline;text-underline-offset:2px}
.fnone{display:none;padding:2rem 0;color:var(--soft);font-size:.9rem}
.fnone.on{display:block}
.ilink{color:var(--acc);text-decoration:underline;text-underline-offset:2px}

/* Spotlights. Neither Amelia nor BookingPress deep-dives on their features page
   -- both stop at a card grid. A grid answers "do you have X"; it never shows
   what X looks like working, which is the thing a buyer is actually scrolling
   for. Mockups are built in HTML: no screenshot of this product exists. */
.spot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center}
.spot.flip>*:first-child{order:2}
@media(max-width:860px){.spot,.spot.flip>*:first-child{grid-template-columns:1fr;order:0}}
.spot h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.025em;margin-bottom:.55rem}
.spot .lead{font-size:.955rem}
.spotpts{display:grid;gap:.45rem;margin-top:1rem}
.spotpt{display:flex;gap:.55rem;align-items:flex-start;font-size:.83rem;color:var(--soft);line-height:1.45}
.spotpt svg{width:13px;height:13px;flex:none;margin-top:.24rem;stroke:var(--good);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* A WhatsApp thread, drawn rather than screenshotted. */
.wa{background:#E9E2DA;border-radius:14px;padding:.9rem;display:grid;gap:.45rem;
  border:1px solid var(--rule2);box-shadow:var(--shadow2)}
.wab{max-width:82%;font-size:.79rem;line-height:1.42;padding:.5rem .65rem;border-radius:9px;
  background:#fff;color:#1F2937;box-shadow:0 1px 1px rgba(0,0,0,.07)}
.wab.me{background:#D9FDD3;justify-self:end}
.wab em{font-style:normal;display:block;font-family:var(--mono);font-size:.6rem;color:#6B7280;margin-top:.25rem}
.wab b{font-weight:700}

/* Value block -- BookingPress's "everything you'd pay extra for elsewhere". */
.valgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.55rem}
.valcol{background:var(--panel);border:1px solid var(--rule);border-radius:11px;padding:.9rem 1rem;
  box-shadow:var(--shadow)}
.valcol h4{font-size:.78rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);font-weight:700;margin:0 0 .6rem}
.valcol span{display:flex;gap:.45rem;font-size:.815rem;color:var(--soft);margin-bottom:.32rem;line-height:1.4}
.valcol span::before{content:"\2713";color:var(--good);font-weight:800;flex:none}

/* Guarantee badges, as BookingPress closes with. */
.guar{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:1.3rem}
.guar span{font-size:.76rem;font-weight:650;color:#CBEAF5;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.36rem .7rem}

/* Two comparison doors, and the feature-request prompt. */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.6rem}
.door{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--rule);
  border-radius:12px;padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.door:hover{border-color:var(--acc)}
.door b{display:block;font-size:.95rem;color:var(--navy);font-weight:750;margin-bottom:.3rem}
.door span{display:block;font-size:.82rem;color:var(--soft);line-height:1.45}
.door em{font-style:normal;color:var(--acc);font-size:.8rem;font-weight:650;display:block;margin-top:.55rem}
.fnone svg{width:38px;height:38px;stroke:var(--rule2);fill:none;stroke-width:1.6;display:block;margin-bottom:.7rem}

/* One-subscription band. Every competitor's price is a starting price -- an
   add-on shelf at LatePoint and BookingPress, a tier cliff at Amelia and
   Bookly. This says the number you saw is the number you pay, and it is worth
   a band rather than a bullet. */
.onesub{background:linear-gradient(135deg,var(--navy),#0E7490 58%,var(--cyan));border-radius:14px;
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.4rem,3.5vw,2.2rem);color:#ECFAFE;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:center;
  box-shadow:var(--shadow2);margin-bottom:1.7rem}
@media(max-width:760px){.onesub{grid-template-columns:1fr}}
.onesub h2{color:#fff;font-size:clamp(1.3rem,2.5vw,1.85rem);margin:0 0 .45rem;letter-spacing:-.03em}
.onesub h2 i{font-style:normal;color:#67E8F9}
.onesub p{font-size:.865rem;color:#CBEAF5;line-height:1.55;max-width:62ch;margin:0}
.onesub p b{color:#fff;font-weight:650}
.onesubx{display:grid;gap:.4rem;justify-items:end}
.onesubx span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#67E8F9;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);
  border-radius:7px;padding:.32rem .62rem;white-space:nowrap}
@media(max-width:760px){.onesubx{justify-items:start}}

/* Demo cards. Amelia gives you a thumbnail and one front-end link; BookingPress
   gives three panels per demo, which is the better idea and the one worth
   taking -- the admin is where booking software is actually judged. */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:.6rem}
.dcard{background:var(--panel);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.dcard.hide{display:none}
.dshot{aspect-ratio:16/10;background:linear-gradient(135deg,#EBFAFE,#DEEBFE);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}
.dshot svg{width:24px;height:24px;stroke:var(--rule2);fill:none;stroke-width:1.5}
.dshot span{font-family:var(--mono);font-size:.62rem;color:var(--dim);letter-spacing:.05em}
.dcard h3{font-size:.94rem;font-weight:750;letter-spacing:-.016em;margin:.85rem .95rem .3rem;color:var(--navy)}
.dcard p{font-size:.795rem;color:var(--soft);line-height:1.45;margin:0 .95rem .7rem;flex:1}
.dshows{display:flex;flex-wrap:wrap;gap:.25rem;margin:0 .95rem .8rem}
.dshows span{font-family:var(--mono);font-size:.615rem;letter-spacing:.04em;color:var(--acc);
  background:var(--accsoft);border-radius:5px;padding:.16rem .38rem}
.dlinks{display:flex;gap:1px;background:var(--rule);border-top:1px solid var(--rule);margin-top:auto}
.dl{flex:1;text-align:center;background:var(--panel);padding:.55rem .3rem;font-size:.775rem;
  font-weight:650;color:var(--soft);text-decoration:none}
.dl:hover{color:var(--acc);background:var(--accsoft)}
.dl.pri{color:var(--acc)}

/* Guarantee band. Amelia repeats "15-day money-back" twice on its pricing page
   and BookingPress puts "14-day" on every card and again at the close; ours is
   thirty and was mentioned once, in a footnote. */
.guarband{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:center;
  background:var(--goodsoft);border:1px solid rgba(12,122,82,.25);border-radius:14px;
  padding:1.15rem 1.35rem;margin-bottom:1.6rem}
@media(max-width:700px){.guarband{grid-template-columns:1fr}}
.guarband .n{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;letter-spacing:-.045em;color:var(--good);line-height:1}
.guarband .n span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;margin-top:.1rem}
.guarband h3{font-size:1.05rem;margin-bottom:.3rem;color:var(--navy)}
.guarband p{font-size:.855rem;color:var(--soft);line-height:1.55;margin:0}

/* Payment rail + tax note, as both of them carry. */
.payrow{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center;margin-top:1.1rem}
.payrow span{font-size:.775rem;font-weight:650;color:var(--soft);background:var(--panel);
  border:1px solid var(--rule);border-radius:7px;padding:.34rem .66rem}

/* Plan cards, Amelia-style: the domain count is the first line on the card and
   the feature list is long. Theirs runs 17-19 bullets; the difference here is
   that a limits block sits above the list, because we tier on practitioners and
   they tier on domains -- so the number that decides your plan has to be the
   one you see first. */
.plimits{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;margin:.9rem 0 .85rem;
  padding:.7rem .8rem;background:var(--bg);border:1px solid var(--rule);border-radius:9px}
.plimits dt{font-size:.775rem;color:var(--dim)}
.plimits dd{margin:0;font-size:.775rem;font-weight:750;color:var(--navy);text-align:right;
  font-variant-numeric:tabular-nums}
.plan.hot .plimits{background:#fff;border-color:var(--accsoft)}
.pnew{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--acc);background:var(--accsoft);border-radius:4px;padding:.08rem .28rem;
  margin-left:.3rem;vertical-align:middle}
.psoon{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--warn);background:var(--warnsoft);border-radius:4px;padding:.08rem .28rem;
  margin-left:.3rem;vertical-align:middle}
.plan ul li.off{color:var(--rule2);text-decoration:line-through}

/* Per-competitor migration cards. The page named all four incumbents and then
   said the same sentence about them, which is the shape of a page that has not
   done the work. Each one leaves for a different reason. */
.mig{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:.6rem}
.migc{background:var(--panel);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.migh{padding:.85rem 1rem;border-bottom:1px solid var(--rule);
  background:linear-gradient(135deg,#ECFAFE,#DCEAFE)}
.migh b{display:block;font-size:1rem;font-weight:750;letter-spacing:-.02em;color:var(--navy)}
.migh span{font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.migb{padding:.85rem 1rem;flex:1}
.migb p{font-size:.815rem;color:var(--soft);line-height:1.5;margin:0 0 .7rem}
.migb .why{font-size:.79rem;color:var(--navy);background:var(--accsoft);border-left:2px solid var(--acc);
  padding:.45rem .6rem;border-radius:0 6px 6px 0;line-height:1.45}
.migb .why b{color:var(--acc)}

/* The honesty block. Nobody in this market publishes one, which is exactly why
   it belongs on the page that asks you to trust us. Styled as a notice rather
   than a feature grid so it does not read as a boast. */
.nottrue{background:var(--warnsoft);border:1px solid rgba(138,98,6,.28);border-radius:14px;
  padding:clamp(1.3rem,3vw,2rem)}
.nottrue h3{color:var(--warn);font-size:1.06rem;margin-bottom:.5rem}
.nottrue ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}
.nottrue li{font-size:.845rem;color:var(--soft);line-height:1.5;display:flex;gap:.55rem}
.nottrue li::before{content:"\2013";color:var(--warn);font-weight:800;flex:none}
.nottrue li b{color:var(--navy);font-weight:700}

/* Footer-reachable pages. They are not in the top nav -- six tabs is already the
   limit of a nav a person will read -- but they are real pages, not anchors. */
.draft{background:var(--warnsoft);border:1px solid rgba(138,98,6,.28);border-radius:11px;
  padding:.85rem 1rem;margin-bottom:1.6rem;font-size:.845rem;color:var(--soft);line-height:1.55}
.draft b{color:var(--warn)}
.legaldoc{max-width:74ch}
.legaldoc h3{font-size:1.02rem;margin:1.8rem 0 .45rem;color:var(--navy)}
.legaldoc h3:first-child{margin-top:0}
.legaldoc p{font-size:.875rem;color:var(--soft);line-height:1.68;margin:0 0 .7rem}
.legaldoc p b{color:var(--navy);font-weight:650}
.legaldoc ul{margin:.2rem 0 .9rem;padding-left:1.1rem}
.legaldoc li{font-size:.875rem;color:var(--soft);line-height:1.62;margin-bottom:.3rem}
.updated{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);margin-bottom:1.5rem}
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.55rem}
.route{background:var(--panel);border:1px solid var(--rule);border-radius:11px;padding:1rem;
  box-shadow:var(--shadow)}
.route b{display:block;font-size:.93rem;color:var(--navy);font-weight:750;margin-bottom:.25rem}
.route a{color:var(--acc);font-size:.86rem;font-weight:650;text-decoration:none;display:block;margin-bottom:.4rem}
.route span{display:block;font-size:.805rem;color:var(--soft);line-height:1.5}
.route em{font-style:normal;display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--good);margin-top:.5rem}
.cform{display:grid;gap:.55rem;max-width:520px}
.cform label{font-size:.79rem;font-weight:650;color:var(--navy)}
.cform input,.cform select,.cform textarea{font:inherit;font-size:.885rem;padding:.58rem .8rem;
  border:1px solid var(--rule2);border-radius:9px;background:#fff;color:var(--ink);width:100%}
.cform textarea{min-height:110px;resize:vertical}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}

/* Documentation hub. A docs landing page whose only content is nine category
   cards makes you click before it can help; the search index is the page. */
.hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:.55rem;margin-bottom:1.7rem}
.hub{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--rule);
  border-radius:12px;padding:1.05rem 1.15rem;box-shadow:var(--shadow)}
.hub:hover{border-color:var(--acc)}
.hub .ico{margin-bottom:.6rem}
.hub b{display:block;font-size:.95rem;color:var(--navy);font-weight:750;margin-bottom:.22rem}
.hub span{display:block;font-size:.805rem;color:var(--soft);line-height:1.48}
.hub em{font-style:normal;display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--acc);margin-top:.6rem}
.idx{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow)}
.idxi{background:var(--panel);padding:.7rem .95rem;display:grid;grid-template-columns:1fr auto;gap:.7rem;
  align-items:baseline}
.idxi.hide{display:none}
.idxi b{font-size:.865rem;font-weight:650;color:var(--navy)}
.idxi span{display:block;font-size:.775rem;color:var(--dim);line-height:1.45;margin-top:.12rem}
.idxi em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc);background:var(--accsoft);border-radius:5px;padding:.14rem .4rem;
  white-space:nowrap}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:.6rem}
.vid{background:var(--panel);border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.vidshot{aspect-ratio:16/9;background:linear-gradient(135deg,#EBFAFE,#DEEBFE);display:flex;
  align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--rule)}
.vidshot svg{width:34px;height:34px;fill:var(--acc);opacity:.55}
.vidshot i{position:absolute;right:.5rem;bottom:.5rem;font-style:normal;font-family:var(--mono);
  font-size:.63rem;background:rgba(11,58,91,.82);color:#fff;padding:.1rem .34rem;border-radius:4px}
.vid b{display:block;font-size:.875rem;font-weight:700;color:var(--navy);margin:.7rem .85rem .2rem;line-height:1.35}
.vid span{display:block;font-size:.775rem;color:var(--soft);margin:0 .85rem .85rem;line-height:1.45}
.apitbl code{font-family:var(--mono);font-size:.88em}
.meth{font-family:var(--mono);font-size:.63rem;font-weight:800;letter-spacing:.06em;padding:.12rem .36rem;
  border-radius:4px}
.m-get{color:var(--good);background:var(--goodsoft)}
.m-post{color:var(--acc2);background:var(--acc2soft)}
pre.code{background:var(--navy);color:#D6F1FA;border-radius:10px;padding:.9rem 1rem;overflow-x:auto;
  font-family:var(--mono);font-size:.755rem;line-height:1.6;margin:.6rem 0 0}
pre.code b{color:#67E8F9;font-weight:600}
pre.code i{color:#86B9CF;font-style:normal}

/* Product sub-navigation. The top bar is the company; this bar appears only
   inside a product and says which one you are in. */
.subnav{display:none;background:var(--panel);border-bottom:1px solid var(--rule)}
.subnav.on{display:block}
.subin{display:flex;align-items:center;gap:.3rem;padding:.62rem 0;flex-wrap:wrap}
.subname{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--acc);margin-right:1.1rem}
.stab{font:inherit;font-size:.895rem;font-weight:600;color:var(--soft);background:none;border:0;
  padding:.4rem .8rem;border-radius:8px;cursor:pointer}
.stab:hover{color:var(--acc);background:var(--accsoft)}
.stab[aria-current="page"]{color:var(--acc);background:var(--accsoft);font-weight:700}
.stab:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.logo{cursor:pointer;transition:opacity .12s}
.logo:hover{opacity:.78}
.logo:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}

/* The five things a buyer scans for, each with the fact underneath it. The
   headline is the word they are looking for; the line below is why we are
   allowed to use it on a page that also publishes what is not built. */
.props{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.6rem}
.prop{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:1.15rem 1.2rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.45rem}
.prop .ico{margin-bottom:.15rem}
.prop b{font-size:1rem;font-weight:750;letter-spacing:-.018em;color:var(--navy);line-height:1.28}
.prop span{font-size:.815rem;color:var(--soft);line-height:1.5;flex:1}
.prop em{font-style:normal;font-family:var(--mono);font-size:.645rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--acc);background:var(--accsoft);
  border-radius:5px;padding:.16rem .42rem;align-self:flex-start}

/* The name, given room. A brand story earns a band of its own or it reads as a
   footnote, and this one is the argument the whole company rests on. */
.namebox{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
@media(max-width:760px){.namebox{grid-template-columns:1fr}}
.word{font-size:clamp(3rem,7vw,5.4rem);font-weight:800;letter-spacing:-.055em;line-height:.92;
  color:var(--acc);opacity:.14}
.word span{display:block;opacity:1;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--acc);margin-top:.7rem}

/* Exactly three columns at desktop. auto-fit gave four at 1440px, which left a
   five-cell section sitting as 4 + 1 with three empty slots beside it. */
.g3f{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:920px){.g3f{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g3f{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   SALES AND SUPPORT AGENT.
   The panel is real; the brain is a local keyword map, because a static file
   cannot hold an API key -- anything in this page is readable by anyone who
   opens it. In production the browser must call OUR endpoint and the endpoint
   holds the key: /wp-json/sokocode/v1/agent. See the note in the panel footer.
   ------------------------------------------------------------------------- */
.aglaunch{position:fixed;right:1.15rem;bottom:1.15rem;z-index:80;display:flex;align-items:center;
  gap:.55rem;border:0;cursor:pointer;font:inherit;font-size:.875rem;font-weight:700;color:#fff;
  padding:.72rem 1.1rem .72rem .95rem;border-radius:999px;
  background:linear-gradient(135deg,var(--cyan),var(--acc2));
  box-shadow:0 12px 30px -10px rgba(8,145,178,.7)}
.aglaunch:hover{background:linear-gradient(135deg,var(--cyanlit),var(--blue))}
.aglaunch svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aglaunch i{font-style:normal;width:7px;height:7px;border-radius:50%;background:#6EE7B7;
  box-shadow:0 0 0 3px rgba(110,231,183,.28)}
.aglaunch.hide{display:none}

.agent{position:fixed;right:1.15rem;bottom:1.15rem;z-index:81;width:min(392px,calc(100vw - 2.3rem));
  max-height:min(680px,calc(100vh - 2.3rem));display:none;flex-direction:column;
  background:var(--panel);border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  box-shadow:0 26px 60px -18px rgba(6,55,90,.42)}
.agent.on{display:flex}
.aghead{background:linear-gradient(135deg,var(--navy),var(--acc));color:#fff;padding:.85rem 1rem;
  display:flex;align-items:center;gap:.6rem}
.aghead b{font-size:.95rem;font-weight:750;display:block}
.aghead span{font-size:.735rem;color:#BEE6F5;display:block}
.agclose{margin-left:auto;background:rgba(255,255,255,.16);border:0;color:#fff;cursor:pointer;
  width:26px;height:26px;border-radius:7px;font-size:1rem;line-height:1}
.agclose:hover{background:rgba(255,255,255,.28)}
.agbody{flex:1;overflow-y:auto;padding:.95rem 1rem;display:flex;flex-direction:column;gap:.55rem;
  background:var(--bg)}
.agmsg{max-width:88%;font-size:.83rem;line-height:1.5;padding:.6rem .75rem;border-radius:11px;
  background:var(--panel);border:1px solid var(--rule);color:var(--soft);box-shadow:var(--shadow)}
.agmsg b{color:var(--navy)}
.agmsg.me{align-self:flex-end;background:linear-gradient(135deg,var(--cyan),var(--acc2));color:#fff;
  border-color:transparent}
.agmsg.me b{color:#fff}
.agmsg .agjump{display:inline-block;margin-top:.5rem;font-size:.755rem;font-weight:700;color:var(--acc);
  background:var(--accsoft);border:0;border-radius:7px;padding:.28rem .6rem;cursor:pointer;font-family:inherit}
.agmsg .agjump:hover{background:var(--acc);color:#fff}
.agchips{display:flex;flex-wrap:wrap;gap:.3rem;padding:.6rem 1rem 0;background:var(--bg)}
.agchips button{font:inherit;font-size:.735rem;font-weight:600;color:var(--acc);background:var(--panel);
  border:1px solid var(--rule2);border-radius:999px;padding:.28rem .62rem;cursor:pointer}
.agchips button:hover{background:var(--accsoft)}
.agform{display:flex;gap:.4rem;padding:.75rem 1rem;border-top:1px solid var(--rule);background:var(--panel)}
.agform input{flex:1;font:inherit;font-size:.85rem;padding:.55rem .75rem;border:1px solid var(--rule2);
  border-radius:9px;background:var(--panel);color:var(--ink)}
.agform input:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.agform button{border:0;background:linear-gradient(135deg,var(--cyan),var(--acc2));color:#fff;
  border-radius:9px;padding:0 .85rem;cursor:pointer;font-weight:700;font-size:.85rem}
.agfoot{padding:.55rem 1rem .7rem;background:var(--panel);border-top:1px solid var(--rule);
  font-size:.7rem;color:var(--dim);line-height:1.45}
.agfoot b{color:var(--warn)}
@media(max-width:760px){.sticky{display:none!important}}

/* ---------------------------------------------------------------------------
   DRAWN SCREENSHOTS. No screenshot of this product exists, so every "image" on
   this site is built from the same components the product uses. They cost
   nothing to keep accurate and they cannot show a version that never shipped.
   ------------------------------------------------------------------------- */
.ss{border:1px solid var(--rule2);border-radius:13px;overflow:hidden;background:var(--panel);
  box-shadow:var(--shadow2)}
.ssbar{display:flex;align-items:center;gap:.38rem;padding:.6rem .85rem;
  background:linear-gradient(135deg,#F4F9FC,#E9F3F8);border-bottom:1px solid var(--rule)}
.ssbar i{width:9px;height:9px;border-radius:50%;background:var(--rule2);display:block}
.ssbar span{font-family:var(--mono);font-size:.665rem;color:var(--dim);margin-left:.5rem}
.ssbody{padding:1.05rem 1.15rem;display:grid;gap:.8rem}
.sslab{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);font-weight:700}

.wzsteps{display:flex;gap:.28rem;align-items:center;flex-wrap:wrap}
.wzstep{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.24rem .55rem;border-radius:999px;border:1px solid var(--rule);color:var(--dim);background:var(--panel)}
.wzstep.done{color:var(--good);border-color:transparent;background:var(--goodsoft)}
.wzstep.now{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--cyan),var(--acc2));font-weight:700}
.wzcards{display:grid;grid-template-columns:repeat(3,1fr);gap:.42rem}
.wzc{border:1px solid var(--rule);border-radius:9px;padding:.55rem .65rem;background:var(--panel)}
.wzc.sel{border-color:var(--acc);background:var(--accsoft);box-shadow:0 0 0 3px var(--accsoft)}
.wzc b{display:block;font-size:.755rem;color:var(--navy);font-weight:700;letter-spacing:-.01em}
.wzc span{font-size:.635rem;color:var(--dim);font-family:var(--mono)}
.wzcal{display:grid;grid-template-columns:repeat(7,1fr);gap:.26rem}
.wzd{text-align:center;font-family:var(--mono);font-size:.635rem;padding:.32rem 0;border-radius:7px;
  border:1px solid var(--rule);color:var(--soft);background:var(--panel)}
.wzd.off{opacity:.32}
.wzd.on{background:linear-gradient(135deg,var(--cyan),var(--acc2));color:#fff;border-color:transparent;font-weight:700}
.wzsum{display:flex;justify-content:space-between;align-items:center;padding:.55rem .7rem;
  border-radius:9px;background:var(--bg);border:1px solid var(--rule);font-size:.755rem;color:var(--soft)}
.wzsum b{color:var(--navy)}

.ssstats{display:grid;grid-template-columns:repeat(4,1fr);gap:.42rem}
.ssst{border:1px solid var(--rule);border-radius:9px;padding:.5rem .6rem;background:var(--panel)}
.ssst b{display:block;font-size:1.02rem;font-weight:800;color:var(--navy);letter-spacing:-.028em}
.ssst span{font-size:.6rem;color:var(--dim);font-family:var(--mono)}
.ssst.good b{color:var(--good)}

.tl{display:grid;gap:.34rem}
.tlr{display:grid;grid-template-columns:46px 1fr auto;gap:.6rem;align-items:center;padding:.45rem .65rem;
  border:1px solid var(--rule);border-radius:9px;background:var(--panel);font-size:.755rem}
.tlr.now{border-color:var(--acc);box-shadow:0 0 0 3px var(--accsoft)}
.tlr time{font-family:var(--mono);font-size:.665rem;color:var(--dim)}
.tlr b{color:var(--navy);font-weight:650}
.tlr em{font-style:normal;font-family:var(--mono);font-size:.6rem;padding:.14rem .4rem;border-radius:5px}
.st-ok{color:var(--good);background:var(--goodsoft)}
.st-warn{color:var(--warn);background:var(--warnsoft)}
.st-open{color:var(--acc);background:var(--accsoft)}
.st-bad{color:var(--bad);background:var(--badsoft)}
.spark{width:100%;height:38px;display:block}

/* Tiny drawn UI on every demo card and video thumbnail. */
.dshot{position:relative}
.mini{position:absolute;inset:0;padding:.62rem;display:flex;flex-direction:column;gap:.3rem}
.minibar{display:flex;gap:.2rem;align-items:center}
.minibar i{width:5px;height:5px;border-radius:50%;background:var(--rule2);display:block}
.minibar u{flex:1;height:6px;border-radius:3px;background:var(--rule);margin-left:.32rem;text-decoration:none}
.minichips{display:flex;gap:.2rem}
.minichips u{height:10px;border-radius:4px;background:var(--rule);text-decoration:none;flex:1}
.minichips u.on{background:var(--cat,var(--acc))}
.minigrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem;flex:1}
.minigrid u{border-radius:4px;background:#fff;border:1px solid var(--rule);text-decoration:none}
.minigrid u.on{background:var(--cat,var(--acc));border-color:transparent}
.minigrid u.off{opacity:.35}
.dcard[data-cat="health"] .mini{--cat:var(--acc)}
.dcard[data-cat="beauty"] .mini{--cat:var(--acc2)}
.dcard[data-cat="fitness"] .mini{--cat:#0E7490}
.dcard[data-cat="pro"] .mini{--cat:#4F46E5}
.dcard[data-cat="start"] .mini{--cat:var(--good)}
.vidshot .mini{padding:.7rem;opacity:.55}
.vidshot svg{position:relative;z-index:2;filter:drop-shadow(0 4px 10px rgba(6,55,90,.3))}

/* Domain selector on the plan card. Amelia puts one on its top two tiers; the
   difference is that theirs DEFINES the tier and ours only adjusts it -- the
   tier is still decided by practitioners, which is the number that means
   something about a business. */
.dsel{margin-top:.55rem}
.dsel select{width:100%;font:inherit;font-size:.83rem;font-weight:650;color:var(--navy);
  padding:.44rem .6rem;border:1px solid var(--rule2);border-radius:8px;background:var(--panel);
  cursor:pointer}
.dsel select:hover{border-color:var(--acc)}
.dsel select:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.dfix{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.79rem;
  color:var(--dim);padding:.44rem .6rem;border:1px dashed var(--rule2);border-radius:8px}
.dfix b{color:var(--navy);font-weight:700}
.plan.hot .dsel select{border-color:var(--accsoft)}


/* Every card carries the same list, so the four columns end level and the
   comparison happens inside one row instead of in a table further down. */
.plans{align-items:stretch}
.plan{display:flex;flex-direction:column}
.plan ul{flex:1}
.plan ul li.off{color:var(--rule2);text-decoration:line-through;text-decoration-thickness:1px}
.plan ul li.off b,.plan ul li.off code{color:inherit;font-weight:inherit}
.plan ul li.off .soon{opacity:.4}

/* The mark is a market stall -- soko is Swahili for market. A canopy, a counter
   and a way in, which is the whole of what a market needs and what the software
   is for. Legible at 26px and as a favicon, which an abstract shape is not. */
.dot{display:grid;place-items:center;padding:0}
.dot svg{width:16px;height:16px;fill:#fff;display:block}
.dot svg .cut{fill:var(--acc)}

/* TWO MARKS, ONE SYSTEM. The company mark is the full turquoise-to-blue
   spectrum; each product takes a single colour out of it -- Kavita is the
   turquoise end, so the next plugin can be the blue one without either looking
   borrowed.

   Kavita's glyph is three rows with the middle one solid. A day's rows and a
   poem's lines are the same shape -- kavita is Sanskrit for poem -- and the
   solid row is the slot that cannot be sold twice. */
.kdot{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cyanlit),var(--acc));
  box-shadow:0 2px 8px -3px rgba(8,145,178,.6)}
.kdot svg{width:14px;height:14px;fill:#fff;display:block}
.subname{display:inline-flex;align-items:center;gap:.5rem}
.klock{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem;
  letter-spacing:-.03em;color:var(--navy)}
.klock .kdot{width:26px;height:26px;border-radius:8px}
.klock .kdot svg{width:17px;height:17px}

/* An icon on every card. Seventy-eight text-only cells is a wall whatever the
   copy says; a mark at the top of each gives the eye somewhere to land and
   turns a paragraph into a card. Stroke-only, so they take the accent and stay
   readable at 18px. */
.cico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:.7rem;
  background:linear-gradient(135deg,var(--accsoft),var(--acc2soft));border:1px solid var(--rule)}
.cico svg{width:18px;height:18px;fill:none;stroke:var(--acc);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* Comparison bars. A number in a sentence is read; a bar against two shorter
   bars is understood before it is read, and this one is a direct hit. */
.bars{display:grid;gap:.6rem;max-width:520px}
.bar{display:grid;grid-template-columns:112px 1fr auto;gap:.75rem;align-items:center;font-size:.83rem}
.bar span{color:var(--soft);font-weight:650}
.bar u{height:26px;border-radius:7px;text-decoration:none;display:block;
  background:linear-gradient(90deg,var(--rule2),var(--rule2))}
.bar.us u{background:linear-gradient(90deg,var(--cyan),var(--acc2))}
.bar b{font-family:var(--mono);font-size:.78rem;color:var(--dim);white-space:nowrap}
.bar.us span,.bar.us b{color:var(--acc)}

/* A line worth stopping on, given room to be stopped on. */
.pull{border-left:3px solid var(--acc);padding:.15rem 0 .15rem 1.15rem;margin:1.6rem 0;
  font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.44;letter-spacing:-.018em;
  font-weight:650;color:var(--navy);max-width:56ch}
.pull em{font-style:normal;color:var(--acc)}

/* Capability shape. Sixty-four cards is a list; sixty-four split across eight
   groups with the free share shaded is the shape of a product, and it answers
   "what is this actually for" before anybody scrolls. */
.shape{display:grid;gap:.5rem;max-width:640px}
.shrow{display:grid;grid-template-columns:150px 1fr auto;gap:.8rem;align-items:center;font-size:.83rem}
.shrow>span{color:var(--soft);font-weight:650}
.shbar{height:24px;border-radius:7px;background:var(--accsoft);overflow:hidden;display:flex}
.shbar u{text-decoration:none;display:block;height:100%}
.shbar u.paid{background:linear-gradient(90deg,var(--cyan),var(--acc2))}
.shbar u.free{background:var(--good)}
.shrow b{font-family:var(--mono);font-size:.75rem;color:var(--dim);white-space:nowrap}
.shkey{display:flex;gap:1rem;flex-wrap:wrap;font-size:.755rem;color:var(--dim);margin-top:.8rem}
.shkey span{display:flex;align-items:center;gap:.4rem}
.shkey i{width:11px;height:11px;border-radius:3px;display:block}

/* Documentation index, as a map instead of a list. */
.dsecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.5rem;margin-bottom:1.5rem}
.dsec{background:var(--panel);border:1px solid var(--rule);border-radius:11px;padding:.75rem .85rem;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:.65rem}
.dsec b{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;
  background-clip:text;color:transparent;min-width:1.6rem}
.dsec span{font-size:.79rem;color:var(--soft);font-weight:650;line-height:1.3}

/* The week, as a week. Five moments on one strip, each with what it cost. */
.week{border:1px solid var(--rule);border-radius:13px;background:var(--panel);padding:1.1rem 1.2rem;
  box-shadow:var(--shadow);margin-bottom:1.6rem}
.wkline{position:relative;height:3px;background:var(--rule);border-radius:2px;margin:2.6rem 0 .3rem}
.wkpt{position:absolute;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.4rem}
.wkpt i{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--acc2));
  border:3px solid var(--panel);box-shadow:0 0 0 2px var(--acc2soft);display:block;order:2}
.wkpt em{font-style:normal;position:absolute;bottom:1.4rem;white-space:nowrap;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.wkpt b{position:absolute;top:1.4rem;white-space:nowrap;font-size:.74rem;font-weight:750;color:var(--bad)}
.wkpt.ok b{color:var(--good)}
.wkfoot{display:flex;justify-content:space-between;gap:1rem;margin-top:2.6rem;padding-top:.8rem;
  border-top:1px dashed var(--rule2);font-size:.8rem;color:var(--soft)}
.wkfoot b{color:var(--navy)}
@media(max-width:760px){.week{display:none}}

/* What crosses over, per competitor -- a ring rather than a sentence, because
   "eight of eleven things move" is a proportion and proportions are seen. */
.ring{display:flex;align-items:center;gap:.75rem;margin:0 1rem .9rem;padding-top:.8rem;
  border-top:1px dashed var(--rule2)}
.ring svg{width:44px;height:44px;flex:none;transform:rotate(-90deg)}
.ring .track{stroke:var(--rule);stroke-width:5;fill:none}
.ring .fill{stroke:url(#rg);stroke-width:5;fill:none;stroke-linecap:round}
.ring b{display:block;font-size:.8rem;color:var(--navy);font-weight:750;line-height:1.25}
.ring span{display:block;font-size:.735rem;color:var(--dim);line-height:1.35}

/* The licence expiry, as a line rather than a paragraph. */
.tline{border:1px solid var(--rule);border-radius:13px;background:var(--panel);padding:1.2rem 1.3rem;
  box-shadow:var(--shadow);margin-top:1.1rem}
.tlbar{display:flex;height:30px;border-radius:8px;overflow:hidden;border:1px solid var(--rule)}
.tlbar u{text-decoration:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.tlbar u.paid{flex:5;background:linear-gradient(90deg,var(--cyan),var(--acc2));color:#fff}
.tlbar u.after{flex:5;background:var(--goodsoft);color:var(--good)}
.tlmarks{display:flex;margin-top:.5rem;font-size:.75rem;color:var(--soft)}
.tlmarks div{flex:5}
.tlmarks div:last-child{text-align:right}
.tlmarks b{color:var(--navy)}
.tlnote{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--rule2);font-size:.8rem;
  color:var(--soft);line-height:1.55}
.tlnote b{color:var(--bad)}

/* A glyph on each industry card, so twelve cards stop looking identical. */
.trade{position:relative;padding-left:2.9rem}
.trade svg{position:absolute;left:.85rem;top:.78rem;width:19px;height:19px;fill:none;
  stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}

/* Honesty, as a meter. A list of things that have not happened is easy to skim
   past; three mostly-empty bars are not. */
.meter{display:grid;gap:.7rem;max-width:520px;margin-top:1.2rem}
.mrow{display:grid;grid-template-columns:132px 1fr auto;gap:.8rem;align-items:center;font-size:.83rem}
.mrow>span{color:var(--soft);font-weight:650}
.mtrack{height:22px;border-radius:7px;background:var(--warnsoft);overflow:hidden}
.mtrack u{display:block;height:100%;text-decoration:none;background:linear-gradient(90deg,var(--cyan),var(--acc2))}
.mrow b{font-family:var(--mono);font-size:.73rem;color:var(--warn);white-space:nowrap}

/* Plan ladder -- four bars rising, so a teaser card shows the shape of the
   ladder without repeating the whole pricing table. */
.ladder{display:flex;align-items:flex-end;gap:.4rem;height:74px;margin:1rem 0 .3rem}
.ladder div{flex:1;display:grid;justify-items:center;gap:.35rem}
.ladder u{display:block;width:100%;border-radius:6px 6px 0 0;text-decoration:none;
  background:var(--accsoft)}
.ladder div.on u{background:linear-gradient(180deg,var(--cyan),var(--acc2))}
.ladder span{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim)}
.ladder div.on span{color:var(--acc);font-weight:700}

/* A dial for the support clock. */
.dial{display:flex;align-items:center;gap:.8rem;margin-top:.9rem;padding-top:.8rem;
  border-top:1px dashed var(--rule2)}
.dial svg{width:52px;height:52px;flex:none;transform:rotate(-90deg)}
.dial .dt{stroke:var(--rule);stroke-width:6;fill:none}
.dial .df{stroke:url(#rg);stroke-width:6;fill:none;stroke-linecap:round}
.dial b{display:block;font-size:.86rem;color:var(--navy);font-weight:750}
.dial span{display:block;font-size:.77rem;color:var(--soft);line-height:1.4}

/* Legal pages: a summary box, and numbers in the margin. */
.gist{background:var(--accsoft);border:1px solid var(--rule2);border-radius:12px;
  padding:1rem 1.15rem;margin-bottom:1.5rem;display:flex;gap:.85rem;align-items:flex-start}
.gist svg{width:20px;height:20px;flex:none;margin-top:.1rem;fill:none;stroke:var(--acc);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gist b{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);margin-bottom:.3rem}
.gist p{font-size:.9rem;color:var(--navy);line-height:1.55;margin:0;font-weight:600}

/* An icon on every capability card. Sixty-four cards of pure text is the
   largest single block on the site; a mark per card is what makes a grid
   scannable instead of a spreadsheet. */
.fcard-h{align-items:center}
.ficon{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accsoft),var(--acc2soft));border:1px solid var(--rule);
  margin-right:.55rem}
.ficon svg{width:15px;height:15px;fill:none;stroke:var(--acc);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.fcard-h h3{flex:1}

/* Gain and give-up, marked rather than merely listed. */
.ticks.gain div::before{content:"\2713";color:var(--good);font-weight:800;margin-right:.5rem}
.ticks.lose div::before{content:"\2212";color:var(--bad);font-weight:800;margin-right:.5rem}

/* More drawn screens. Every one is a placeholder for a real capture later, but
   built from the product's own components so it cannot show a screen that
   never shipped. Swapping one for a photograph is deleting a div. */
.shot2{max-width:720px;margin:0 0 1.5rem}
.shot2.wide{max-width:none}
.ssfield{display:grid;gap:.28rem}
.ssfield span{font-size:.68rem;font-weight:700;color:var(--dim);font-family:var(--mono);
  letter-spacing:.07em;text-transform:uppercase}
.ssfield u{display:block;height:30px;border:1px solid var(--rule2);border-radius:7px;background:#fff;
  text-decoration:none;position:relative}
.ssfield u::after{content:attr(data-v);position:absolute;left:.6rem;top:50%;transform:translateY(-50%);
  font-size:.79rem;color:var(--soft)}
.ssgrid2{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.sstog{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.5rem .65rem;
  border:1px solid var(--rule);border-radius:8px;background:var(--panel);font-size:.79rem;color:var(--soft)}
.sstog b{color:var(--navy);font-weight:650}
.sstog i{width:32px;height:18px;border-radius:999px;background:var(--rule2);position:relative;
  display:block;flex:none}
.sstog i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff}
.sstog.on i{background:linear-gradient(135deg,var(--cyan),var(--acc2))}
.sstog.on i::after{left:16px}
.ssbtn{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--cyan),var(--acc2));border-radius:7px;padding:.36rem .7rem}
.ssbtn.ghost{background:var(--panel);color:var(--acc);border:1px solid var(--rule2)}
.sskv{display:flex;justify-content:space-between;font-size:.79rem;color:var(--soft);padding:.3rem 0}
.sskv b{color:var(--navy);font-weight:650}
.sskv.total{border-top:1px solid var(--rule);margin-top:.35rem;padding-top:.5rem;font-size:.87rem}
.sskv.total b{font-weight:800}
.ssgutter{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.4rem}
.ssgutter span{border:1px solid var(--rule);border-radius:7px;padding:.4rem .5rem;font-size:.72rem;
  color:var(--soft);text-align:center;background:var(--panel)}
.ssgutter span.on{border-color:var(--acc);color:var(--acc);background:var(--accsoft);font-weight:700}

.spot .shot2{max-width:none;margin-bottom:0}
/* The product's own line, right of its nav. The company tagline sits in the bar
   above; this one says what THIS plugin is, in the four words a listing gets. */
.subline{margin-left:auto;font-size:.83rem;color:var(--dim);letter-spacing:-.01em;white-space:nowrap}
.subline b{color:var(--acc);font-weight:700}
@media(max-width:900px){.subline{display:none}}

/* The two-agent pattern, drawn. Customer on one side, operator on the other,
   and the rules between them -- because the rules are the differentiator, not
   the fact that an LLM is involved. */
.pair{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;margin-bottom:1.5rem}
@media(max-width:820px){.pair{grid-template-columns:1fr}.pairmid{display:none}}
.pairc{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:1.15rem 1.25rem;
  box-shadow:var(--shadow)}
.pairc .ico{margin-bottom:.65rem}
.pairc h3{font-size:1.02rem;margin-bottom:.4rem}
.pairc p{font-size:.855rem;color:var(--soft);line-height:1.55;margin:0}
.pairc em{font-style:normal;display:inline-block;margin-top:.7rem;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--acc);background:var(--accsoft);
  border-radius:5px;padding:.16rem .44rem}
.pairmid{display:grid;place-items:center;gap:.5rem;padding:0 .3rem}
.pairmid u{width:1px;flex:1;background:var(--rule);display:block;text-decoration:none;min-height:30px}
.pairmid span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);writing-mode:vertical-rl;transform:rotate(180deg)}

  box-shadow:0 0 0 100vmax #0B3A52;clip-path:inset(0 -100vmax);border-top:0;color:#CFEAF5}

/* Four across, so eight cells make two clean rows. auto-fit was giving five
   and leaving a hole the width of the page. */
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g4{grid-template-columns:1fr}}

/* One added line, not a rewrite: the AI-first claim gets its own row under the
   sub-tagline so the headline copy above it stays exactly as it was. */
.aitag{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.15rem;padding:.42rem .8rem;
  border:1px solid var(--rule2);border-radius:999px;background:var(--panel);
  font-size:.85rem;color:var(--soft);box-shadow:var(--shadow)}
.aitag svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.aitag b{color:var(--acc);font-weight:750}

/* Every page gets the band, at one of two intensities. Full for the six pages
   somebody arrives on; lite for the fourteen they navigate to -- same gradient
   family, softer wash, tighter padding. A licence agreement with a sales hero
   on it is not consistency, it is shouting. */
.band-hero.lite{background:
   radial-gradient(760px 260px at 16% -22%, rgba(6,182,212,.18), transparent 62%),
   radial-gradient(620px 240px at 86% -10%, rgba(37,99,235,.13), transparent 60%),
   linear-gradient(168deg,#EEF8FC 0%,#E8F4FB 52%,#EDF2FE 100%);
  box-shadow:0 0 0 100vmax #EEF6FB;
  padding-block:clamp(2.1rem,3.6vw,2.9rem) clamp(1.4rem,2.4vw,1.9rem)}
.band-hero.lite h1{font-size:clamp(1.85rem,3.3vw,2.6rem)}

/* People, with a way to reach them. A small company's real advantage is that
   you can see who answers -- but the cards below are PLACEHOLDERS, because
   inventing colleagues is a different kind of lie from inventing a demo clinic. */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.6rem}
.person{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:1.15rem 1.2rem;
  box-shadow:var(--shadow)}
.phead{display:flex;align-items:center;gap:.8rem;margin-bottom:.75rem}
.pav{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cyan),var(--acc2));color:#fff;font-weight:800;
  font-size:1.02rem;letter-spacing:-.02em}
.phead b{display:block;font-size:.98rem;color:var(--navy);font-weight:750;line-height:1.25}
.phead span{display:block;font-size:.775rem;color:var(--acc);font-weight:650;font-family:var(--mono);
  letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem}
.person p{font-size:.83rem;color:var(--soft);line-height:1.5;margin:0 0 .8rem}
.pcontact{display:grid;gap:.32rem;border-top:1px dashed var(--rule2);padding-top:.75rem}
.pcontact a{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--acc);
  text-decoration:none;font-weight:650}
.pcontact a:hover{text-decoration:underline;text-underline-offset:2px}
.pcontact svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pcontact span{font-size:.75rem;color:var(--dim);display:flex;align-items:center;gap:.5rem}

/* Three numbers, three time zones. A support promise that only works in one
   of them is a support promise for one of them. */
.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:.6rem}
.ph{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:1rem 1.1rem;
  box-shadow:var(--shadow)}
.ph .flagline{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.ph .flagline i{width:26px;height:18px;border-radius:4px;display:block;flex:none;
  border:1px solid var(--rule2);background:var(--bg)}
.ph .flagline b{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.ph a{display:block;font-size:1.02rem;font-weight:750;color:var(--navy);text-decoration:none;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ph a:hover{color:var(--acc)}
.ph span{display:block;font-size:.755rem;color:var(--dim);margin-top:.3rem;line-height:1.4}

/* Full biography cards reuse the person header, with body copy under it. */
.cell .phead{margin-bottom:.85rem}
.cell .phead+p{margin-top:0}
.cell .pav{width:44px;height:44px;border-radius:13px;font-size:.95rem}

/* Avatars take a photograph the moment there is one: add class="pav photo" and
   an <img> inside. Until then the initials carry it, and a missing portrait is
   better than a stock one. */
.pav.photo{padding:0;overflow:hidden;background:var(--rule)}
.pav.photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------------------------------------------------------------------------
   MOBILE. The viewport tag above is what makes any of this run -- without it a
   phone lays the page out at ~980px and scales it down, and every query here
   silently never matches.

   Three things break at 380px and none of them are the text: fixed-column
   grids with a label column wider than half the screen, drawn mockups whose
   internals assume desktop, and a product bar with eight tabs in it.
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  /* Label-and-bar rows stack, so the bar gets the whole width. */
  .shrow,.mrow,.bar{grid-template-columns:1fr;gap:.3rem}
  .shrow b,.mrow b,.bar b{justify-self:start}
  .shbar,.mtrack,.bar u{width:100%!important}

  /* Timeline rows put the time above the entry. */
  .tlr{grid-template-columns:1fr auto;gap:.3rem .6rem}
  .tlr time{grid-column:1/-1}

  /* Mockup internals. A seven-day calendar and a four-stat strip both survive
     at this width; three service cards side by side do not. */
  .wzcards{grid-template-columns:1fr}
  .ssstats{grid-template-columns:repeat(2,1fr)}
  .wzcal{gap:.18rem}
  .wzd{font-size:.58rem;padding:.26rem 0}
  .ssbody,.mockbody{padding:.85rem .9rem}
  .slots{grid-template-columns:repeat(3,1fr)}

  /* Two-column pairs and the person header. */
  .pairmid{display:none}
  .guarband{grid-template-columns:1fr}
  .phead{gap:.65rem}

  /* Nobody reads a 74-character measure on a phone. */
  .hd,.lead,.subtag,.pull{max-width:none}
  .pull{padding-left:.9rem;margin:1.4rem 0}

  /* The agent takes the screen rather than floating in a corner of it. */
  .agent{right:.6rem;left:.6rem;bottom:.6rem;width:auto;max-height:calc(100vh - 1.2rem)}
  .aglaunch{right:.75rem;bottom:.75rem}

  /* Tables already scroll; make it obvious they can. */
  .tblwrap{position:relative}
  .tblwrap::after{content:"swipe \2192";position:absolute;right:.5rem;top:.4rem;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim);pointer-events:none}
}

@media (max-width:620px){
  /* The product bar becomes a scrollable strip, the same shape the plugin's own
     stepper uses under 640px. Wrapping eight tabs makes a three-line header. */
  .subin{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    padding-inline:0}
  .subin::-webkit-scrollbar{display:none}
  .stab{flex:0 0 auto}
  .subname{flex:0 0 auto}

  /* Same for the capability and demo filters. */
  .fchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}
  .fchips::-webkit-scrollbar{display:none}
  .fchip{flex:0 0 auto}
  .shotnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .shotnav::-webkit-scrollbar{display:none}
  .shotnav button{flex:0 0 auto}

  /* Header: the wordmark and the buttons share a row, tabs take the next. */
  .topin{gap:.35rem;padding:.8rem 0}
  .logo{font-size:1.2rem;margin-right:.6rem}
  .dot{width:22px;height:22px}
  .tab{font-size:.9rem;padding:.42rem .7rem}
  .topcta .btn{font-size:.8rem}

  /* Plan cards and figures. */
  .price{font-size:2.2rem}
  .stat{padding:1.05rem .85rem}
  .endcta{padding:1.5rem 1.2rem}
  .word{font-size:2.6rem}

  /* Code blocks and long mono strings must not push the page sideways. */
  pre.code{font-size:.68rem}
  .ssbar span,.mockbar span{font-size:.6rem}
}

/* Nothing may push the document sideways. Individual scrollers -- tables, the
   nav strips -- keep their own overflow. */
.sk{overflow-x:hidden}
img,svg,table{max-width:100%}

/* ---------------------------------------------------------------------------
   READABLE TEXT ON A PHONE. Forty-seven selectors sit between 8.8px and 11px on
   this page -- fine as micro-labels on a 27-inch monitor, unreadable held at
   arm's length. Everything below is raised to a floor of 11.5px, including the
   labels inside the drawn screenshots, because those are content here rather
   than decoration: somebody will try to read "unconfirmed - asked on WhatsApp".

   The mockups get taller as a result. That is the correct trade.
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  .pnew,.psoon,.tblwrap::after,.wzd,.ftier,.ladder span,.onlyi em,.pairmid span,.ssbar span,.mockbar span,.sslab,.ssst span,.tlr em,.wab em,.wzstep,.dshows span,.dshot span,.idxi em,.soon,.wkpt em,.vidshot i{font-size:.72rem!important;letter-spacing:.06em}
  .hub em,.meth,.migh span,.pairc em,.wzc span,.prop em,.gist b,.route em,.guarband .n span,.half .tagline,.hotlab,.mockline em,.pline em,.scen-h span,.tlbar u,.onlyhd,.tlr time,.ph .flagline b,.shot span,.ssfield span,.updated,.word span,.eyebrow,.subname,.fcount,.dsec span{font-size:.775rem!important}
  pre.code{font-size:.74rem}
  .note,.legal,.fnone{font-size:.83rem}
  .fcard p,.dcard p,.trade span,.person p,.ph span{font-size:.83rem}
  .idxi span,.dsec span,.route span,.pairc p{font-size:.815rem}

  /* Interactive things need a thumb, not a cursor. */
  .tab,.stab,.fchip,.shotnav button,.dl,.seg button,.dsel select{min-height:42px}
  .stab,.fchip,.shotnav button{padding:.6rem .95rem}
  .dl{padding:.75rem .3rem}
  .btn{min-height:44px}
  .btn.b-sm{min-height:40px}
  .pcontact a,.footcol a,.utillinks a{padding-block:.25rem}
  .utilsoc a{padding:.25rem}
  .faq summary{padding:1.05rem 1.15rem}

  /* Mockup rows breathe, now that their labels are bigger. */
  .mockline,.tlr,.pline{padding:.6rem .7rem}
  .wzstep{padding:.3rem .6rem}
  .slot{padding:.55rem 0;font-size:.78rem}
}

/* Currencies the thirteen gateways settle in. Not what we charge -- what your
   customers pay you in, which is a different fact and belongs beside the
   gateways rather than on our own pricing page. */
.curs{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.cur{display:inline-flex;align-items:baseline;gap:.32rem;border:1px solid var(--rule);
  background:var(--panel);border-radius:8px;padding:.34rem .6rem;font-size:.78rem;
  color:var(--soft);font-weight:650;box-shadow:var(--shadow)}
.cur b{font-size:.95rem;color:var(--acc);font-weight:800;line-height:1}
.cur em{font-style:normal;font-size:.7rem;color:var(--dim);font-weight:500}

/* The usual, against ours. A two-column table rather than two lists, because
   the point is the pairing -- each row is one frustration and the specific
   thing we do instead of it. */
.vs td:first-child{color:var(--soft)}
.vs td:last-child{color:var(--navy);font-weight:600}
.vs td{text-align:left!important;vertical-align:top;width:50%}
.vs thead th{text-align:left!important}
.vs thead th:last-child{color:var(--acc)}
.vs td b{color:var(--acc)}

/* Three entities, one company. */
.globe3{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.6rem}
.ent{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:1.15rem 1.2rem;
  box-shadow:var(--shadow)}
.ent .flag{width:34px;height:23px;border-radius:5px;border:1px solid var(--rule2);display:block;
  margin-bottom:.7rem}
.ent b{display:block;font-size:.95rem;color:var(--navy);font-weight:750;line-height:1.3}
.ent span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--acc);font-weight:700;margin:.2rem 0 .55rem}
.ent p{font-size:.83rem;color:var(--soft);line-height:1.5;margin:0}


/* What we make, and what is next. A plain list -- one row per plugin, a status
   on each. No diagram: the point is simply that one is out and more are coming. */
.lineup{background:var(--panel);border:1px solid var(--rule);border-radius:16px;
  padding:1.15rem 1.15rem 1rem;box-shadow:var(--shadow2)}
.lineup>span{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:.85rem}
.lrow{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;
  border-top:1px solid var(--rule)}
.lrow:first-of-type{border-top:0;padding-top:0}
.lrow i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;
  background:var(--accsoft)}
.lrow i svg{width:18px;height:18px;fill:none;stroke:var(--acc);stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.lrow>div{flex:1;min-width:0}
.lrow b{display:block;font-size:.94rem;font-weight:750;color:var(--navy);line-height:1.25}
.lrow em{display:block;font-style:normal;font-size:.78rem;color:var(--soft);margin-top:.1rem}
.lpill{flex:none;font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;padding:.32rem .6rem;border-radius:999px;
  background:var(--goodsoft);color:var(--good)}
.lpill.next{background:var(--panel2);color:var(--soft)}
.lmore{margin:.85rem 0 0;font-size:.8rem;color:var(--dim);text-align:center;
  border-top:1px dashed var(--rule2);padding-top:.85rem}
.lmore b{color:var(--soft);font-weight:700}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.stat{background:var(--panel);padding:1.35rem 1.1rem}
.stat b{display:block;font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1.1;
  background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.765rem;color:var(--dim);font-weight:500}

.mock{background:var(--panel);border:1px solid var(--rule2);border-radius:12px;overflow:hidden;box-shadow:var(--shadow2)}
.mockbar{display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;border-bottom:1px solid var(--rule);background:#E8F7FD}
.mockbar i{width:9px;height:9px;border-radius:50%;background:var(--rule2);display:block}
.mockbar span{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-left:.5rem}
.mockbody{padding:1.15rem}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.45rem}
.slot{border:1px solid var(--rule2);border-radius:6px;padding:.42rem 0;text-align:center;font-family:var(--mono);font-size:.73rem;color:var(--soft);background:#fff}
.slot.on{background:linear-gradient(135deg,var(--cyan),var(--acc2));border-color:var(--acc);color:#fff;font-weight:600}
.slot.off{opacity:.4;text-decoration:line-through}
.mockrow{display:flex;gap:.55rem;align-items:center;margin-bottom:.9rem;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:.7rem;padding:.22rem .55rem;border-radius:5px;border:1px solid var(--rule2);color:var(--soft);background:#fff}
.chip.act{border-color:var(--acc);color:var(--acc);background:var(--accsoft)}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ticks li{display:flex;gap:.65rem;font-size:.895rem;color:var(--soft);align-items:flex-start;line-height:1.5}
.ticks svg{width:15px;height:15px;flex:none;margin-top:.22rem;stroke:var(--good);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ticks b{color:var(--navy);font-weight:700}

.toggles{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-bottom:2rem}
.seg{display:inline-flex;background:#fff;border:1px solid var(--rule2);border-radius:9px;padding:3px;box-shadow:var(--shadow)}
.seg button{font:inherit;font-size:.815rem;font-weight:650;padding:.4rem .95rem;border:0;border-radius:6px;background:none;color:var(--soft);cursor:pointer}
.seg button[aria-pressed="true"]{background:linear-gradient(135deg,var(--cyan),var(--acc2));color:#fff}
.seg button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.save{font-size:.79rem;color:var(--good);font-weight:700}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;align-items:start}
.plan{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:1.5rem 1.3rem;display:grid;gap:1rem;position:relative;box-shadow:var(--shadow)}
.plan.hot{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--shadow2)}
.hotlab{position:absolute;top:-9px;left:1.3rem;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.18rem .55rem;border-radius:4px}
.pname{font-size:.94rem;font-weight:750;color:var(--navy)}
.psub{font-size:.79rem;color:var(--dim);margin-top:.15rem}
.price{font-size:2.05rem;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;color:var(--navy)}
.per{font-size:.78rem;color:var(--dim);font-weight:500}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.44rem;font-size:.84rem;color:var(--soft)}
.plan ul li{display:flex;gap:.5rem;align-items:flex-start}
.plan ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);flex:none;margin-top:.52rem}
.plan ul li b{color:var(--navy);font-weight:700}

.tblwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:12px;background:#fff;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.85rem}
th,td{padding:.62rem .85rem;text-align:left;border-bottom:1px solid var(--rule)}
thead th{background:linear-gradient(135deg,#D9F3FC,#DBEAFE);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);font-weight:700}
td:not(:first-child),th:not(:first-child){text-align:center;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#EEFAFE}
tbody td:first-child{color:var(--navy);font-weight:600}
.yes{color:var(--good);font-weight:700}
.no{color:var(--rule2)}
.grp td{background:var(--accsoft);font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);font-weight:700}

.quote{border-left:3px solid var(--acc);padding:.2rem 0 .2rem 1.15rem;font-size:1.04rem;line-height:1.55;color:var(--navy);max-width:58ch;font-weight:500}
.quote cite{display:block;font-size:.78rem;color:var(--dim);font-style:normal;margin-top:.6rem;font-weight:500}
.steps{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.step{background:var(--panel);padding:1.35rem 1.45rem;display:grid;grid-template-columns:auto 1fr;gap:1.05rem;align-items:start}
.stepn{font-family:var(--mono);font-size:.8rem;font-weight:800;padding-top:.1rem;
  background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}

.foot{border-top:1px solid var(--rule);padding-block:2.4rem;display:grid;gap:1.1rem}
.footset{display:flex;gap:1.5rem;flex-wrap:wrap}
.footset a{color:var(--soft);font-size:.83rem;text-decoration:none}
.footset a:hover{color:var(--acc)}
.legal{font-size:.79rem;color:var(--dim);max-width:64ch}
.legal b{color:var(--soft);font-weight:600}
.pg{display:none}
.pg.on{display:block}

.phone{max-width:250px;margin:0 auto;border:1px solid var(--rule2);border-radius:22px;background:#fff;padding:.55rem;box-shadow:var(--shadow2)}
.phone-in{background:var(--bg);border-radius:16px;padding:.9rem .8rem;display:grid;gap:.6rem}
.pline{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:8px;background:#fff}
.pline b{font-weight:650;font-size:.78rem;color:var(--navy)}
.pline em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--dim)}
.pdot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:.4rem}

.shot{border:1.5px dashed var(--rule2);border-radius:12px;background:linear-gradient(135deg,#EBFAFE,#DEEBFE);
  display:grid;place-items:center;text-align:center;padding:1.75rem 1.25rem;gap:.35rem;min-height:190px}
.shot.wide{aspect-ratio:16/9;min-height:0;padding:1rem}
.shot.tall{aspect-ratio:3/4;min-height:0}
.shot b{font-size:.86rem;font-weight:700;color:var(--soft);letter-spacing:-.01em}
.shot span{font-family:var(--mono);font-size:.68rem;color:var(--dim);letter-spacing:.07em}
.shot svg{width:24px;height:24px;stroke:var(--rule2);fill:none;stroke-width:1.6;margin-bottom:.2rem}

.cat-a{--cat:#0891B2} .cat-b{--cat:#2563EB} .cat-c{--cat:#0E7490} .cat-d{--cat:#4F46E5}
.cat-a .eyebrow,.cat-b .eyebrow,.cat-c .eyebrow,.cat-d .eyebrow{color:var(--cat)}
.cat-a .grid,.cat-b .grid,.cat-c .grid,.cat-d .grid{border-top:3px solid var(--cat)}

@media (prefers-reduced-motion:reduce){.sk *{transition:none!important}}