/* Portalora marketing site — light, warm, coral.
   Deliberately dependency-free: no web fonts, no scripts, no images are
   fetched, so the page is a single small HTML + CSS round trip. The site is
   served under a strict CSP (style-src 'self'; script-src 'self'), so every
   style lives here — never in a style="" attribute — and there is no JS at
   all. Text colours are checked against WCAG AA on their own background;
   the bright coral is decoration only and never carries text. */

:root {
  /* Warm neutrals */
  --bg: #fffaf8;
  --bg-tint: #fff3ef;
  --surface: #ffffff;
  --border: #f6e0d9;
  --border-strong: #eec9bf;

  /* Ink — 15.4:1, 6.3:1 and 5.1:1 on --bg */
  --ink: #2a1f1e;
  --ink-2: #6b5a57;
  --ink-3: #7a6763;

  /* Brand red. --red carries white text (4.6:1); --red-deep carries text on
     light backgrounds (5.2:1); --coral is for fills and glow only. */
  --red: #d83b30;
  --red-deep: #c9302a;
  --coral: #ff6b5e;
  --coral-soft: #ffd9d2;
  --coral-mist: #ffe9e4;
  /* The one tint a whole panel may be filled with — the CTA block, the paid
     plan, the "with Portalora" column. Flat, because a gradient on a panel
     that also has a border reads as two decisions where one will do. */
  --coral-wash: #fff6f3;

  /* Supporting hues, used as tints behind dark ink or as flat decoration. */
  --amber: #f5a524;
  --amber-mist: #fff0d6;
  --mint: #2fbf9b;
  --mint-mist: #d9f5ec;
  --lilac: #7c6bf5;
  --lilac-mist: #e9e6ff;
  --sky: #38a3e0;
  --sky-mist: #ddeffb;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Two shadows, both quiet. Depth on this page comes from the hairline
     borders and the tinted bands; a shadow under every card was doing the
     same job a second time and made the page look upholstered. --shadow is
     reserved for the few things that genuinely float above the page. */
  --shadow-sm: 0 1px 2px rgba(90, 40, 30, .05);
  --shadow: 0 1px 3px rgba(90, 40, 30, .05), 0 14px 34px rgba(120, 50, 40, .07);

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--red-deep); text-decoration: none; }
a:hover { color: var(--red); text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--coral-mist);
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 6px;
  word-break: break-word;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 650;
  z-index: 100;
}
.skip:focus { left: 0; color: #fff; text-decoration: none; }

.shell { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.shell.narrow { max-width: 780px; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 248, .82);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.02em;
}
.brand:hover { color: var(--ink); text-decoration: none; }

/* The mark: a square red tile with the lime slice in white inside it. The
   icon is sized by height at 72% of the tile and its width follows the SVG's
   own ratio, so it keeps a margin on all four sides and the tile stays square
   whatever proportions the artwork itself happens to have. */
.mark {
  width: 32px; height: 32px;
  border-radius: 10px;
  flex: none;
  background:
    url("/logo.svg?v=e464d7e0b1") center / auto 64% no-repeat,
    linear-gradient(140deg, #ff8a72, var(--red));
  box-shadow: 0 3px 10px rgba(216, 59, 48, .3);
}

.nav-links { display: flex; gap: 26px; margin-left: 8px; }
.nav-links a {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--red-deep); text-decoration: none; }
/* The page you are on, when it is a page rather than a section anchor. */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 640; }

.nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* The links stop fitting beside the brand and the buttons before the flex
   row itself runs out of room, so the whole row gives way here rather than
   overlapping the call to action. */
@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 560px) {
  .nav-inner { gap: 10px; padding: 0 16px; height: 62px; }
  .brand { font-size: 16px; gap: 9px; }
  .mark { width: 28px; height: 28px; border-radius: 9px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-sm { padding: 8px 14px; font-size: 14px; }
}
/* Narrower than an iPhone SE, the three items no longer fit on one line.
   Log in is what gives way: it is also in the footer, and the brand and the
   primary call to action are not. */
@media (max-width: 370px) { .nav-cta .btn-quiet { display: none; } }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font-size: 15.5px;
  font-weight: 640;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(216, 59, 48, .25);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover {
  background: var(--red-deep);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(216, 59, 48, .3);
}
.btn:active { transform: translateY(0); }

.btn-sm { padding: 9px 18px; font-size: 14.5px; }
.btn-lg { padding: 15px 30px; font-size: 16.5px; }

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn-quiet:hover {
  background: var(--coral-mist);
  color: var(--ink);
  border-color: var(--coral-soft);
  box-shadow: none;
}

/* ---------- Typography ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--red-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
  flex: none;
}

h1 {
  font-size: clamp(36px, 5.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
  margin: 0 0 22px;
  text-wrap: balance;
}

/* A hand-drawn-feeling highlight behind the second line of the headline.
   Painted as a background on the span itself rather than an absolutely
   positioned bar, so it follows the text across a line break: the bar needed
   `white-space: nowrap` to stay put, and that pushed the headline off the
   side of a phone (body's overflow-x: hidden then quietly clipped it).
   box-decoration-break: clone repeats the highlight on every wrapped line. */
.hl {
  color: var(--red-deep);
  padding-inline: .06em;
  margin-inline: -.06em;
  background-image: linear-gradient(var(--coral-soft), var(--coral-soft));
  background-repeat: no-repeat;
  background-size: 100% .28em;
  background-position: 0 calc(100% - .04em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

h2 {
  font-size: clamp(27px, 3.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -.028em;
  font-weight: 700;
  margin: 0 0 14px;
  text-wrap: balance;
}

h3 {
  text-wrap: balance;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.015em;
  font-weight: 660;
  margin: 0 0 8px;
}

.lede { color: var(--ink-2); font-size: 18px; max-width: 62ch; margin: 0 0 28px; text-wrap: pretty; }
.fine { color: var(--ink-3); font-size: 14px; margin: 0; }

/* ---------- Hero ---------- */

/* Lifts content above the decorative blobs, which are positioned and would
   otherwise paint over it. */
.layer { position: relative; z-index: 1; }

.hero {
  position: relative;
  padding: 88px 0 96px;
  overflow: hidden;
}

/* Soft colour washes. Purely decorative; they sit behind everything. */
/* Warmth, not weather. Wide and faint enough to read as a tint in the paper
   rather than as two coloured clouds parked behind the headline. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .26;
  pointer-events: none;
  z-index: 0;
}
.blob-a { width: 560px; height: 560px; top: -260px; left: -200px; background: var(--coral); }
.blob-b { width: 460px; height: 460px; top: -40px;  right: -220px; background: var(--amber); opacity: .16; }
.blob-d { width: 420px; height: 420px; top: -140px; left: 50%; margin-left: -210px; background: var(--coral); opacity: .18; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 56px 0 68px; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Hero illustration: a sentence, then a site ---------- */

.demo { margin: 0; }

/* Deliberately square to the grid. The two panels used to be rotated a
   degree each way; at a glance that does not read as playful, it reads as a
   page whose boxes have slipped. */
.ask {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-sm);
}
.ask-label {
  display: inline-block;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ask-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

.arrow {
  display: block;
  width: 2px;
  height: 30px;
  margin: 10px auto 8px;
  background: var(--coral-soft);
  position: relative;
}
.arrow::after {
  content: "";
  position: absolute;
  left: -5px; bottom: -2px;
  width: 12px; height: 12px;
  border: solid var(--coral);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.site {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.site-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--bg-tint);
  border-bottom: 1px solid var(--border);
}
.site-bar em {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-body { display: block; padding: 18px; }
.site-hero {
  display: block;
  height: 104px;
  border-radius: var(--r);
  background:
    radial-gradient(120px 80px at 78% 30%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(135deg, #ff9d84, var(--coral) 55%, #f2705f);
  margin-bottom: 16px;
}
.site-h { display: block; height: 14px; width: 52%; border-radius: var(--r-pill); background: #efdcd6; margin-bottom: 11px; }
.site-p { display: block; height: 9px; width: 88%; border-radius: var(--r-pill); background: #f4e7e2; margin-bottom: 8px; }
.site-p.short { width: 64%; margin-bottom: 18px; }
.site-btn {
  display: block;
  height: 30px;
  width: 118px;
  border-radius: var(--r-pill);
  background: var(--red);
}

/* ---------- Sections ---------- */

.section { padding: 96px 0; }
.section.tint {
  background: var(--bg-tint);
  border-block: 1px solid var(--border);
}
@media (max-width: 640px) { .section { padding: 64px 0; } }

/* Every section is eyebrow -> h2 -> lede -> content. The gap between the
   lede and the content is set once, here, so no two sections open with a
   different amount of air. */
.steps, .chips, .grid, .compare, .trust-grid, .faq { margin-top: 16px; }

/* Steps */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}
.step p { color: var(--ink-2); margin: 0; font-size: 15.4px; }

/* The three numerals used to be three different gradients — coral, amber,
   green — which put three unrelated accents in one row and made the order
   look like a category rather than a sequence. One tile, one colour; the
   numeral is the thing that differs. */
.step-n {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--coral-mist);
  border: 1px solid var(--coral-soft);
  color: var(--red-deep);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Chips */

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Ten trades in five rotating pastels read as confetti — the colours carried
   no meaning, so the eye kept looking for one. One quiet chip, repeated, and
   the list reads as the single thought it is. */
.chip {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 540;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Feature cards */

.grid {
  display: grid;
  /* min() so the track collapses on a phone narrower than the 290px floor,
     instead of overflowing the shell by the difference. */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 20px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: border-color .16s ease;
}
/* No lift on hover: these are articles, not links, so the card was offering
   a click it never had. The border warming is enough to acknowledge the
   pointer. */
.card:hover { border-color: var(--border-strong); }
.card p { color: var(--ink-2); margin: 0; font-size: 15.4px; }

/* One accent, six icons. The tiles were six different hues, which turned a
   list of six facts into a swatch card; the drawings already tell them
   apart. The i1..i6 classes stay on the markup so the pages need no edit. */
.ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--coral-mist);
  color: var(--red-deep);
  margin-bottom: 16px;
}
.ico svg { width: 23px; height: 23px; }

/* AI website builder — a side-by-side rather than paragraphs. Same surface,
   border and radius language as .card so it reads as part of the same set;
   the marks are drawn from borders, not glyphs, so they need no font
   coverage and no inline style (CSP). */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 780px) { .compare { grid-template-columns: 1fr; } }

.compare-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px 28px;
}
.compare-panel.ours {
  background: var(--coral-wash);
  border-color: var(--coral-soft);
}
.compare-panel h3 { margin-bottom: 18px; }

.marks { list-style: none; margin: 0; padding: 0; }
.marks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  color: var(--ink-2);
  font-size: 15.4px;
  line-height: 1.5;
}
.marks li:last-child { margin-bottom: 0; }

/* Tick: two borders of a box, rotated. */
.yes li::before {
  content: "";
  position: absolute;
  left: 5px; top: 4px;
  width: 6px; height: 11px;
  border-right: 2.4px solid var(--red);
  border-bottom: 2.4px solid var(--red);
  transform: rotate(45deg);
}

/* Cross: two bars. Muted — it marks the old way, it is not an alarm. */
.no li::before,
.no li::after {
  content: "";
  position: absolute;
  left: 3px; top: 10px;
  width: 12px; height: 2.2px;
  border-radius: 2px;
  background: var(--ink-3);
  opacity: .55;
}
.no li::before { transform: rotate(45deg); }
.no li::after { transform: rotate(-45deg); }

/* One excluded line inside an otherwise ticked list. The border: 0 matters:
   without it the tick's two borders survive underneath the bar. */
.marks li.off { color: var(--ink-3); }
.marks li.off::before,
.marks li.off::after {
  content: "";
  position: absolute;
  left: 3px; top: 10px;
  width: 12px; height: 2.2px;
  border: 0;
  border-radius: 2px;
  background: var(--ink-3);
  opacity: .55;
  transform: rotate(45deg);
}
.marks li.off::after { transform: rotate(-45deg); }

.note {
  margin: 24px 0 0;
  color: var(--ink-2);
  font-size: 15.4px;
}

/* Pricing — plan cards. Built on the same surface/border/shadow as .card;
   the paid one takes the CTA block's coral gradient so the eye lands on it
   without a second accent colour entering the page. */

.hero-short { padding: 64px 0 20px; }
.hero-head { position: relative; z-index: 1; }
.hero-head h1 { font-size: clamp(32px, 4.8vw, 52px); }
.hero-head .lede { margin-bottom: 0; }

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 26px 32px;
}
.plan.featured {
  background: var(--coral-wash);
  border-color: var(--coral-soft);
}

.plan-badge {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}

.plan-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin: 0 0 10px;
}
.plan-price { margin: 0 0 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.plan-price .amount {
  font-size: clamp(38px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.plan-price .per { color: var(--ink-2); font-size: 15px; }
.plan-note { color: var(--ink-2); font-size: 15.4px; margin: 0 0 22px; }

.btn-block { display: flex; justify-content: center; width: 100%; }

.plan-list {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.plan.featured .plan-list { border-top-color: var(--coral-soft); }
.plan-list strong { color: var(--ink); font-weight: 640; }

/* Site allowance — the number carries the point, so it leads. */
.count {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--red-deep);
  margin: 0 0 10px;
}
.count-note { color: var(--ink-2); font-size: 15.4px; margin: 0; }

/* Marks a feature that belongs to the paid plan, inline in its heading. */
.tag {
  display: inline-block;
  background: var(--coral-mist);
  color: var(--red-deep);
  border: 1px solid var(--coral-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  margin-left: 7px;
  vertical-align: 2px;
}

/* The "what it isn't" list: full-width lines rather than a column of short
   ones, and kept at --ink-2 -- a whole section in the muted --ink-3 that
   .off gives a single excluded line would read as fine print. */
.not-list { margin-top: 30px; }
.not-list li { margin-bottom: 16px; font-size: 16px; }
.not-list li.off { color: var(--ink-2); }
.not-list strong { color: var(--ink); font-weight: 640; }

/* FAQ */

.faq { display: flex; flex-direction: column; gap: 10px; }

details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 2px 22px;
}
details[open] { border-color: var(--border-strong); }
summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 640;
  font-size: 16.5px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2.2px solid var(--red);
  border-bottom: 2.2px solid var(--red);
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex: none;
  margin-right: 4px;
}
details[open] summary::after { transform: rotate(-135deg); }
details p { color: var(--ink-2); margin: 0 0 20px; font-size: 16px; }

/* CTA */

.cta {
  padding: 104px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.cta-inner {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--coral-wash);
  border: 1px solid var(--coral-soft);
  border-radius: 24px;
  padding: 56px 32px;
}
.cta-inner > * { position: relative; z-index: 1; }
.cta .lede { margin: 0 auto 30px; }
.cta .fine { margin-top: 18px; }

/* Footer */

.footer { background: var(--bg-tint); border-top: 1px solid var(--border); padding: 56px 0 32px; }

/* The brand block takes the wide first column and the link groups share what
   is left. As one flat list these six links read as a single undifferentiated
   column; grouped and labelled, the eye finds the one it came for. */
.footer-inner {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr));
  gap: 36px 30px;
  padding-bottom: 32px;
}
.footer-brand .fine { margin-top: 12px; max-width: 34ch; }

.footer-title {
  margin: 0 0 14px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--ink-2); font-size: 15px; }
.footer-col a:hover { color: var(--red-deep); }

/* The brand paragraph needs more room than a quarter of the shell, so it
   takes the full width and the three groups spread out underneath it. */
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

/* ---------- Legal pages (terms, privacy) ----------
   Long-form prose, so the measure is held near 70 characters and the type is
   a notch larger than the marketing copy. Headings carry their own anchor id
   for the contents list at the top, which is a plain list of links rather
   than anything scripted. */

.legal { padding: 60px 0 88px; }

.legal-head { max-width: 70ch; }
.legal-head h1 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 16px; }
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 8px;
  color: var(--ink-3);
  font-size: 14px;
}

.legal-toc {
  margin: 40px 0 8px;
  padding: 24px 26px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.legal-toc h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin: 0 0 14px;
}
.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 34px;
  color: var(--ink-3);
  font-size: 15px;
}
.legal-toc li { margin-bottom: 7px; break-inside: avoid; }
.legal-toc a { color: var(--ink-2); }
@media (max-width: 620px) { .legal-toc ol { columns: 1; } }

.legal-body { max-width: 70ch; }
.legal-body section { padding-top: 44px; }
.legal-body h2 {
  font-size: clamp(22px, 2.6vw, 26px);
  margin-bottom: 14px;
}
.legal-body h3 {
  font-size: 17px;
  margin: 28px 0 8px;
}
.legal-body p { color: var(--ink-2); font-size: 16.5px; margin: 0 0 15px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-2); font-size: 16.5px; }
.legal-body li { margin-bottom: 9px; }
.legal-body li::marker { color: var(--coral); }
.legal-body strong { color: var(--ink); font-weight: 650; }
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }

/* The one thing on these pages that must be impossible to miss: who you are
   contracting with, and where to write. */
.legal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 18px;
}
.legal-card p:last-child { margin-bottom: 0; }
.legal-card dl { margin: 0; font-size: 16px; }
.legal-card dt {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.legal-card dd { margin: 0 0 15px; color: var(--ink); }
.legal-card dd:last-child { margin-bottom: 0; }

/* A wide table has nowhere to go on a phone but sideways, so it scrolls
   inside its own box rather than pushing the page out. */
.legal-scroll { overflow-x: auto; margin: 0 0 20px; }
.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15.5px;
}
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
}
.legal-table th {
  color: var(--ink);
  font-weight: 650;
  font-size: 14px;
  border-bottom-color: var(--border-strong);
}
.legal-table td:first-child { color: var(--ink); font-weight: 560; }

.legal-note {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .legal { padding: 40px 0 64px; }
  .legal-body p, .legal-body ul { font-size: 16px; }
  .legal-body section { padding-top: 36px; }
  .legal-toc { padding: 20px 20px; margin-top: 32px; }
  .legal-card { padding: 20px; }
}

/* ---------- Trust: the badge, the bar, the company card ----------
   Everything in here exists to answer "who am I giving my address to". It is
   built from the same surface/border/radius language as the feature cards so
   it reads as part of the page rather than as a bolted-on seal, and the flag
   is drawn as inline SVG rather than an emoji: the emoji is a different
   picture on every operating system and missing on some. */

/* The Swedish flag, at three sizes. Kept in its own tile with a hairline
   border so a white page does not swallow the yellow cross. */
.flag-sm, .flag-lg {
  display: block;
  flex: none;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(42, 31, 30, .12);
}
.flag-sm { width: 21px; height: 13px; }
.flag-lg { width: 40px; height: 25px; border-radius: 5px; }
.flag-sm svg, .flag-lg svg { display: block; width: 100%; height: 100%; }

/* Sits above the headline: the one line of provenance a visitor scanning the
   hero will actually read. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 7px 16px 7px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.3;
}

.hero-fine { margin-top: 18px; }

/* "Live" on the mocked-up browser bar: the promise of the whole product in a
   green dot. */
.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--mint-mist);
  color: #0f6e58;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(47, 191, 155, .22);
}

/* A white band directly under the hero, before the first tinted section, so
   the four facts land while the headline is still on screen. */
.trustbar {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
/* Four facts, separated by hairlines rather than by four differently
   coloured tiles. The band sits directly under the hero, so it has to stay
   quiet enough that the headline is still the loudest thing on the screen. */
.trustbar-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: 22px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 24px;
  border-left: 1px solid var(--border);
}
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item:last-child { padding-right: 0; }
.trust-ico {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  color: var(--red);
}
.trust-ico svg { width: 22px; height: 22px; }
/* The flag keeps its own colours, so it is sized here rather than by the
   stroke-icon rule above. */
.t-flag svg { width: 21px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(42, 31, 30, .12); }

.trust-item p { margin: 0; font-size: 13.8px; line-height: 1.4; }
.trust-item strong {
  display: block;
  color: var(--ink);
  font-size: 14.6px;
  font-weight: 640;
  letter-spacing: -.01em;
}
.trust-item span { color: var(--ink-3); }

/* Below four across the dividers would fall between the wrong pairs, so the
   band goes back to plain gaps. */
@media (max-width: 900px) {
  .trustbar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; }
  .trust-item { border-left: 0; padding-inline: 0; }
}
@media (max-width: 440px) {
  .trustbar-inner { grid-template-columns: 1fr; gap: 15px; padding-block: 20px; }
}

/* The trust section: who we are on the left, what that means on the right.
   A two-column split rather than a third card grid, so the page changes
   rhythm at the point it starts talking about itself. */
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 30px;
  align-items: start;
}
@media (max-width: 940px) { .trust-grid { grid-template-columns: 1fr; gap: 26px; } }

.company-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.company-name {
  margin: 16px 0 2px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}
.company-sub { margin: 0; color: var(--ink-3); font-size: 14px; }

.company-dl { margin: 22px 0 0; font-size: 15px; }
.company-dl > div {
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.company-dl dt {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.company-dl dd { margin: 0; color: var(--ink); line-height: 1.45; }

.company-mail {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.company-mail a { font-weight: 560; text-decoration: underline; text-underline-offset: 2px; }

/* Six short assurances, each already true of the running service. The tick is
   drawn from two borders inside a round tint -- no glyph, no font coverage to
   depend on, and nothing inline for the CSP to reject. */
.assure {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 30px;
}
@media (max-width: 700px) { .assure { grid-template-columns: 1fr; gap: 20px; } }

.assure li { position: relative; padding-left: 38px; }
.assure li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--coral-mist);
  border: 1px solid var(--coral-soft);
}
.assure li::after {
  content: "";
  position: absolute;
  left: 9.5px; top: 6px;
  width: 5px; height: 10px;
  border-right: 2.2px solid var(--red);
  border-bottom: 2.2px solid var(--red);
  transform: rotate(45deg);
}
.assure h3 { margin: 0 0 5px; font-size: 16.5px; }
.assure p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* Footer: the provenance line under the brand paragraph. */
.footer-co {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  max-width: 40ch;
}
.footer-co .flag-sm { margin-top: 3px; }

/* ---------- Phones ----------
   Everything above is fluid: the grids collapse, the headings are clamped and
   the hero stacks at 940px. What does not scale on its own is the fixed
   furniture — 24px gutters, 28px card padding, 96px section padding — which on
   a 360px screen spends a third of the width on empty space. This block tightens
   that, and turns the calls to action into full-width rows so they are hit with
   a thumb rather than aimed at. */

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }

  .shell { padding: 0 18px; }

  .lede { font-size: 16.5px; margin-bottom: 26px; }

  .hero { padding: 40px 0 56px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { flex: 1 1 100%; }

  .ask { padding: 18px 18px 20px; }
  .ask-text { font-size: 16px; }
  .site-body { padding: 14px; }
  .site-hero { height: 78px; margin-bottom: 13px; }

  .steps, .chips, .grid, .compare, .trust-grid, .faq { margin-top: 14px; }
  .steps { gap: 14px; }
  .grid { gap: 14px; }
  .step, .card { padding: 22px 20px; }
  .step-n { width: 38px; height: 38px; font-size: 17px; margin-bottom: 13px; }
  .ico { width: 42px; height: 42px; margin-bottom: 13px; }

  .chips { gap: 9px; }
  .chip { padding: 9px 15px; font-size: 14.5px; }

  .hero-short { padding: 36px 0 8px; }
  .plans { gap: 16px; }
  .plan { padding: 24px 20px 26px; }
  .compare { gap: 14px; }
  .compare-panel { padding: 22px 20px 24px; }

  details { padding: 2px 18px; }
  summary { padding: 16px 0; font-size: 16px; }
  details p { font-size: 15.5px; margin-bottom: 18px; }

  .cta { padding: 68px 0; }
  .cta-inner { padding: 40px 22px; border-radius: 20px; }
  .cta-inner .btn { width: 100%; }

  .pill { font-size: 12.8px; padding: 6px 13px 6px 7px; margin-bottom: 18px; }
  .hero-fine { margin-top: 16px; font-size: 13.5px; }

  .company-card { padding: 22px 20px; }
  .assure li { padding-left: 34px; }

  .footer { padding: 40px 0 28px; }
  .footer-inner { padding-bottom: 22px; }
  /* A 15px line of text is not a tap target; give each link a real row. */
  .footer-col li { margin-bottom: 1px; }
  .footer-col a { display: inline-block; padding: 7px 0; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .btn:hover { transform: none; }
}