/* ==========================================================================
   Home page palette and its own components -- home.css
   Modelled on cupidso.com: a pale pink floor, a wine-rose primary, cream yellow as the second
   accent and slate blue for body copy,
   with large rounded soft cards, shadows tinted pink and a small eyebrow label above each section.
   How it works: index.html alone loads this file. First :root overrides the cream/gold/cinnabar
   range in style.css
        (the several hundred components reading those variables all change colour together), then
        the colours hard-coded inside style.css are patched,
        and finally the components only the home page has, such as the three-panel hero, are added.
   Note: css/style.css is never edited, this file only overrides; every patch carries the original
        line number,
        so if style.css shifts, come back and check them.
   ========================================================================== */

/* ==========================================================================
   1. Palette: cinnabar / gilt / rice-paper cream are swapped wholesale for rose wine / cream yellow / pale pink
   ========================================================================== */
:root {
  /* Body and footer type: slate blue (the reference site's body copy is not pure black but a cool dark grey-blue) */
  --ink: #2f3a4a;
  --ink-soft: #55606f;
  --muted: #8b93a1;

  /* Primary brand colour: wine rose (matching the headings and the SHOP NOW button on the reference site) */
  --vermilion: #a3164c;
  --vermilion-dark: #7d0f39;
  --vermilion-soft: #fce7ee;

  /* Second accent: caramel gold + cream yellow (matching that cream-yellow card and the brown small print on the reference site) */
  --gold: #b07d1d;
  --gold-soft: #fdf3cf;

  /* Celadon green jumps out of a pink scheme, so it becomes a muted lilac */
  --jade: #9c5570;

  /* Backgrounds: cards pure white, the page pale pink, one step deeper for inset sections */
  --paper: #ffffff;
  --cream: #fdeff2;
  --cream-mid: #fbe4ec;
  --cream-deep: #f8d9e4;
  --line: #f6dce5;

  /* Corners are a little larger than before, closer to the reference site's soft cards; every shadow
     is retinted pink,
     since the old purple-grey shadow looks dirty over a pink floor */
  --radius: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 10px rgba(163, 22, 76, .06);
  --shadow: 0 10px 34px rgba(163, 22, 76, .09);
  --shadow-lg: 0 20px 60px rgba(163, 22, 76, .14);
}

/* Keep one near-white pale-pink canvas from the five-tool section to the footer (matching /en/face below its tool); the upper page stays unchanged. */
.demo { background: #fefafb; }
.hs-section,
.hs-section ~ .section { background: #fefafb; }

/* ==========================================================================
   2. Patching the colours hard-coded in style.css (where a variable override cannot reach)
   ========================================================================== */

/* The frosted nav background is hard-coded cream (style.css:84) */
.nav { background: rgba(253, 239, 242, .86); }

/* The logo seal and the primary button: cinnabar rgba is hard-coded inside their shadows (style.css:94 / 108 / 109) */
.logo .seal { box-shadow: 0 4px 12px rgba(163, 22, 76, .32); }
.btn-primary { box-shadow: 0 6px 18px rgba(163, 22, 76, .28); }
.btn-primary:hover { box-shadow: 0 10px 24px rgba(163, 22, 76, .38); }

/* The four-point bar: it used to be a full cinnabar gradient with white type (style.css:354-358),
   while the four promises in the same place on the reference site are dark type on a light fill, so it
   becomes a white fill with the numbers in the primary colour.
   Only one large line is left now (.trust-lbl has been taken off the page), so the vertical padding is pulled in a little */
.trust-strip {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.trust-item { color: var(--vermilion); }
.trust-num { color: var(--vermilion); }
/* Narrow screens: the nth-child set at style.css:703-711 (inside @media max-width:640px) was laid out for five items (2+3),
   and with only four the second row is short a slot and drifts left; here it becomes 2+2, three columns each */
@media (max-width: 640px) {
  .trust-item:nth-child(3) { grid-column: 1 / 4; }
  .trust-item:nth-child(4) { grid-column: 4 / 7; }
}

/* Homepage brand introduction: editorial layout with one outer frame,
   highlighted copy, numbered principles and a structured facts strip. */
.av-about {
  background: #fefafb;
}
.av-about-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 26px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid #ebcbd7;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(255,246,249,.93) 58%, rgba(253,245,226,.66) 100%);
  box-shadow: 0 32px 74px -38px rgba(125, 15, 57, .48), inset 0 1px 0 rgba(255,255,255,.9);
}
.av-about-main {
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(237, 207, 218, .82);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(252,231,238,.7));
  box-shadow: 0 18px 40px -30px rgba(125, 15, 57, .5);
}
.av-about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--vermilion);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}
.av-about-kicker::before,
.av-about-kicker::after {
  content: "";
  width: 26px;
  height: 1px;
}
.av-about-kicker::before { background: linear-gradient(90deg, transparent, #d6a542); }
.av-about-kicker::after { background: linear-gradient(90deg, #d6a542, transparent); }
.av-about-main h3 {
  margin: 0 0 18px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.32;
}
.av-about-main h3 em {
  font-style: normal;
  color: var(--vermilion);
  background: linear-gradient(transparent 68%, rgba(214, 165, 66, .28) 68%, rgba(214, 165, 66, .28) 92%, transparent 92%);
}
.av-about-main > p {
  margin: 0 0 13px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.9;
}
.av-about-main > p:first-of-type::first-letter {
  float: left;
  margin: 5px 10px 0 0;
  color: var(--vermilion);
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}
.av-about-main blockquote {
  position: relative;
  margin: 20px 0 0;
  padding: 4px 0 4px 44px;
  color: #7d2749;
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.75;
}
.av-about-main blockquote::before {
  content: "\201C";
  position: absolute;
  left: 2px;
  top: -14px;
  color: rgba(176, 125, 29, .55);
  font-size: 52px;
  line-height: 1;
}
.av-about-values {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 6px 4px;
  list-style: none;
  align-self: center;
}
.av-value {
  --value-accent: #c9879f;
  --value-bg: #fff6fa;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 14px;
  border: 1px solid #efdce4;
  border-radius: 12px;
  background: linear-gradient(110deg, var(--value-bg), rgba(255,255,255,.94));
  box-shadow: 0 10px 24px -22px rgba(125, 15, 57, .58);
}
.av-value:nth-child(2) { --value-accent: #d3aa55; --value-bg: #fff9ec; }
.av-value:nth-child(3) { --value-accent: #a97890; --value-bg: #faf5fa; }
.av-value:nth-child(4) { --value-accent: #bd718c; --value-bg: #fff5f8; }
.av-value:last-child { border-bottom: 1px solid #efdce4; }
.av-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(176, 125, 29, .5);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(176, 125, 29, .08);
  color: #b07d1d;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
}
.av-value h3 {
  margin: 2px 0 7px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17.5px;
  letter-spacing: .1px;
}
.av-value p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.75;
}
.av-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 20px 10px;
  list-style: none;
  border: 1px solid #f3dce4;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fce7ee 100%);
  box-shadow: 0 18px 34px -24px rgba(163, 22, 76, .45);
}
.av-facts li { padding: 2px 20px; border-left: 1px solid #f0d3dd; }
.av-facts li:first-child { border-left: 0; }
.av-facts b {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .2px;
}
.av-facts b::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: #d6a542;
  transform: rotate(45deg) translateY(-1px);
}
.av-facts span { color: var(--muted); font-size: 12.5px; letter-spacing: .2px; }
.av-about-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 22px 24px;
  border: 1px solid #f1dfc2;
  border-radius: 15px;
  background: linear-gradient(135deg, #fffdf7 0%, #f9eccd 100%);
  box-shadow: 0 16px 32px -26px rgba(176, 125, 29, .5);
}
.av-about-foot > div:first-child { max-width: 760px; }
.av-about-foot strong {
  display: block;
  margin-bottom: 6px;
  color: #765513;
  font-family: var(--serif);
  font-size: 17px;
}
.av-seal { width: 52px; height: 30px; margin-right: 10px; vertical-align: -9px; }
.av-about-foot p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.7;
}
.av-about-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-width: 230px;
}
.av-about-btn,
.av-about-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.av-about-btn {
  background: linear-gradient(135deg, #c23063 0%, #a3164c 72%);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(163, 22, 76, .72);
}
.av-about-link {
  border: 1px solid #edcfda;
  background: rgba(255, 255, 255, .72);
  color: var(--vermilion);
}
.av-about-btn:hover,
.av-about-link:hover { transform: translateY(-1px); }

@media (max-width: 900px) {
  .av-about-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .av-facts { grid-template-columns: repeat(2, 1fr); gap: 12px 0; }
  .av-facts li:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .av-about-card { gap: 14px; padding: 16px 14px; border-radius: 18px; }
  .av-about-main { padding: 18px 16px; }
  .av-about-main h3 { font-size: 23px; }
  .av-about-main > p { font-size: 14px; line-height: 1.8; }
  .av-about-main blockquote { padding-left: 34px; font-size: 15px; }
  .av-about-main blockquote::before { font-size: 40px; top: -10px; }
  .av-facts { padding: 14px 2px; }
  .av-facts li { padding: 2px 12px; }
  .av-value { grid-template-columns: 38px 1fr; gap: 12px; padding: 14px 6px; }
  .av-num { width: 38px; height: 38px; font-size: 12px; }
  .av-about-foot { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 16px; }
  .av-about-actions { min-width: 0; }
}

/* The watermark behind the bottom CTA band uses an English-only mark. */
.cta-band::after { content: "VOW"; }

/* ==========================================================================
   3. Nav: already moved to css/nav.css (the two-row nav plus the brand mark, shared site-wide),
       so it is not duplicated here -- change the nav in nav.css alone.
       One exception only: the nav background .nav is patched again in section 2 (the cream hard-coded at style.css:84),
       with the same value as nav.css, duplicated but not in conflict.
   ========================================================================== */

/* ==========================================================================
   4. Layout details taken from the reference site
   -- Every section there is a small eyebrow label above a large heading; the eyebrow is small type in
      the primary colour with wide letter spacing;
      style.css:63-79 has it the other way round (large heading above small type), so column-reverse
      swaps the visual order here
      without touching a single line of HTML.
   ========================================================================== */
.sec-head { display: flex; flex-direction: column-reverse; align-items: center; }
.sec-head .en {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--vermilion);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
}

/* ==========================================================================
   5. The three-panel hero (a component the home page alone has)
   -- The reference site's hero is one large card on the left with two small ones on the right, each
      carrying its own fill:
      a pink gradient on the main card, one pink and one cream yellow on the secondary pair; inside a
      card the order runs
      white pill label -> italic serif word -> large heading -> note -> action.
   ========================================================================== */
.hp-hero { padding: 32px 0 40px; }
.hp-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  /* Keep card dimensions and background cropping identical when switching languages. */
  grid-template-rows: repeat(2, 158px);
  gap: 20px;
}
.hp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: transform .22s, box-shadow .22s;
}
.hp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hp-card--main {
  grid-row: 1 / span 2;
  padding: 44px 42px;
  /* The photo sits on the right (the face is in the right third of the image), with a pink gradient mask over the left to keep the type readable */
  background:
    linear-gradient(90deg, rgba(249, 220, 230, .90) 0%, rgba(249, 220, 230, .62) 30%, rgba(250, 226, 235, .12) 50%, rgba(255, 250, 251, 0) 66%),
    url('../img/hero-face.webp') right center / cover no-repeat;
}
.hp-card--rose {
  /* The right side is an illustration (soft 3D: a phone, a speech bubble and a heart); the gradient built
     into the left half of the image matches the card,
     and one more very faint layer of the same colour backs it up so the type still reads over the illustration */
  background:
    linear-gradient(90deg, rgba(253, 241, 245, .80) 0%, rgba(252, 228, 236, .38) 42%, rgba(252, 228, 236, 0) 62%),
    url('../img/card-chat.webp') right center / cover no-repeat;
}
.hp-card--cream {
  background:
    linear-gradient(90deg, rgba(254, 250, 234, .80) 0%, rgba(253, 243, 207, .38) 42%, rgba(253, 243, 207, 0) 62%),
    url('../img/card-match.webp') right center / cover no-repeat;
  border-color: #f3e4b4;
}

/* The white pill label */
.hp-chip {
  align-self: flex-start;
  margin-bottom: 22px;
  padding: 6px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--vermilion);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

/* The italic serif word: the line above the large type on the reference site (Happy / Fresh / Anniversary) */
.hp-kicker {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--vermilion);
  opacity: .88;
}

.hp-card--main h1 {
  font-family: var(--serif);
  font-size: 41px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--vermilion-dark);
  /* The English hero line can safely use the empty forehead area, keeping “Read Your Love & Fate” together. */
  max-width: 540px;
  white-space: nowrap;
}
.hp-card--main h1 .hp-kicker { margin-bottom: 5px; font-size: 22px; }
.hp-lead { margin-top: 15px; max-width: 440px; font-size: 14px; color: var(--ink-soft); }
.hp-act { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 26px; }
.hp-price { font-style: normal; font-size: 12.5px; color: var(--muted); }

/* The two secondary cards keep only the large type (no note), with the whole group centred vertically */
.hp-card--rose,
.hp-card--cream { justify-content: center; }
.hp-card--rose h2,
.hp-card--cream h2 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
}
.hp-card--rose h2 { color: var(--vermilion-dark); }
.hp-card--cream h2 { color: #6d5011; }
.hp-card--rose .hp-kicker,
.hp-card--cream .hp-kicker { margin-bottom: 3px; font-size: 16px; }
.hp-card--cream .hp-kicker { color: #8a6a1e; }
/* Type on a secondary card is capped in width, leaving the right for the illustration */
.hp-card--rose h2,
.hp-card--cream h2 { max-width: 62%; }
.hp-more {
  margin-top: 14px;
  color: var(--vermilion);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.hp-card--cream .hp-more { color: #8a6a1e; }

/* ==========================================================================
   6. The remaining home page components
   ========================================================================== */

/* The situation list: two columns of short lines, each with a small tool tag on the right. It sits inside
   .demo (#fffafb); the strips start pure white with a left colour bar keyed to the target tool
   (chat rose / face caramel / match mauve), matched off /chat, /face, /match in the href, so the block
   is not one flat pink */
.hp-scene { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
.sc-item {
  --sc-accent: #a3164c;
  --sc-soft: #fdeef3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px 15px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sc-accent);
  border-radius: 12px;
  background: linear-gradient(120deg, #fff 60%, var(--sc-soft) 240%);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.sc-item[href*="/chat"] { --sc-accent: #a3164c; --sc-soft: #fdeef3; }
.sc-item[href*="/face"] { --sc-accent: #b07d1d; --sc-soft: #fdf5e2; }
.sc-item[href*="/match"] { --sc-accent: #9c5570; --sc-soft: #f6eef4; }
.sc-item .tx { font-family: var(--serif); font-size: 15px; color: var(--ink); transition: color .18s; }
.sc-item .to {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sc-soft);
  color: var(--sc-accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.sc-item:hover {
  transform: translateY(-2px);
  border-color: var(--sc-accent);
  box-shadow: 0 10px 22px -8px rgba(111, 52, 70, .4);
}
.sc-item:hover .tx { color: var(--sc-accent); }
.sc-item:hover .to { background: var(--sc-accent); color: #fff; }

/* FAQ: reuses the .bz-faq accordion at style.css:1313; here its width is reined in and centred, and the
   look is lifted -- white cards with a pink-toned shadow, a round plus/minus, and a deeper border when
   open, scoped to the home page .hp-faq only */
.hp-faq { max-width: 820px; margin: 0 auto; }
.hp-faq details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 6px 18px -12px rgba(163, 22, 76, .28);
  transition: box-shadow .2s, border-color .2s;
}
.hp-faq details:hover { border-color: #f0c6d5; box-shadow: 0 12px 26px -14px rgba(163, 22, 76, .32); }
.hp-faq details[open] { border-color: #ecb9cc; }
.hp-faq summary { padding: 16px 54px 16px 20px; }
.hp-faq summary::after {
  content: '+';
  position: absolute;
  top: 50%; right: 16px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--vermilion-soft);
  color: var(--vermilion);
  font-size: 16px;
  line-height: 1;
}
.hp-faq details[open] summary { background: transparent; border-bottom: 1px solid var(--line); }
.hp-faq details[open] summary::after { content: '\2212'; background: var(--vermilion); color: #fff; }
.hp-faq .ans { padding: 14px 20px 18px; }

/* The guide now runs to six articles, which fill two rows of the three-column .article-grid at style.css:531,
   so the column count is no longer overridden on a wide screen; it only drops to two at medium widths, to stop the cards being squeezed too narrow */
@media (max-width: 1080px) {
  .hp-guide-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The three-step notes: a top accent bar, a soft gradient, and a large watermark number (CSS counter
   makes 01/02/03); the small number becomes a solid pill, and the three steps split rose / caramel /
   mauve to break the monotony */
.hp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: hpstep; }
.hp-step {
  --step-accent: #a3164c;
  --step-soft: #fdeef3;
  counter-increment: hpstep;
  position: relative;
  overflow: hidden;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--step-accent);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, var(--step-soft) 340%);
}
.hp-step:nth-child(2) { --step-accent: #b07d1d; --step-soft: #fdf5e2; }
.hp-step:nth-child(3) { --step-accent: #9c5570; --step-soft: #f6eef4; }
.hp-step::before {
  content: counter(hpstep, decimal-leading-zero);
  position: absolute;
  top: 8px; right: 16px;
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  color: var(--step-accent);
  opacity: .12;
  pointer-events: none;
}
.hp-step-num {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--step-accent);
  color: #fff;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}
.hp-step h3 { position: relative; z-index: 1; margin: 12px 0 10px; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.hp-step p { position: relative; z-index: 1; font-size: 13.5px; color: var(--ink-soft); }

/* ==========================================================================
   7. Responsive: the three panels straighten out below 900px and tighten for phones below 640px
   ========================================================================== */
@media (max-width: 900px) {
  .hp-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .hp-card--main { grid-row: auto; padding: 34px 28px; }
  .hp-card--main h1 { font-size: 34px; max-width: 60%; }
  .hp-card--main h1 .hp-kicker { font-size: 20px; }
  /* The note inherits body's line-height of 1.7 (style.css:47), which is right for a long article but
     too airy for three short lines inside a poster card: from a tablet on down it tightens to 1.5, and
     640px and below inherits this, so every narrow width is covered */
  .hp-lead { max-width: 60%; line-height: 1.5; }
  .hp-guide-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-steps { grid-template-columns: 1fr; }
  /* The short situation lines already wrap at two columns, so a narrow screen goes straight to one */
  .hp-scene { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .hp-hero { padding: 20px 0 28px; }
  .hp-card { padding: 22px 20px; }
  .hp-card--rose,
  .hp-card--cream { min-height: 132px; }
  .hp-card--main {
    padding: 28px 22px;
    /* Cards narrow on a phone and the face runs behind the type: the mask is thickened and the photo recedes into the background */
    background:
      linear-gradient(90deg, rgba(249, 220, 230, .86) 0%, rgba(249, 220, 230, .72) 46%, rgba(250, 226, 235, .55) 72%, rgba(252, 233, 238, .28) 100%),
      url('../img/hero-face.webp') right center / cover no-repeat;
  }
  /* Keep both English hero lines complete on a phone. */
  .hp-card--main h1 { font-size: 22px; max-width: none; }
  .hp-card--main h1 .hp-kicker { font-size: 15px; }
  .hp-lead { max-width: none; }
  .hp-card--rose h2,
  .hp-card--cream h2 { font-size: 22px; }
  /* One article per row on a phone: style.css:676 already straightens .article-grid out below 900px, but
     the two-column rule above (kept for tablets) overrides it because home.css loads later, so the phone
     end has to be spelled out again. Two columns leave each title four or five lines deep and cut the
     summary mid-line -- the cards in one column are as wide as the screen and read in full */
  .hp-guide-grid { grid-template-columns: 1fr; }
  /* Secondary cards narrow on a phone too and the illustration runs behind the type: the mask is thickened and the type given a little more width */
  .hp-card--rose {
    background:
      linear-gradient(90deg, rgba(253, 241, 245, .92) 0%, rgba(252, 228, 236, .74) 52%, rgba(252, 228, 236, .30) 80%, rgba(252, 228, 236, .08) 100%),
      url('../img/card-chat.webp') right center / cover no-repeat;
  }
  .hp-card--cream {
    background:
      linear-gradient(90deg, rgba(254, 250, 234, .92) 0%, rgba(253, 243, 207, .74) 52%, rgba(253, 243, 207, .30) 80%, rgba(253, 243, 207, .08) 100%),
      url('../img/card-match.webp') right center / cover no-repeat;
  }
  .hp-card--rose h2,
  .hp-card--cream h2 { max-width: 72%; }
  .hp-act { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ========================================================================== 
   8. Five-tool showcase: shared desktop, tablet and mobile behavior
   ========================================================================== */
.hs-section { background: #fefafb; }
/* Match the full width of the tool cards below inside the same .wrap. */
.hs { max-width: none; }

.hs-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 8px 22px -16px rgba(111, 52, 70, .4);
}
.hs-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px 10px;
  border-radius: 11px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: color .2s, background .2s, box-shadow .2s, transform .2s;
}
.hs-tab:hover { color: #a3164c; background: #fdeef3; }
.hs-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #c23063 0%, #a3164c 70%);
  box-shadow: 0 8px 20px -8px rgba(163, 22, 76, .6);
}

.hs-panels { position: relative; }
.hs-panel.active {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: 46px;
  align-items: center;
  padding: 24px;
  border: 1px solid #f3d5df;
  border-radius: 18px;
  background: linear-gradient(158deg, #ffffff 0%, #fff4f7 100%);
  box-shadow: 0 22px 46px -26px rgba(163, 22, 76, .38);
  animation: hsFade .45s ease;
}
@keyframes hsFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hs-panel--rev .hs-media { order: 2; }
/* Reversed panels keep the image in the same 0.6fr column width. */
.hs-panel--rev.active { grid-template-columns: 1fr 0.6fr; }

.hs-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 12px 26px -18px rgba(111, 52, 70, .4);
}
.hs-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  pointer-events: none;
}
.hs-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hs-body { min-width: 0; }
.hs-kicker {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #fdeef3;
  color: #a3164c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
}
.hs-body h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink);
}
.hs-body > p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.8;
}
.hs-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.hs-points li {
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
}
.hs-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 26px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d24e7c 0%, #a3164c 70%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 14px 30px -12px rgba(210, 78, 124, .75);
  transition: transform .2s, box-shadow .2s;
}
.hs-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(210, 78, 124, .9);
}

/* Tablet: wrapped tabs and one-column panels. */
@media (max-width: 900px) {
  .hs-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    background: #fdeef3;
    border-color: #f3d5df;
  }
  .hs-tab {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 10px;
  }
  .hs-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #c23063 0%, #a3164c 70%);
  }
  .hs-panel.active,
  .hs-panel--rev.active {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
  .hs-panel--rev .hs-media { order: 0; }
  .hs-media { aspect-ratio: 4 / 3; }
  .hs-body h3 { font-size: 22px; }
}

/* Phone: all five short labels fit one row; one active panel remains visible. */
@media (max-width: 640px) {
  .hs-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    gap: 3px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 10px;
    background: #fdeef3;
    border-color: #f3d5df;
  }
  .hs-tabs::-webkit-scrollbar { display: none; }
  .hs-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 8px;
    letter-spacing: 0;
  }
  .hs-tab-tx { font-size: 0; }
  .hs-tab-tx::after { content: attr(data-short); font-size: 12px; }

  .hs-panels { display: block; }
  .hs-panel.active,
  .hs-panel--rev.active {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .hs-panel--rev .hs-media { order: 0; }
  .hs-media { aspect-ratio: 1 / 1; max-width: 88%; margin: 0 auto; }
  .hs-body h3 { font-size: 19px; }
  .hs-body > p { font-size: 13.5px; }
  .hs-points { gap: 6px; }
  .hs-points li { padding: 5px 10px; font-size: 12px; }
  .hs-cta { padding: 10px 22px; font-size: 14px; }
}