/* ══════════════════════════════════════════════════════════════════════════
   DigitalSol — digitalsol.cloud

   One stylesheet, no build step, no framework. The page ships no JavaScript
   at all: the Products dropdown and the mobile menu are <details> elements,
   so both work with scripting off and neither needs hydrating.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   DigitalSol — one file, no build step, no framework, no JavaScript.
   The mobile menu and the Products dropdown are <details> elements, so there
   is still nothing to bundle and nothing to break with scripting off.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Light only, deliberately, and every surface is painted rather than
     inherited — so a visitor whose OS is dark still sees the shop-front the
     screenshots were taken in. */
  color-scheme: light;

  --blue:        #2550E6;
  --blue-dark:   #1B3FC4;
  --blue-tint:   #EFF3FE;
  --blue-soft:   #DCE4FD;

  --green:       #12855F;
  --fbr:         #9A6B12;   /* Easy FBR — the gold from its own wordmark */
  --fbr-tint:    #FBF5E8;
  --fbr-soft:    #EEDFBE;
  --green-dark:  #0D6A4C;
  --green-tint:  #EAF8F2;
  --green-soft:  #CFEDE1;

  /* WhatsApp's own green, used only on WhatsApp affordances so the icon is
     recognisable at a glance. Never as a UI accent. */
  --wa:          #25D366;

  --cream:       #FDF7EE;
  --cream-line:  #F1E5D2;
  --tan:         #B4762E;

  --ink:         #0E1729;
  --ink-2:       #26314A;
  --muted:       #56617C;
  --line:        #E6E9F1;
  --line-2:      #D5DAE6;
  --bg:          #FFFFFF;
  --bg-alt:      #F7F9FC;

  --amber-tint:  #FFF4EC;
  --violet-tint: #F2EFFE;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(1.125rem, 4vw, 3.5rem);
  --r-btn: 10px;
  --r-card: 16px;
  --r-tile: 12px;
  --shadow-sm: 0 1px 2px rgba(14, 23, 41, .05), 0 1px 3px rgba(14, 23, 41, .04);
  --shadow-md: 0 4px 16px -6px rgba(14, 23, 41, .12), 0 2px 6px -2px rgba(14, 23, 41, .06);
  --shadow-lg: 0 24px 60px -28px rgba(14, 23, 41, .30), 0 8px 24px -12px rgba(14, 23, 41, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* the guarantee against a sideways scroll at 320px */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.025em; line-height: 1.14; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1rem; text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

.wrap { max-width: 78rem; margin: 0 auto; padding-inline: var(--gutter); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem;                 /* 46px — comfortable touch target */
  padding: .6rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font); font-size: .9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.btn i { font-style: normal; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.btn:hover i { transform: translateX(3px); }

.btn-blue  { background: var(--blue);  color: #fff; box-shadow: var(--shadow-sm); }
.btn-blue:hover { background: var(--blue-dark); }
.btn-green { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-green:hover { background: var(--green-dark); }
.btn-line  { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: var(--blue); color: var(--blue); }
.btn-wa    { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn-wa:hover { border-color: var(--wa); }
.btn-wa svg { color: var(--wa); }
.btn-sm { min-height: 2.5rem; padding: .45rem 1rem; font-size: .875rem; }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .site-head { background: #fff; } }

.head-inner { display: flex; align-items: center; gap: 1rem; padding-block: .8rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand-mark { width: 2rem; height: 2rem; flex: none; border-radius: 9px; }
.brand-name { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.03em; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav > a, .drop > summary {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 2.75rem; padding: .5rem .75rem;
  border-radius: var(--r-btn);
  font-size: .9375rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; cursor: pointer; list-style: none;
}
.nav > a:hover, .drop > summary:hover { background: var(--bg-alt); color: var(--ink); }
.drop > summary::-webkit-details-marker { display: none; }
.drop { position: relative; }
.drop .chev { width: .7rem; height: .7rem; transition: transform .18s ease; }
.drop[open] .chev { transform: rotate(180deg); }

.drop-panel {
  position: absolute; left: 0; top: calc(100% + .4rem);
  width: 21rem; padding: .5rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-md);
  display: grid; gap: .15rem;
}
.drop-item { display: flex; gap: .75rem; padding: .7rem; border-radius: var(--r-tile); text-decoration: none; }
.drop-item:hover { background: var(--bg-alt); }
.drop-item .tile { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 9px; display: grid; place-items: center; }
.drop-item .tile svg { width: 1.125rem; height: 1.125rem; color: #fff; }
.drop-item b { display: block; font-size: .9375rem; font-weight: 700; }
.drop-item span { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.45; }

.head-cta { display: flex; align-items: center; gap: .5rem; }

/* Mobile disclosure menu */
.menu { position: relative; display: none; }
.menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem .9rem;
  border: 1.5px solid var(--line-2); border-radius: var(--r-btn);
  font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu .bars { display: grid; gap: 3px; }
.menu .bars b { display: block; width: 16px; height: 1.6px; background: currentColor; border-radius: 2px; }
.menu[open] > summary { border-color: var(--blue); color: var(--blue); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + .5rem);
  width: min(17rem, calc(100vw - 2 * var(--gutter)));
  padding: .5rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-md); display: grid; gap: .1rem;
}
.menu-panel a {
  display: flex; align-items: center; min-height: 2.75rem;
  padding: .6rem .75rem; border-radius: var(--r-tile);
  font-size: .9688rem; font-weight: 500; text-decoration: none;
}
.menu-panel a:hover { background: var(--bg-alt); }
.menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: .4rem .25rem; }
.menu-panel .go { color: var(--blue); font-weight: 700; }

@media (max-width: 68rem) {
  .nav { display: none; }
  .head-cta .btn-wa, .head-cta .login { display: none; }
  .menu { display: block; }
}
@media (max-width: 27rem) { .head-cta .btn-blue { display: none; } }

.login { font-size: .9375rem; font-weight: 600; text-decoration: none; padding: .5rem .75rem; }
.login:hover { color: var(--blue); }

/* ── Section furniture ────────────────────────────────────────────────── */
.section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.section-alt { background: var(--bg-alt); }
.head-mid { max-width: 44rem; margin-inline: auto; text-align: center; }
.head-mid h2 { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem); font-weight: 800; }
.head-mid p { margin: .85rem 0 0; color: var(--muted); font-size: 1.0625rem; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem); position: relative; overflow: hidden; }
/* One soft wash behind the devices instead of a decorative blob. */
.hero::before {
  content: ""; position: absolute; z-index: 0;
  right: -14rem; top: -10rem; width: 44rem; height: 44rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--blue-tint) 0%, rgba(239,243,254,0) 68%);
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 66rem) { .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); } }

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem .4rem .65rem; border-radius: 999px;
  background: var(--green-tint); border: 1px solid var(--green-soft);
  font-size: .8125rem; font-weight: 600; color: var(--green-dark);
}
.badge svg { width: .95rem; height: .95rem; flex: none; }

.hero h1 {
  margin: 1.15rem 0 0;
  font-size: clamp(2.05rem, 1.4rem + 2.9vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.038em; line-height: 1.04;
  text-wrap: balance;
}
.hero h1 span { color: var(--blue); display: block; }
.hero .sub { margin: 1.2rem 0 0; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--muted); }
.hero-cta { margin-top: 1.85rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.ticks { margin: 1.85rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.6rem; }
.ticks li { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; }
.ticks svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--green); }

/* ── Device composition ───────────────────────────────────────────────
   Two real screens, the counter behind and the parchi in front. A dark
   bezel rather than a floating drop-shadow, because a screenshot of a
   till belongs on a device that sits on a till. */
.devices { position: relative; min-width: 0; padding-bottom: 4.5rem; }
.screen { background: #0E1729; padding: .5rem; border-radius: 14px; box-shadow: var(--shadow-lg); }
.screen img { border-radius: 8px; }
.screen-front {
  width: 40%; min-width: 11rem;
  position: absolute; left: 3%; bottom: 0;
  padding: .375rem; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.6);
}
.screen-front img { border-radius: 7px; }
@media (max-width: 66rem) {
  .devices { margin-top: .5rem; padding-bottom: 3.5rem; }
  .screen-front { width: 38%; left: 2%; }
}
@media (max-width: 34rem) {
  /* Below this the inset screen is too small to read, so the counter
     stands on its own rather than being decorated. */
  .screen-front { display: none; }
  .devices { padding-bottom: 0; }
}

/* ── Product cards ────────────────────────────────────────────────────── */
.products { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 62rem) { .products { grid-template-columns: 1fr 1fr; } }

.product {
  display: flex; flex-direction: column;
  padding: clamp(1.35rem, 2.8vw, 2rem);
  border-radius: var(--r-card); border: 1px solid var(--line);
}
.product-pos    { background: var(--blue-tint);  border-color: var(--blue-soft); }
.product-tailor { background: var(--green-tint); border-color: var(--green-soft); }

.tile { width: 2.75rem; height: 2.75rem; border-radius: var(--r-tile); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.tile svg { width: 1.35rem; height: 1.35rem; color: #fff; }
.tile-pos { background: var(--blue); }
.tile-tailor { background: var(--green); }

.product h3 { margin: 1rem 0 0; font-size: 1.5rem; font-weight: 800; }
.product .who { margin: .5rem 0 0; color: var(--muted); font-size: .9688rem; }
.product ul { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.product li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; font-weight: 500; }
.product li svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .28rem; }
.product-pos li svg { color: var(--blue); }
.product-tailor li svg { color: var(--green); }

.product-shot { margin-top: 1.5rem; border-radius: var(--r-tile); overflow: hidden; border: 1px solid rgba(14,23,41,.10); background: #fff; box-shadow: var(--shadow-md); }
.product-shot img { width: 100%; height: auto; }
/* The button is pinned to the foot of the card so the three line up across
   the row. The gap belongs to the list above it: `margin-top: auto` alone
   collapses to nothing on the card whose copy happens to fill the space. */
.product ul { margin-bottom: 1.5rem; }
.product .btn { align-self: start; margin-top: auto; }

/* ── Four pillars ─────────────────────────────────────────────────────── */
.pillars { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(1.75rem, 3vw, 2.25rem); text-align: center; }
@media (min-width: 40rem) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar .circle { width: 3.25rem; height: 3.25rem; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; }
.pillar .circle svg { width: 1.5rem; height: 1.5rem; }
.c-blue   { background: var(--blue-tint); }   .c-blue svg   { color: var(--blue); }
.c-green  { background: var(--green-tint); }  .c-green svg  { color: var(--green); }
.c-amber  { background: var(--amber-tint); }  .c-amber svg  { color: #C2610F; }
.c-violet { background: var(--violet-tint); } .c-violet svg { color: #6042C8; }
.pillar h3 { margin: 1rem 0 0; font-size: 1.0625rem; font-weight: 700; }
.pillar p { margin: .5rem 0 0; color: var(--muted); font-size: .9375rem; }

/* ── Made for Pakistani businesses ────────────────────────────────────── */
.pk {
  margin-top: 0; padding: clamp(1.85rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-card);
}
.pk h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 800; text-align: center; }
.pk > p { margin: .75rem auto 0; text-align: center; color: var(--muted); max-width: 34rem; }
.pk-grid { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 34rem) { .pk-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 62rem) { .pk-grid { grid-template-columns: repeat(8, 1fr); } }
.pk-item { text-align: center; }
.pk-item svg { width: 1.6rem; height: 1.6rem; margin: 0 auto; color: var(--tan); }
.pk-item b { display: block; margin-top: .6rem; font-size: .875rem; font-weight: 700; }

/* ── Feature groups ──────────────────────────────────────────────────── */
.fgroup { margin-top: clamp(2rem, 4vw, 2.75rem); }
.fgroup + .fgroup { margin-top: clamp(2.25rem, 4vw, 3rem); }
.fgroup-head { display: flex; align-items: center; gap: .75rem; }
.fgroup-head .tile { width: 2rem; height: 2rem; border-radius: 8px; }
.fgroup-head .tile svg { width: 1rem; height: 1rem; }
.fgroup-head h3 { font-size: 1.125rem; font-weight: 800; }
.fgroup-head::after { content: ""; flex: 1; border-bottom: 1px solid var(--line); }

.features { margin-top: 1.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .features { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 62rem) { .features-5 { grid-template-columns: repeat(5, 1fr); } }
.feature h4 { margin: .65rem 0 0; font-size: 1rem; font-weight: 700; }
.feature p { margin: .35rem 0 0; color: var(--muted); font-size: .9062rem; }
.feature svg { width: 1.35rem; height: 1.35rem; }
.f-pos svg { color: var(--blue); }
.f-tailor svg { color: var(--green); }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.prices { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 56rem) { .prices { grid-template-columns: 1fr 1fr 1fr; } }
.price { display: flex; flex-direction: column; padding: clamp(1.35rem, 2.5vw, 1.85rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.price-pos    { background: var(--blue-tint);  border-color: var(--blue-soft); }
.price-tailor { background: var(--green-tint); border-color: var(--green-soft); }
.price-help   { background: var(--violet-tint); border-color: #E2DBFB; }
.price .tile { width: 2.25rem; height: 2.25rem; border-radius: 9px; }
.price .tile svg { width: 1.1rem; height: 1.1rem; }
.price h3 { margin: .9rem 0 0; font-size: 1.25rem; font-weight: 800; }
.price-pos h3 { color: var(--blue); }
.price-tailor h3 { color: var(--green); }
.price p { margin: .5rem 0 0; color: var(--muted); font-size: .9375rem; }
.price .quote { margin-top: 1.15rem; font-size: .9375rem; font-weight: 700; color: var(--ink); }
/* This rule had `margin-top` twice, so the 1.5rem quietly beat the auto and
   the four pricing buttons each sat wherever their card's text ran out. */
.price > p:last-of-type { margin-bottom: 1.5rem; }
.price .btn { margin-top: auto; align-self: stretch; }

/* ── About ───────────────────────────────────────────────────────────── */
.about { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 62rem) { .about { grid-template-columns: 1fr 1fr; } }
.about h2 { font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem); font-weight: 800; }
.about p { margin: 1rem 0 0; color: var(--muted); font-size: 1.0312rem; }
.about-facts { margin: 0; padding: 0; display: grid; gap: 0; }
.about-facts > div { padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.about-facts > div:first-child { padding-top: 0; }
.about-facts dt { font-size: 1rem; font-weight: 700; }
.about-facts dd { margin: .35rem 0 0; color: var(--muted); font-size: .9375rem; }

/* ── Sign in & contact ───────────────────────────────────────────────── */
.duo { margin-top: clamp(2rem, 4vw, 2.75rem); display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 56rem) { .duo { grid-template-columns: 1fr 1fr; } }
.card { display: flex; flex-direction: column; padding: clamp(1.35rem, 2.5vw, 1.85rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.card h3 { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 800; }
.card p { margin: 0; color: var(--muted); font-size: .9375rem; }
.card-row { margin-top: auto; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .65rem; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-foot { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: clamp(2.75rem, 5vw, 4rem) 2.5rem; }
.foot-grid { display: grid; gap: 2.25rem; }
@media (min-width: 44rem) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.foot-grid h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .85rem; }
.foot-grid nav { display: grid; gap: .1rem; justify-items: start; }
.foot-grid nav a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; font-size: .9375rem; font-weight: 500; color: var(--muted); text-decoration: none; }
.foot-grid nav a:hover { color: var(--blue); }
.foot-grid nav a svg { width: 1rem; height: 1rem; flex: none; }
.foot-blurb { margin: .85rem 0 0; color: var(--muted); font-size: .9375rem; max-width: 22rem; }
.foot-base { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; color: var(--muted); font-size: .875rem; }
.foot-base p { margin: 0; }

/* ── Motion ──────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero .badge    { animation: rise .55s cubic-bezier(.2,.8,.2,1)  60ms both; }
.hero h1        { animation: rise .65s cubic-bezier(.2,.8,.2,1) 120ms both; }
.hero .sub      { animation: rise .65s cubic-bezier(.2,.8,.2,1) 190ms both; }
.hero-cta       { animation: rise .65s cubic-bezier(.2,.8,.2,1) 250ms both; }
.hero .ticks    { animation: rise .65s cubic-bezier(.2,.8,.2,1) 310ms both; }
.devices        { animation: rise .8s  cubic-bezier(.2,.8,.2,1) 330ms both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* ── Touch targets ───────────────────────────────────────────────────
   The compact 40px sizes are for pointers. Anything without hover — a
   phone, a tablet on a counter — gets the full 44px on every link and
   button, which is the whole audience for this page. */
@media (hover: none) {
  .btn-sm { min-height: 2.75rem; padding-block: .6rem; }
  .login { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .foot-grid nav a { min-height: 2.75rem; }
  .brand { min-height: 2.75rem; }
}

@media print {
  .site-head, .hero-cta, .menu, .hero::before { display: none; }
  body { background: #fff; }
}

/* ── Things that used to be inline style attributes ────────────────────────
   The vhost sends `style-src 'self'` with no 'unsafe-inline', so a style=""
   attribute is refused by the browser and silently does nothing. Both of
   these were doing real work — the sprite has to be out of flow, and the
   third pricing tile has to have a background or its white icon sits on
   white. They live here now, where the CSP allows them. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tile-help { background: #6042C8; }

/* ══ Easy FBR ══════════════════════════════════════════════════════════════
   The third product. Blue sells, green makes, gold files. */
.btn-fbr { background: var(--fbr); color: #fff; box-shadow: var(--shadow-sm); }
.btn-fbr:hover { filter: brightness(1.1); }
.tile-fbr { background: var(--fbr); }
.product-fbr { background: var(--fbr-tint); border-color: var(--fbr-soft); }
.product-fbr li svg { color: var(--fbr); }
.price-fbr { background: var(--fbr-tint); border-color: var(--fbr-soft); }
.price-fbr h3 { color: var(--fbr); }
.f-fbr svg { color: var(--fbr); }
.c-fbr { background: var(--fbr-tint); }
.c-fbr svg { color: var(--fbr); }

/* Three products, so the cards go three across and the screenshots come out
   of them — at a third of the width a screenshot is a texture, not evidence.
   They get their own band below instead, where they are big enough to read. */
@media (min-width: 62rem) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.proof { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 56rem) { .proof { grid-template-columns: 1fr 1fr; } }
.proof figure { margin: 0; }
.proof .frame {
  border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-md);
}
.proof img { width: 100%; height: auto; }
.proof figcaption { margin-top: .9rem; font-size: .9375rem; color: var(--muted); }
.proof figcaption b { color: var(--ink); font-weight: 600; }

/* Four pricing cards: two up at tablet, four across only when there is
   genuinely room, because a 4-across at 62rem gives each one 15rem. */
@media (min-width: 56rem) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 76rem) { .prices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Three ways in, three sign-ins. */
@media (min-width: 56rem) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trio { margin-top: clamp(2rem, 4vw, 2.75rem); display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

/* A card button may wrap onto a second line if the column is narrow; nowrap is
   for the header buttons, where there is always room. */
.price .btn, .card-row .btn { white-space: normal; }

/* ══ Lining up rows of cards ═══════════════════════════════════════════════
   Everything below is one problem wearing four hats: a heading or a line of
   copy wraps to a different number of lines in one card than in its
   neighbours, and everything under it slides down. Reserving the taller of
   the two heights puts the following block back on the same line, and a
   min-height still grows if the text needs more. */

/* The two screenshots are different shapes (1600x1000 and 1100x900), so the
   frames were different heights and the captions sat 107px apart. One aspect
   for both, each cropped from the edge that costs least: the till screen is
   centred, and the backup screen keeps its top where the shop name is. */
.proof .frame { aspect-ratio: 3 / 2; }
.proof img { width: 100%; height: 100%; object-fit: cover; }
.proof-pos img { object-position: 50% 50%; }
.proof-tailor img { object-position: 50% 0%; }

/* "For any registered business that files sales tax invoices..." runs a line
   longer than the other two, which pushed its tick list down. */
.product .who { min-height: 3.24em; }

/* "Not sure which one suits you?" is the only pricing heading that wraps. */
.price h3 { min-height: 2.28em; }

/* "Karigar & work tracking" and "Several businesses, one account" wrap where
   "Bulk upload" does not. */
.feature h4 { min-height: 2.28em; }

@media (max-width: 61.99rem) {
  /* Stacked, there is nothing beside them to line up with, so the reserved
     space would just be a gap. Held a hundredth below the breakpoint because
     max-width and min-width both match at exactly 62rem, and the reset was
     winning there. */
  .product .who, .price h3, .feature h4 { min-height: 0; }
}

/* Between 62rem and 72rem the three columns are narrow enough that one blurb
   takes a third line where its neighbours take two, so the reserve goes up
   for that band only. Above it two lines is right, and below it the cards are
   stacked and there is nothing to line up with. */
@media (min-width: 62rem) and (max-width: 72rem) {
  .product .who { min-height: 4.86em; }
  .card h3 { min-height: 2.28em; }
}

/* The getting-started cards go three across from 56rem, so their headings
   need the reserve from there too, not only in the narrow band. */
@media (min-width: 56rem) { .card h3 { min-height: 2.28em; } }