/* File: kapselsite.css
   Kapsel's own website.

   It loads kapsel-base.css and the SALON SITE'S stylesheet first, then adds what this
   page needs. That is deliberate: Kapsel's own site and a salon's site are the same kind
   of thing — a public page read on a phone — and 12-styling-standard.md gives them one set
   of tokens. A separate palette for the marketing page would make Kapsel look like a
   different product from the thing it sells.

   Tokens only. The --site-* set, because this is a public page, not the dashboard. */

.ks{background:var(--site-bg);color:var(--site-ink);min-height:100vh;
  display:flex;flex-direction:column}
.ks main{flex:1}
.ks h1,.ks h2,.ks h3{font-family:var(--f-display);font-weight:400;line-height:1.15}
/* PLAYFAIR DISPLAY, not the Bodoni Moda the rest of Kapsel uses. Bodoni's hairlines
   vanish on a phone - its em-dash renders as nothing at all - and this page is read on
   a phone first. Playfair keeps the same high-contrast salon feel with strokes that
   hold up; the designer's choice. Overridden here, on Kapsel's own pages only, by
   redefining the token: the salon sites and the dashboard keep Bodoni.
   500 for the display type, a step up from the 400 body of the font, so the headings,
   the wordmark and the price read with some weight. */
.ks,.site-missing{--f-display:"Playfair Display",Georgia,"Times New Roman",serif}
.ks h1,.ks h2,.ks-brand-name,.ks-price-amount{font-weight:500}
.ks h1{font-size:clamp(28px,6.5vw,46px);letter-spacing:-.01em}
.ks h2{font-size:clamp(22px,4.5vw,30px);margin-bottom:6px}
.ks h3{font-size:17px;font-family:var(--f-ui);font-weight:700}
.ks p{line-height:1.6}
.ks a{color:inherit}
.ks-lead{font-size:clamp(15px,2.6vw,18px);color:var(--site-muted);max-width:62ch}
.ks-small{font-size:12.5px;color:var(--site-muted)}
.ks-small a,.ks-legal a{text-decoration:underline}

/* ---------- header ---------- */
.ks-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px var(--gutter);border-bottom:1px solid var(--site-line)}
.ks-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.ks-brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:9px;background:var(--sa);color:var(--sa-ink);line-height:1}
/* The scissors mark (KapselsiteLogoView). Drawn in currentColor, so it takes --sa-ink. */
.ks-scissors{width:64%;height:64%;display:block}
.ks-brand-words{display:grid}
.ks-brand-name{font-family:var(--f-display);font-size:19px;line-height:1.1}
.ks-nav{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}
.ks-nav-link{font-size:13.5px;color:var(--site-muted);text-decoration:none}
.ks-nav-link:hover{color:var(--site-ink);text-decoration:underline}

/* ---------- sections ---------- */
.ks-section{padding:clamp(34px,7vw,62px) var(--gutter);max-width:1080px;margin:0 auto;
  border-top:1px solid var(--site-line)}
.ks-section>h2{margin-bottom:14px}

/* ---------- hero ----------
   Two columns above 860px; the phone goes under on a narrow screen rather than shrinking
   to the point of being unreadable. */
.ks-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,56px);
  align-items:center;padding:clamp(34px,7vw,72px) var(--gutter);
  max-width:1080px;margin:0 auto}
.ks-hero-words{display:grid;gap:16px}
/* The slogan. Italic Playfair in the accent, above the headline: the line with the
   personality goes first, the plain explanation follows. The quoted bit is set like
   the message it is - curly quotes from <q>, upright, in the ink colour. */
.ks-slogan{font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(17px,4.4vw,22px);line-height:1.35;color:var(--sa)}
.ks-slogan q{font-style:normal;color:var(--site-ink);white-space:nowrap}
.ks-hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.ks-hero-price{font-size:13px;color:var(--site-muted)}

/* ---------- the phone ----------
   DRAWN, not loaded. 10-kapsel-website.md asks the page to read with images off, and a
   screenshot would also go stale the first time a salon site changed. */
.ks-phone{justify-self:center;width:min(260px,78vw);border-radius:30px;
  border:9px solid color-mix(in srgb,var(--site-ink) 88%,transparent);
  background:color-mix(in srgb,var(--site-ink) 88%,transparent);
  box-shadow:var(--shadow)}
.ks-phone-screen{background:var(--site-soft);border-radius:21px;overflow:hidden;
  padding:16px 14px 12px;display:grid;gap:9px}
.ks-phone-head{display:grid;gap:3px;margin-bottom:3px}
.ks-phone-salon{font-family:var(--f-display);font-size:19px;line-height:1.1}
.ks-phone-tag{font-size:10.5px;color:var(--site-muted)}
.ks-phone-row{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;
  padding-bottom:7px;border-bottom:1px solid var(--site-line)}
.ks-phone-book{margin-top:5px;text-align:center;background:var(--sa);color:var(--sa-ink);
  border-radius:var(--r-pill);padding:8px;font-size:12px;font-weight:600}
.ks-phone-foot{text-align:center;font-size:9px;color:var(--site-muted);margin-top:3px}

/* ---------- how it works ---------- */
.ks-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;
  margin-top:8px}
.ks-step{display:grid;gap:7px;align-content:start}
.ks-step-n{display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--sa);color:var(--sa-ink);
  font-family:var(--f-mono);font-size:13px;font-weight:500}
.ks-step p{font-size:14px;color:var(--site-muted)}

/* ---------- what you get ---------- */
.ks-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;
  margin-top:8px}
.ks-feature{display:grid;gap:5px;align-content:start;padding:15px 16px;
  background:var(--site-soft);border:1px solid var(--site-line);border-radius:var(--r-lg)}
.ks-feature p{font-size:13.5px;color:var(--site-muted)}

/* ---------- demo ---------- */
.ks-demo{display:grid;gap:12px;justify-items:start}

/* ---------- price ---------- */
.ks-price{display:grid;gap:18px}
.ks-price-card{background:var(--site-soft);border:1px solid var(--site-line);
  border-radius:var(--r-sheet);padding:clamp(18px,3.4vw,28px);max-width:520px;
  display:grid;gap:10px}
.ks-price-amount{font-family:var(--f-display);font-size:clamp(34px,8vw,52px);line-height:1}
.ks-price-amount span{font-family:var(--f-ui);font-size:15px;color:var(--site-muted);
  margin-left:8px}
.ks-price-terms{font-size:13.5px;color:var(--site-muted)}
.ks-price-list{margin:4px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.ks-price-note{font-size:13px;color:var(--site-muted);padding-top:8px;
  border-top:1px solid var(--site-line)}
.ks-price-extra{max-width:62ch;display:grid;gap:5px}
.ks-price-extra p{font-size:14px;color:var(--site-muted)}

/* ---------- promises ---------- */
.ks-promise-list{margin:8px 0 14px;padding-left:20px;display:grid;gap:9px;
  font-size:14.5px;max-width:68ch}

/* ---------- questions ----------
   <details> rather than JavaScript: it opens with no script, and a search engine reads
   every answer whether it is open or not. */
.ks-q{border-bottom:1px solid var(--site-line);padding:13px 0}
.ks-q summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;
  display:flex;align-items:center;gap:9px}
.ks-q summary::-webkit-details-marker{display:none}
.ks-q summary::before{content:"+";font-family:var(--f-mono);color:var(--sa);
  font-size:16px;line-height:1;flex:none}
.ks-q[open] summary::before{content:"\2212"}
/* "Kapsel: a hairstyle for your diary." - the line that opens the first answer, set like
   the hero's slogan so the two read as the same voice. */
.ks-q-lead{display:block;margin-bottom:6px;font-family:var(--f-display);font-style:italic;
  font-weight:500;font-size:1.25em;color:var(--sa)}
.ks-q p{margin-top:9px;padding-left:24px;font-size:14px;color:var(--site-muted);
  max-width:66ch}

/* ---------- contact ---------- */
.ks-contact{display:grid;gap:16px}
.ks-ways{display:flex;gap:10px;flex-wrap:wrap}
.ks-whatsapp{background:#1f8a4c;border-color:#1f8a4c;color:#fff}
.ks-form{display:grid;gap:12px;max-width:560px}
.ks-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ks-form .field>span{font-size:12.5px;font-weight:600}
.ks-form .field small{font-weight:400;color:var(--site-muted);margin-left:5px}
.ks-form .input{background:var(--site-soft);border-color:var(--site-line);
  color:var(--site-ink)}
.ks-form .input:focus{border-color:var(--sa);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sa) 22%,transparent)}
/* The one field a refusal names, marked so the eye goes there rather than to the top. */
.ks-bad{border-color:var(--bad)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent)}
.ks-submit{justify-self:start;border:0}
/* The honeypot. Taken out of the layout and out of the accessibility tree rather than
   display:none, because some bots skip anything that is display:none. */
.ks-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ks-sent{background:var(--ok-soft);color:var(--ok);border-radius:var(--r-md);
  padding:12px 14px;font-size:14px;font-weight:600;max-width:560px}
.ks-error{background:var(--bad-soft);color:var(--bad);border-radius:var(--r-md);
  padding:12px 14px;font-size:14px;max-width:560px}

/* ---------- footer ---------- */
.ks-footer{border-top:1px solid var(--site-line);padding:22px var(--gutter);
  display:grid;gap:7px;font-size:12.5px;color:var(--site-muted);
  max-width:1080px;margin:0 auto;width:100%}
.ks-footer-owner{color:var(--site-ink)}
.ks-footer-details{display:flex;gap:14px;flex-wrap:wrap}
.ks-footer-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:3px}
.ks-footer-links a{text-decoration:underline}

/* ---------- legal pages ---------- */
.ks-legal{max-width:720px;margin:0 auto;padding:clamp(26px,5vw,48px) var(--gutter)}
.ks-legal h1{margin-bottom:5px}
.ks-legal h2{font-family:var(--f-ui);font-size:17px;font-weight:700;
  margin:26px 0 7px}
.ks-legal p,.ks-legal li{font-size:14.5px;line-height:1.65;color:var(--site-muted)}
.ks-legal strong{color:var(--site-ink)}
.ks-legal ul{padding-left:20px;display:grid;gap:7px;margin:8px 0}
.ks-legal-lead{font-size:16px!important;color:var(--site-ink)!important}
.ks-legal-updated{font-size:12.5px;color:var(--site-muted);margin-bottom:6px}
.ks-legal-rule{border:0;border-top:1px solid var(--site-line);margin:28px 0 14px}

/* ---------- made for ----------
   Three chips under the hero price, so a barber or a braiding studio sees themselves in
   a page whose picture is a colour salon. */
.ks-for{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ks-for-label{font-size:12px;color:var(--site-muted);text-transform:uppercase;
  letter-spacing:.08em}
.ks-for ul{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.ks-for li{font-size:12.5px;padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--site-line);background:var(--site-soft)}

/* ---------- the messages ----------
   Bubbles, drawn. Real text, so the section reads with images off. The salon's column
   is tinted with the accent so the two sides are told apart at a glance. */
.ks-chats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;
  margin-top:14px}
.ks-chat{display:grid;gap:6px;align-content:start;padding:16px;border-radius:var(--r-sheet);
  background:var(--site-soft);border:1px solid var(--site-line)}
.ks-chat h3{margin-bottom:4px}
.ks-bubble-when{font-size:11.5px;color:var(--site-muted);margin-top:6px}
.ks-bubble{justify-self:start;max-width:34ch;padding:10px 13px;font-size:14px;line-height:1.45!important;
  background:var(--site-bg);border:1px solid var(--site-line);
  border-radius:4px 16px 16px 16px;overflow-wrap:anywhere}
.ks-chat-salon .ks-bubble{background:var(--sa-soft);
  border-color:color-mix(in srgb,var(--sa) 30%,transparent)}

/* ---------- your side: the dashboard ----------
   The words and a second phone, the hero's layout mirrored. Inside the phone, each
   stylist column is a grid of half-hours (08:00 row 1 to 14:00 row 13) and a booking
   is placed by grid-row in the markup. */
.ks-yourday{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,5vw,56px);align-items:center}
.ks-yourday-words{display:grid;gap:14px}
.ks-ticks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px;font-size:14.5px}
.ks-ticks li{position:relative;padding-left:24px}
.ks-ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--sa);
  font-weight:700}
.ks-app{gap:8px!important;padding:12px 10px 10px!important}
.ks-app-top{display:flex;justify-content:space-between;align-items:center}
.ks-app-day{font-family:var(--f-display);font-size:16px}
.ks-app-add{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--sa);color:var(--sa-ink);font-size:16px;line-height:1}
.ks-app-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.ks-app-col{display:grid;gap:4px;align-content:start}
.ks-app-name{font-size:10px;font-weight:700;text-align:center;padding-bottom:3px;
  border-bottom:1px solid var(--site-line)}
.ks-app-grid{display:grid;grid-template-rows:repeat(12,18px);gap:2px}
.ks-app-booking{position:relative;display:flex;flex-direction:column;gap:1px;overflow:hidden;
  padding:2px 4px;border-radius:5px;font-size:8.5px;line-height:1.25;
  background:var(--sa-soft);border-left:3px solid var(--sa)}
/* flex:none, or the column squeezes the first line to make room for the second and a
   half-hour booking shows half a name. The second line is what gets clipped instead. */
.ks-app-line{flex:none;display:flex;gap:3px;align-items:baseline;white-space:nowrap;overflow:hidden}
.ks-app-what{flex:none}
.ks-app-booking strong{font-size:9px;overflow:hidden;text-overflow:ellipsis}
.ks-app-what{color:var(--site-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-app-time{font-family:var(--f-mono);font-size:7.5px;color:var(--site-muted)}
/* The status tag sits in the corner, so it shows on a half-hour booking too. */
.ks-app-tag{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:var(--r-pill);
  font-size:7px;font-weight:700;line-height:1.5;background:var(--sa);color:var(--sa-ink)}
.ks-app-booking.is-block{border-left-color:var(--site-muted);
  background:repeating-linear-gradient(135deg,var(--site-soft) 0 4px,var(--site-line) 4px 5px)}
.ks-app-booking.is-done{opacity:.6}
.ks-app-booking.is-done .ks-app-tag{background:var(--ok);color:var(--site-bg)}
.ks-app-booking.is-noshow{border-left-color:var(--bad);background:var(--bad-soft)}
.ks-app-booking.is-noshow .ks-app-tag{background:var(--bad);color:var(--site-bg)}
.ks-app-foot{font-size:9.5px;color:var(--site-muted);text-align:center;padding-top:4px;
  border-top:1px solid var(--site-line)}

/* ---------- why it pays for itself ---------- */
.ks-worth{display:grid;gap:22px}
.ks-sum{display:grid;gap:8px}
.ks-sum p{color:var(--site-muted);font-size:14.5px;max-width:62ch}
.ks-sum .ks-sum-line{max-width:none;font-family:var(--f-display);font-size:clamp(22px,4.6vw,32px);
  line-height:1.25;color:var(--site-ink)}
.ks-sum-line strong{color:var(--sa);font-weight:500}
.ks-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.ks-compare-col{padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--site-line)}
.ks-compare-col ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-size:14px}
.ks-compare-col li{position:relative;padding-left:22px}
.ks-compare-without{background:var(--site-bg)}
.ks-compare-without li{color:var(--site-muted)}
.ks-compare-without li::before{content:"\2715";position:absolute;left:0;color:var(--site-muted)}
.ks-compare-with{background:var(--sa-soft);border-color:color-mix(in srgb,var(--sa) 30%,transparent)}
.ks-compare-with li::before{content:"\2713";position:absolute;left:0;color:var(--sa);font-weight:700}

/* ---------- the demo tour ---------- */
.ks-demo .ks-steps{width:100%}

/* ---------- who is behind it ---------- */
.ks-about{display:grid;gap:12px}
.ks-about p{max-width:62ch}
.ks-about-sign{font-family:var(--f-display);font-style:italic;font-size:17px;color:var(--sa)}

@media (max-width:860px){
  .ks-hero{grid-template-columns:minmax(0,1fr)}
  .ks-phone{justify-self:start;margin-top:6px}
  .ks-yourday{grid-template-columns:minmax(0,1fr)}
}

/* ---------- buttons ----------
   `.ks a{color:inherit}` outranks `.s-btn`'s own colour (0,1,1 beats 0,1,0), so every
   filled button on this page printed its label in the page ink instead of --sa-ink -
   near-black on plum in light mode, near-white on lilac in dark. */
.ks a.s-btn{color:var(--sa-ink)}
.ks a.s-btn.line{color:var(--site-ink)}

/* ---------- powered by Rooikat ----------
   app.html's footer, carried onto the public pages. These pages do not load style.css,
   so its footer rules are restated here with Rooikat's own values - nothing in this
   block is a Kapsel colour.

   ALWAYS style.css's DARK-MODE VALUES, whatever the theme - the developer's choice.
   The values are literals because the --site-* tokens would swap with the theme.
   Known and accepted: the caracal's black (#1a1a1a, the far ear and the shaded side
   of the head) is the same colour as this bar, so that shading does not show on it.
   The logo is NOT recoloured to compensate.

   The logo and the link are untouched: same colours, same size, same inline fade.

   STICKY, not fixed as in the app - the developer wants it always visible. Sticky to
   the bottom of the viewport does that, and because the bar is the last thing on the
   page it settles into place at the end instead of covering the footer links the way
   a fixed bar would. */
.app-footer-bar{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 16px calc(7px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #2a2a2a;background:#1a1a1a;width:100%;color-scheme:dark;
  position:sticky;bottom:0;z-index:20}
.app-footer-powered{font-size:9px;font-family:'Syne',sans-serif;letter-spacing:.14em;
  font-weight:600;color:#555555;text-transform:uppercase}
.app-footer-logo{display:flex;align-items:center;line-height:1;letter-spacing:.12em;
  color:#DB8926;text-transform:uppercase}
.app-footer-name{font-size:11px;font-family:'Syne',sans-serif;font-weight:900;
  letter-spacing:.12em;color:#DB8926;text-transform:uppercase}
.site-missing .app-footer-bar{margin:24px -24px -24px;width:calc(100% + 48px)}

/* ---------- desktop ----------
   The page was laid out for a phone and simply stopped at 1040px. Everything here is
   inside one media query on purpose: below 1024px the page is exactly what it was.

   --ks-pad is the trick that lines the header up with the content without a wrapper
   element: side padding that grows to whatever centres a --ks-max column. Sections
   then run edge to edge (so their rules span the screen) while their content does not.

   `width:100%` on the sections is a real fix, not a preference. `.site main` is a flex
   column and the sections centre themselves with `margin:0 auto`, which in a flex
   column shrinks each one to its content - so every section was a different width,
   narrowing as the page went down. */
@media (min-width:1024px){
  .ks{--ks-max:1520px;--ks-pad:max(56px,calc((100% - var(--ks-max)) / 2))}
  .ks main{max-width:none;padding:0;gap:0}

  /* the header: bigger and sticky */
  /* the header runs to the corners: logo hard left, buttons hard right */
  .ks-header{position:sticky;top:0;z-index:20;gap:24px;padding:18px 32px;
    background:color-mix(in srgb,var(--site-bg) 88%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .ks-brand{gap:13px}
  .ks-brand-mark{width:44px;height:44px;border-radius:11px}
  .ks-brand-name{font-size:26px}
  .ks-nav{gap:30px}
  .ks-nav-link{font-size:15.5px}
  .ks-header .s-btn.sm{padding:11px 22px;font-size:15px}
  .ks-header,.ks section[id]{scroll-margin-top:90px}

  /* the column */
  .ks-hero,.ks-section{width:100%;max-width:none;padding-inline:var(--ks-pad)}
  .ks-section{padding-block:96px}

  /* type, scaled for a screen read from arm's length */
  .ks h1{font-size:clamp(46px,4.6vw,68px)}
  .ks h2{font-size:clamp(32px,3vw,44px);margin-bottom:12px}
  .ks-section>h2{margin-bottom:28px}
  .ks h3{font-size:19px}
  .ks-lead{font-size:19.5px}
  .ks p{line-height:1.65}

  /* hero: room to breathe, and a phone that reads at a glance */
  .ks-hero{grid-template-columns:minmax(0,1fr) 380px;gap:80px;padding-block:112px 120px}
  .ks-hero-words{gap:24px}
  .ks-slogan{font-size:26px}
  .ks-hero .s-btn{padding:14px 28px;font-size:16px}
  .ks-hero-price{font-size:14.5px}
  .ks-phone{width:340px;border-width:11px;border-radius:40px}
  .ks-phone-screen{border-radius:29px;padding:24px 20px 16px;gap:12px}
  .ks-phone-salon{font-size:26px}
  .ks-phone-tag{font-size:13px}
  .ks-phone-row{font-size:14.5px;padding-bottom:10px}
  .ks-phone-book{padding:12px;font-size:15px}
  .ks-phone-foot{font-size:11px}

  /* how it works / what you get: three across, given the space they now have */
  .ks-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
  .ks-step{gap:10px}
  .ks-step-n{width:40px;height:40px;font-size:16px}
  .ks-step p{font-size:16px}
  .ks-features{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .ks-features-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ks-steps-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}

  /* the new sales sections */
  .ks-for li{font-size:14px;padding:5px 13px}
  .ks-chats{gap:28px;margin-top:8px}
  .ks-chat{padding:26px}
  .ks-bubble{font-size:15.5px;max-width:38ch}
  .ks-bubble-when{font-size:13px}
  .ks-yourday{grid-template-columns:minmax(0,1fr) 380px;gap:80px}
  .ks-yourday-words{gap:22px}
  .ks-ticks{font-size:17px;gap:12px}
  .ks-phone-app{width:360px}
  .ks-app{padding:18px 14px 14px!important;gap:12px!important}
  .ks-app-day{font-size:22px}
  .ks-app-add{width:32px;height:32px;font-size:20px}
  .ks-app-name{font-size:12.5px}
  .ks-app-grid{grid-template-rows:repeat(12,24px)}
  .ks-app-booking{font-size:10.5px;padding:3px 6px}
  .ks-app-booking strong{font-size:11px}
  .ks-app-time{font-size:9.5px}
  .ks-app-tag{font-size:8.5px;right:3px;bottom:3px}
  .ks-app-foot{font-size:12px}
  .ks-worth{gap:36px}
  .ks-sum p{font-size:17px}
  .ks-sum .ks-sum-line{font-size:40px}
  .ks-compare{gap:28px}
  .ks-compare-col{padding:26px 28px}
  .ks-compare-col ul{font-size:16.5px;gap:12px}
  .ks-about p{font-size:17px}
  .ks-about .ks-lead{font-size:19.5px}
  .ks-about-sign{font-size:21px}
  .ks-feature{padding:26px 26px 28px;gap:8px}
  .ks-feature p{font-size:15.5px}

  /* the demo: a band of its own rather than one more paragraph */
  .ks-demo{background:var(--site-soft);gap:18px}
  .ks-demo .s-btn{padding:14px 28px;font-size:16px}

  /* price: the card on the left, the two extras beside it */
  .ks-price{grid-template-columns:minmax(0,560px) minmax(0,1fr);column-gap:72px;
    grid-template-rows:auto auto 1fr;row-gap:36px;align-items:start}
  .ks-price>h2{grid-column:1 / -1;margin-bottom:0}
  .ks-price-card{grid-row:2 / span 2;max-width:none;padding:36px}
  .ks-price-terms,.ks-price-list{font-size:16px}
  .ks-price-note{font-size:14.5px}
  .ks-price-extra{gap:10px}
  .ks-price-extra p{font-size:16px}

  /* promises: two columns, so a short list does not leave the right half empty */
  .ks-promise-list{font-size:17px;max-width:none;display:block;columns:2;column-gap:72px}
  .ks-promise-list li{break-inside:avoid;margin-bottom:14px}

  /* questions: two columns; a question never splits across them */
  .ks-faq{columns:2;column-gap:72px}
  .ks-faq>h2{column-span:all}
  .ks-q{break-inside:avoid;padding:18px 0}
  .ks-q summary{font-size:17px}
  .ks-q p{font-size:15.5px}

  /* contact: the ways to reach us on the left, the form on the right */
  .ks-contact{grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:72px;
    align-content:start}
  .ks-contact>*{grid-column:1}
  .ks-contact>.ks-form{grid-column:2;grid-row:1 / span 6;max-width:none;
    background:var(--site-soft);border:1px solid var(--site-line);
    border-radius:var(--r-sheet);padding:32px}
  .ks-form .input{background:var(--site-bg)}
  .ks-contact .s-btn{padding:13px 26px;font-size:15.5px}

  .ks-footer{max-width:none;padding:36px var(--ks-pad);font-size:14px}

  /* legal pages share the header, so they get the same header and readable type */
  .ks-legal{padding-block:72px}
  .ks-legal p,.ks-legal li{font-size:16px}
  .ks-legal-lead{font-size:18px!important}
}