/* site.css is the marketing site's sheet: the home page, pricing, contact, the sign-up
   and login forms and a customer's published index, in the FlexBiz design
   (tasks/003-design). The interface under /app and /admin has its own, app.css, and the
   icon font is in icons.css, which both load.

   The faces of the design, served from this origin: the content security policy allows
   fonts from here only, and a font fetched from Google would tell it about every
   visitor. Latin subsets, which hold all five guide languages. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url(fonts/roboto-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap;
             src: url(fonts/lato-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
             src: url(fonts/lato-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
             src: url(fonts/lato-latin-700-normal.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --bg: #f9f5f4; --panel: #fff; --fg: #444; --heading: #171717; --muted: #666;
  --line: #ebe5e3; --accent: #dd3209; --accent-dark: #b82a07; --link: var(--accent-dark);
  --bad: #b0123b; --shadow: 0 5px 25px -5px rgba(0,0,0,.06);
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-heading: "Lato", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-nav: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* The dark band of the home page: the hero and the call to action at its end. Change
     --hero-bg to recolour both (a section may also set it in a style attribute), and set
     --hero-fg with it when the new colour is light. The card, line and muted text on the
     band are mixed from these two, so they follow. */
  --hero-bg: #060606; --hero-fg: #fff;
  --hero-surface: color-mix(in srgb, var(--hero-bg), var(--hero-fg) 14%);
  --hero-line: color-mix(in srgb, var(--hero-fg), transparent 88%);
  --hero-muted: color-mix(in srgb, var(--hero-fg), transparent 25%);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --panel: #1e1e1e; --fg: #e0e0e0; --heading: #fff; --muted: #a3a3a3;
          --line: #2f2f2f; --link: #ff7a52; --shadow: 0 1px 2px rgba(0,0,0,.5); }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--font); }
button, input, select, textarea { font-family: inherit; }
a { color: var(--link); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--heading); }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 10px; }
h2 { font-size: 21px; margin: 32px 0 12px; }
h3 { font-size: 17px; margin: 0 0 8px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em;
       background: rgba(127,127,127,.13); padding: 1px 5px; border-radius: 4px; }

/* The header in two rows, as the design draws it: the brand and the account on top,
   the navigation in a band below. It stays on screen while the page scrolls; on a
   customer's published index it scrolls away. */
.top { position: relative; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--line); }
.top.sticky { position: sticky; top: 0; transition: box-shadow .3s; }
.top.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.08); }
.container, .top-row { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
           flex-wrap: wrap; padding-top: 16px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
         color: var(--heading); font: 700 24px/1.2 var(--font-heading); }
.brand-mark { flex: none; }
.top-row .brand { margin-right: auto; }
.mainnav a.narrow-only { display: none; }
.who { display: flex; gap: 14px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.who form { margin: 0; }
.who > a:not(.btn) { color: var(--heading); text-decoration: none; }
.who > a:not(.btn):hover { color: var(--accent); }
/* A call to action among links: the link colour must not win. */
.who a.btn, .who a.btn:hover { color: #fff; }
.nav-wrap { background: color-mix(in srgb, var(--fg), transparent 96%); }
.mainnav { display: flex; justify-content: center; flex-wrap: wrap; max-width: 1180px;
           margin: 0 auto; padding: 0 24px; }
.mainnav a { color: var(--heading); text-decoration: none; font: 500 15px/1 var(--font-nav);
             padding: 16px 15px; transition: color .3s; }
.mainnav a.on, .mainnav a:hover { color: var(--accent); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
              padding: 0; border: 0; background: none; color: var(--heading); font-size: 26px; cursor: pointer; }

.page { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
.narrow { max-width: 460px; margin: 0 auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.grow { flex: 1; }
.lead { color: var(--muted); max-width: 74ch; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
        padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }

.btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
       padding: 9px 16px; font: 500 14px/1.4 var(--font); cursor: pointer; text-decoration: none;
       transition: background .3s, color .3s, border-color .3s, transform .3s; }
.btn:hover { background: var(--accent-dark); }
/* A button the page has disabled says so: the tooltip on it says why. */
.btn:disabled, .btn.ghost:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--accent); }
.btn.ghost:disabled:hover { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--heading); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
/* The design's outlined button: capitals, a hairline, filled on hover. */
.btn.outline { background: transparent; color: var(--heading); border: 1px solid color-mix(in srgb, var(--fg), transparent 70%);
               border-radius: 4px; padding: 10px 24px; text-transform: uppercase; letter-spacing: .8px; }
.btn.outline:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.big { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: 15px; border-radius: 10px; }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer;
           font-size: 13px; padding: 0 4px; }
.linkbtn:hover { color: var(--fg); text-decoration: underline; }
.linkbtn.danger, .danger { color: var(--bad); }
.card.danger { color: inherit; border-color: var(--bad); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.danger:hover { background: #a3271b; }

.form label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=url],
.form input:not([type]), .form select, .form textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit;
  color: var(--fg); background: var(--panel); border: 1px solid color-mix(in srgb, var(--fg), transparent 80%);
  border-radius: 8px; transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 85%);
}
.form textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.form small { display: block; margin-top: 3px; color: var(--muted); }
.form.inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
/* A label's margin would put the button 12px below the field it belongs to. */
.form.inline > label { margin-bottom: 0; }
.form.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form.grid2 button { grid-column: 1 / -1; justify-self: start; }
.form.grid2 > details.more, .form .span2 { grid-column: 1 / -1; }
.form details.more > .form { margin-top: 10px; }
.form label.check { display: flex; gap: 8px; align-items: center; color: var(--fg); font-size: 14px; }
.form label.check input { margin: 0; }
.narrow.wide-form { max-width: 640px; }

.note { border: 1px solid var(--line); border-left: 3px solid var(--muted);
        background: var(--panel); border-radius: 7px; padding: 10px 14px; margin-bottom: 16px; }
.note.ok { border-left-color: var(--accent); }
.note.bad { border-left-color: var(--bad); }
.note ul { margin: 6px 0 0 18px; padding: 0; }

/* A plan as the design's pricing card: the name and the price centred, the selling
   points ticked, the button at the foot of every card at the same height. The pricing
   page and the home page share it; the billing page draws the same card body in
   app.css. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 36px 28px 28px; margin: 0; }
.plan h3 { text-align: center; font-size: 24px; font-weight: 400; letter-spacing: -.01em; margin: 0 0 6px; }
/* The amount and its currency never break apart; the interval moves under them when the
   card is narrow. */
.plan .price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 4px;
               white-space: nowrap; font: 300 36px/1.15 var(--font-heading); color: var(--heading);
               letter-spacing: -.02em; margin: 6px 0 14px; }
.plan .price span { font: 400 15px var(--font); color: var(--muted); letter-spacing: 0; }
.plan > p { text-align: center; }
.plan ul { list-style: none; margin: 8px 0 12px; padding: 0; font-size: 15px; }
.plan ul li { position: relative; padding: 7px 0 7px 28px; }
.plan ul li::before { content: "\f272"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 9px;
                      line-height: 1; color: var(--accent); }
.plan > .btn, .plan > form { margin-top: auto; }
.plan > .btn, .plan > form .btn { display: block; width: 100%; text-align: center; padding: 12px 16px;
             font-size: 15px; background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.plan > .btn:hover, .plan > form .btn:hover, .plan.highlight > .btn, .plan.highlight > form .btn {
  background: var(--accent); color: #fff; }
.plan.highlight > .btn:hover, .plan.highlight > form .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.plan > form { margin-bottom: 0; }
.plan.current, .plan.highlight { border-color: var(--accent); }
/* The recommended plan wears a tab on its top edge. */
.featured-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); white-space: nowrap;
                  background: var(--accent); color: #fff; padding: 6px 18px; border-radius: 0 0 8px 8px;
                  font-size: 12px; font-weight: 600; letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) {
  .plan { transition: transform .3s, box-shadow .3s; }
  .plan:hover { transform: translateY(-5px); box-shadow: 0 10px 40px color-mix(in srgb, var(--fg), transparent 85%); }
}

/* The published index: a plain list of guides for a customer's readers. */
.guidelist { padding-left: 20px; margin: 0 0 24px; }
.guidelist li { margin: 8px 0; }
.guidelist .muted { margin-left: 8px; font-size: 13px; }

.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
/* A section that folds away, without JavaScript. */
details.more > summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-block; width: 18px; color: var(--muted); }
details.more[open] > summary::before { content: "-"; }
details.more[open] > summary { margin-bottom: 12px; }
/* A sentence typed by a person reads in the page font; only recipes are monospace. */
.form textarea.prose { font: inherit; }
.form.grid2 .span2 { grid-column: 1 / -1; }
.form > details.more { margin-bottom: 16px; }
/* Narrow screens: one column everywhere. */
@media (max-width: 720px) {
  .page { padding: 20px 16px 48px; }
  .container, .top-row { padding-left: 16px; padding-right: 16px; }
  .top-row { padding-top: 10px; padding-bottom: 10px; }
  .brand { font-size: 20px; }
  .who { gap: 10px; font-size: 13px; }
  /* The row keeps the brand, the call to action and the menu button; Log in moves into
     the menu. */
  .who .wide-only { display: none; }
  .mainnav a.narrow-only { display: block; }
  /* Without the script the band scrolls sideways; with it, the band folds away behind
     the menu button (site.js). */
  .mainnav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 0 8px;
             white-space: nowrap; scrollbar-width: none; }
  .mainnav a { padding: 13px 10px; }
  .js .nav-toggle { display: inline-flex; }
  .js .top:not(.nav-open) .nav-wrap { display: none; }
  .js .top.nav-open .mainnav { flex-direction: column; overflow: visible; padding: 4px 16px 10px; }
  .js .top.nav-open .mainnav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .js .top.nav-open .mainnav a:last-child { border-bottom: 0; }
  .form.grid2 { grid-template-columns: 1fr; }
}

/* The contact form's honeypot: out of sight and out of the tab order. */
.contact-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* A plan's numbers under its selling points, label beside value. */
.plan .limits { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 12px 0 16px;
        padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.plan .limits dt { color: var(--muted); }
.plan .limits dd { margin: 0; }
/* The footer is the design's: the brand, two columns of links and a call to action
   above a bottom bar; a customer's published index keeps the bottom bar alone. */
.foot { background: var(--panel); border-top: 1px solid var(--line); color: var(--fg); }
.foot-main { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.foot .tagline { color: var(--muted); font-size: 16px; font-weight: 300; line-height: 1.7; margin: 14px 0 0; max-width: 36ch; }
.foot h5 { font: 500 16px/1.3 var(--font-heading); letter-spacing: .5px; margin: 0 0 18px; }
.foot-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; }
.foot-links ul { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: 12px; }
.foot-links a { position: relative; padding-left: 10px; color: var(--muted); font-weight: 300; text-decoration: none;
                transition: color .3s, padding-left .3s; }
.foot-links a::before { content: "\2192"; position: absolute; left: 0; opacity: 0; color: var(--accent); transition: opacity .3s; }
.foot-links a:hover { color: var(--accent); padding-left: 16px; }
.foot-links a:hover::before { opacity: 1; }
.foot-bottom { border-top: 1px solid var(--line); padding: 22px 0; color: var(--muted); font-size: 14px; font-weight: 300; }
.foot-bottom .container { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.foot-bottom b { color: var(--heading); font-weight: 500; }
.foot-bottom a { color: var(--muted); }
.foot-bottom a:hover { color: var(--accent); }

/* The home page runs its sections edge to edge; each one holds a .container. */
.page.landing { max-width: none; padding: 0; }
.page.landing > .note { max-width: 1132px; margin: 16px auto; }
.section { background: var(--panel); padding: 80px 0; }
.section.alt { background: var(--bg); }
/* The signed-out header stays on screen, so an anchor lands below it. */
section[id] { scroll-margin-top: 120px; }
.section-title { text-align: center; padding-bottom: 48px; }
.section-title h2 { position: relative; font-size: 32px; font-weight: 700; margin: 0 0 20px; padding-bottom: 20px; }
.section-title h2::before { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; margin: auto;
                            width: 160px; height: 1px; background: color-mix(in srgb, var(--fg), transparent 60%); }
.section-title h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin: auto;
                           width: 60px; height: 3px; background: var(--accent); }
.section-title p { color: var(--muted); max-width: 62ch; margin: 0 auto; }

/* The hero and the call to action are drawn on --hero-bg (see :root). */
.hero, .cta-band { position: relative; overflow: clip; background: var(--hero-bg); color: var(--hero-fg); }
.hero h1, .cta-band h2 { color: var(--hero-fg); }
.hero { padding: 100px 0 90px; min-height: 60vh; display: grid; align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1200px 600px at 10% 20%, color-mix(in srgb, var(--accent), transparent 82%), transparent 70%),
              radial-gradient(900px 500px at 90% 80%, color-mix(in srgb, var(--hero-fg), transparent 92%), transparent 70%); }
.hero .container { position: relative; width: 100%; display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.hero-card { background: var(--hero-surface); border: 1px solid var(--hero-line); border-radius: 16px; padding: 36px;
             box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px;
           font-size: 13px; font-weight: 600; color: var(--hero-muted); background: color-mix(in srgb, var(--accent), transparent 85%); }
.eyebrow .bi, .mini-stats .bi { color: var(--accent); }
.hero h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; font-weight: 700; margin: 0 0 18px; }
.hero .lead { color: var(--hero-muted); font-size: 17px; max-width: 60ch; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--hero-fg); text-decoration: none; transition: color .3s; }
.link-arrow .circle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
                      color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 85%); transition: background .3s, transform .3s; }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .circle { background: color-mix(in srgb, var(--accent), transparent 75%); transform: scale(1.05); }
.mini-stats { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 28px 0 0; padding: 0;
              font-size: 14px; color: var(--hero-muted); }
.mini-stats li { display: flex; align-items: center; gap: 8px; }

/* The hero's picture is drawn, not photographed: an application window with numbered
   markers on its controls, and the guide made of it leaning on its corner. It is a
   light screen whatever the theme, as the screenshots in a guide are. Its classes are
   mock-*: the editor's frame owns .shot (in app.css), and shotframe_test.go reads that
   rule by name. */
.media-stack { position: relative; width: 100%; max-width: 520px; margin: 0 auto 40px; }
.mock { border-radius: 14px; overflow: hidden; background: #fff; color: #171717; border: 1px solid var(--hero-line); }
.mock-app { transform: rotate(-2deg); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1efee; border-bottom: 1px solid #e6e1df; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d4d2; }
.mock-bar span { margin-left: 10px; height: 8px; width: 45%; border-radius: 4px; background: #e2dddb; }
.mock-body { display: grid; grid-template-columns: 30% 1fr; min-height: 260px; }
.mock-side { display: flex; flex-direction: column; gap: 14px; padding: 20px 14px; background: #faf8f7; border-right: 1px solid #eee9e7; }
.mock-side b { position: relative; display: block; height: 9px; width: 80%; border-radius: 5px; background: #e6e1df; }
.mock-side b:nth-child(2n) { width: 62%; }
.mock-side b.on { background: color-mix(in srgb, var(--accent), transparent 70%); }
.mock-main { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; }
.mock-title { height: 14px; width: 55%; border-radius: 7px; background: #cfcac8; }
.mock-field { display: grid; gap: 7px; }
.mock-label { height: 7px; width: 32%; border-radius: 4px; background: #e2dddb; }
.mock-input { position: relative; height: 28px; border: 1px solid #dcd6d4; border-radius: 6px; background: #fff; }
.mock-button { position: relative; align-self: flex-start; padding: 9px 18px; border-radius: 6px; background: #2f2f2f;
               color: #fff; font: 600 12px/1 var(--font); }
.mock-marker { position: absolute; top: 50%; right: -12px; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%;
               background: var(--accent); color: #fff; font: 500 13px/24px var(--font); text-align: center;
               box-shadow: 0 2px 6px rgba(0,0,0,.3); }
/* Narrow and far right, so it leaves the Save button's marker in view. */
.mock-guide { position: absolute; right: -10%; bottom: -18%; width: 52%; padding: 16px 18px; transform: rotate(5deg);
              box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.mock-guide p { margin: 0 0 10px; font: 700 14px/1.3 var(--font-heading); color: #171717; }
.mock-guide ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: #444; }
.mock-guide li { display: flex; align-items: center; gap: 8px; }
.mock-guide li span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
                      border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; }
.floating-badge { position: absolute; top: -18px; left: -14px; display: inline-flex; align-items: center; gap: 8px;
                  padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--hero-fg);
                  background: var(--hero-surface); border: 1px solid var(--hero-line); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.floating-badge .bi { color: var(--accent); }

/* The cards of the home page: an accent bar grows down the edge on hover. */
.service-item { position: relative; overflow: hidden; height: 100%; padding: 32px; border-radius: 12px;
                background: var(--panel); border: 1px solid var(--line); box-shadow: 0 5px 25px -5px rgba(0,0,0,.05); }
.service-item::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: var(--accent); }
.service-item:hover::before { height: 100%; }
.service-item .icon { display: inline-flex; margin-bottom: 22px; font-size: 40px; line-height: 1;
                      color: color-mix(in srgb, var(--accent), transparent 15%); }
.service-item .marker-icon { width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%;
                             background: var(--accent); color: #fff; font: 700 22px/1 var(--font-heading); }
.service-item h3 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.service-item p { color: var(--muted); line-height: 1.7; margin: 0; }

/* The closing call to action, a card on the dark band. */
.cta-band { padding: 80px 0; }
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px 48px; align-items: center; padding: 48px;
             border-radius: 16px; background: var(--hero-surface); border: 1px solid var(--hero-line); }
.section-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
                 letter-spacing: .1em; text-transform: uppercase; color: var(--hero-muted); }
.section-label::before { content: ""; width: 24px; height: 2px; background: var(--accent); }
.cta-band h2 { font: 300 clamp(28px, 3.4vw, 40px)/1.2 var(--font-heading); margin: 12px 0 16px; }
.cta-band h2 span { display: block; color: var(--accent); font-weight: 400; }
.cta-band p { color: var(--hero-muted); font-size: 17px; max-width: 56ch; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }

/* A page's title over its content, centred: the pricing page. */
.page-title { text-align: center; padding: 16px 0 40px; }
.page-title h1 { font-size: 40px; font-weight: 700; margin: 0 0 14px; }
.page-title p { font-size: 17px; color: var(--muted); max-width: 60ch; margin: 0 auto; }
.page-title p + p { margin-top: 12px; font-size: 15px; }

/* Motion, only for readers who have not asked for less. site.js marks what it fades in
   (data-reveal) and lets it in once on screen; without the script nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  /* The transition is on the revealed state, and names the hover's properties too: a
     card's own transition rule would otherwise replace the fade. */
  .reveal { opacity: 0; translate: 0 24px; }
  .reveal.revealed { opacity: 1; translate: none;
                     transition: opacity .6s ease, translate .6s ease, transform .3s, box-shadow .3s; }
  .btn.big:hover, .btn.outline:hover { transform: translateY(-2px); }
  .mock { transition: transform .3s; }
  .mock-app:hover { transform: rotate(-2deg) translateY(-4px); }
  .mock-guide:hover { transform: rotate(5deg) translateY(-4px); }
  .floating-badge { animation: float-y 4s ease-in-out infinite; }
  .service-item { transition: transform .3s, box-shadow .3s; }
  .service-item::before { transition: height .3s; }
  .service-item .icon { transition: transform .3s, color .3s; }
  .service-item:hover { transform: translateY(-5px); box-shadow: 0 8px 30px -5px rgba(0,0,0,.08); }
  .service-item:hover .icon { transform: scale(1.1) rotate(5deg); color: var(--accent); }
}
@keyframes float-y { 50% { transform: translateY(-8px); } }

@media (max-width: 992px) {
  .hero { min-height: 0; padding: 72px 0 64px; }
  .hero .container { grid-template-columns: 1fr; gap: 56px; }
  .foot-main { grid-template-columns: 1fr 1fr; }
  .foot-main > :first-child { grid-column: 1 / -1; }
  .cta-inner { grid-template-columns: 1fr; padding: 36px; }
}
@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .section-title h2, .page-title h1 { font-size: 28px; }
  .hero-card { padding: 24px; }
  .media-stack { max-width: 400px; }
  .service-item { padding: 24px; }
  .foot-main { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
  .cta-inner { padding: 28px 22px; }
}