/* ============ TOKENS ============ */
  :root{
    --bg: #FFFFFF;
    --bg-alt: #F6F3FC;
    --ink: #23262F;
    --ink-soft: #6E6B7A;
    --indigo: #4F4A8F;
    --indigo-deep: #34305C;
    --indigo-pale: #ECE9F7;
    --coral: #E9573F;
    --pink: #D6407F;
    --gold: #A5824A;
    --gold-pale: #F1E6D2;
    --line: rgba(35,38,47,0.13);
    --line-soft: rgba(35,38,47,0.08);
    --shadow: rgba(52,48,92,0.18);
    --paper-shadow: rgba(52,48,92,0.10);
    --focus: #34305C;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #18181D;
      --bg-alt: #212027;
      --ink: #F3F0FA;
      --ink-soft: #B3ADC6;
      --indigo: #9891DE;
      --indigo-deep: #C6C1F0;
      --indigo-pale: #2A2440;
      --coral: #FF8666;
      --pink: #F172A4;
      --gold: #D9B67F;
      --gold-pale: #3A3120;
      --line: rgba(243,240,250,0.14);
      --line-soft: rgba(243,240,250,0.08);
      --shadow: rgba(0,0,0,0.45);
      --paper-shadow: rgba(0,0,0,0.3);
      --focus: #C6C1F0;
    }
  }
  :root[data-theme="dark"]{
    --bg: #18181D;
    --bg-alt: #212027;
    --ink: #F3F0FA;
    --ink-soft: #B3ADC6;
    --indigo: #9891DE;
    --indigo-deep: #C6C1F0;
    --indigo-pale: #2A2440;
    --coral: #FF8666;
    --pink: #F172A4;
    --gold: #D9B67F;
    --gold-pale: #3A3120;
    --line: rgba(243,240,250,0.14);
    --line-soft: rgba(243,240,250,0.08);
    --shadow: rgba(0,0,0,0.45);
    --paper-shadow: rgba(0,0,0,0.3);
    --focus: #C6C1F0;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3{
    font-family: 'Unbounded', system-ui, sans-serif;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
  }
  .mono{ font-family: 'Space Mono', 'Courier New', monospace; }
  a{ color: inherit; }
  img{ max-width: 100%; display:block; }
  button{ font-family: inherit; }
  :focus-visible{ outline: 2.5px solid var(--focus); outline-offset: 3px; }

  .wrap{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  /* ============ NAV ============ */
  .brand-stripe{
    height: 4px;
    background: linear-gradient(90deg, var(--coral), var(--pink) 30%, var(--gold) 55%, var(--coral) 80%, var(--pink));
    background-size: 220% 100%;
    animation: stripeSweep 1.8s cubic-bezier(.33,.68,.36,1) both;
  }
  /* one slow sweep of the brand gradient as the page opens, then it rests */
  @keyframes stripeSweep{
    from{ background-position: 100% 0; }
    to{ background-position: 0 0; }
  }
  .nav{
    position: sticky; top:0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 28px;
    gap: 16px;
  }
  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
  .brand img{ width:36px; height:36px; border-radius:10px; }
  .brand span{ font-family:'Unbounded'; font-weight:600; font-size:1.1rem; letter-spacing:0.03em; white-space:nowrap; }
  .nav-links{ display:flex; align-items:center; gap:28px; }
  .nav-links a{ text-decoration:none; font-weight:600; font-size:0.92rem; color: var(--ink-soft); transition: color .25s ease; }
  .nav-links a:hover{ color: var(--indigo); }
  .nav-cta{
    background: var(--indigo); color:#fff; border:none; border-radius: 100px;
    padding: 10px 20px; font-weight:700; font-size:0.88rem; cursor:pointer;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, filter .3s ease;
  }
  .nav-cta:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px -8px var(--shadow); filter: brightness(1.06); }
  .nav-links-mobile{ display:none; }
  @media (max-width: 760px){
    .nav-links{ display:none; }
  }

  /* ============ TAG BADGE (recurring motif) ============ */
  .tag-badge{
    position: relative;
    display: inline-flex; align-items:center; gap:8px;
    padding: 8px 18px 8px 26px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 6px 14px 14px 6px;
    font-weight: 700; font-size: 0.82rem;
    color: var(--indigo);
    box-shadow: 0 1px 0 var(--line-soft);
  }
  .tag-badge::before{
    content:"";
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    width:6px; height:6px; border-radius:50%;
    background: var(--bg);
    border: 1.5px solid var(--indigo);
  }

  /* ============ HERO ============ */
  .hero{
    position: relative;
    overflow: hidden;
    padding: 76px 0 64px;
    isolation: isolate;
  }
  .hero-skyline{
    position:absolute; left:0; right:0; bottom:0; height: 190px;
    opacity: 0.5;
    z-index: -2;
    pointer-events:none;
  }
  .hero-skyline svg{ width:100%; height:100%; display:block; }
  /* decorative price tags: static, set at their resting angle.
     No looping motion — the page stays still once it has settled. */
  .hero-float{
    position:absolute; z-index:-1; pointer-events:none;
    opacity: 0.85;
    transform: rotate(var(--r,0deg));
    animation: settleIn 1s ease .7s both;
  }
  @keyframes settleIn{
    from{ opacity:0; }
    to{ opacity:0.85; }
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items:center;
  }
  @media (max-width: 900px){
    .hero-grid{ grid-template-columns: 1fr; }
  }
  .hero-copy .tag-badge{ margin-bottom: 22px; }

  /* orchestrated page-load sequence: each line of the hero settles in turn.
     Calm easing, no overshoot — but slow and staggered enough to actually read
     as motion. Finishes inside ~1.4s so the page is fully at rest after load. */
  @keyframes heroIn{
    from{ opacity:0; transform: translateY(16px); }
    to{ opacity:1; transform: none; }
  }
  .hero-copy > *{ animation: heroIn .8s cubic-bezier(.22,.61,.36,1) both; }
  .hero-copy > *:nth-child(1){ animation-delay: .05s; }
  .hero-copy > *:nth-child(2){ animation-delay: .18s; }
  .hero-copy > *:nth-child(3){ animation-delay: .31s; }
  .hero-copy > *:nth-child(4){ animation-delay: .44s; }
  .hero-copy > *:nth-child(5){ animation-delay: .57s; }
  .hero h1{
    font-size: clamp(2.3rem, 4.8vw, 3.6rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.01em;
  }
  .hero h1 em{
    font-style: normal;
    background: linear-gradient(100deg, var(--coral), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero p.lede{
    margin-top: 20px;
    font-size: 1.13rem;
    color: var(--ink-soft);
    max-width: 46ch;
  }
  .hero-ctas{ display:flex; gap:14px; margin-top: 32px; flex-wrap: wrap; }

  /* ---- scroll cue ----
     The one deliberately looping animation on the page. Everything else settles
     within ~1.4s and then stays still, but this element's entire job is to keep
     signalling that the hero is not the whole page — a cue that stops moving
     stops working. It fades out the moment the visitor scrolls, and returns if
     they come back to the top, so it is never in the way of reading. */
  .scroll-cue{
    position: fixed;
    right: max(20px, 4vw);
    bottom: 26px;
    z-index: 40;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    /* It is pinned to the viewport, so it can end up over the app icon, a photo
       or a coloured band. The backing pill means it stays readable whatever
       passes underneath, instead of relying on the page behind it being pale. */
    background: var(--bg);
    border:1px solid var(--line-soft);
    border-radius: 100px;
    box-shadow: 0 8px 24px var(--shadow);
    padding: 15px 9px;
    cursor:pointer;
    color: var(--ink-soft);
    transition: opacity .45s ease, color .3s ease;
    /* `backwards`, not `both`: with `both` the animation's filled end state
       (opacity:1) keeps winning the cascade over the [data-hidden] rule below,
       because animated values outrank normal declarations — the cue would fade
       in and then refuse to ever fade out. `backwards` holds the start state
       during the delay and then hands control back to CSS. */
    animation: cueIn .8s cubic-bezier(.22,.61,.36,1) 1.1s backwards;
  }
  .scroll-cue[data-hidden="true"]{ opacity:0; pointer-events:none; }
  @keyframes cueIn{
    from{ opacity:0; transform: translateY(-10px); }
    to{ opacity:1; transform: none; }
  }
  .scroll-cue .cue-label{
    writing-mode: vertical-rl;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.64rem;
    font-weight: 800;
  }
  /* a thin rail with a coral-to-pink beam travelling down it, picking up the
     same gradient as the D in the logo */
  .scroll-cue .cue-track{
    position:relative;
    width:2px; height:46px;
    border-radius:2px;
    background: var(--line);
    overflow:hidden;
  }
  .scroll-cue .cue-track::after{
    content:"";
    position:absolute; left:0; right:0; top:-45%;
    height:45%;
    border-radius:2px;
    background: linear-gradient(180deg, transparent, var(--coral), var(--pink));
    animation: cueBeam 2.2s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes cueBeam{
    0%  { transform: translateY(0);    opacity:0; }
    18% { opacity:1; }
    78% { opacity:1; }
    100%{ transform: translateY(260%); opacity:0; }
  }
  .scroll-cue .cue-chev{
    display:block;
    animation: cueNudge 2.2s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes cueNudge{
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(4px); }
  }
  .scroll-cue:hover{ color: var(--indigo); }
  .scroll-cue:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:8px; }
  @media (max-width: 900px){
    /* centred on a phone, where there is no right-hand column for it to sit
       beside. `translate` is used instead of `transform` so the centring can't
       be clobbered by the cueIn keyframes, which animate `transform`. */
    .scroll-cue{ right:auto; left:50%; translate:-50% 0; bottom: 18px; }
    .scroll-cue .cue-track{ height: 34px; }
  }
  .btn{
    border-radius: 100px;
    padding: 15px 26px;
    font-weight: 700;
    font-size: 0.98rem;
    border: none;
    cursor: pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, filter .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
  }
  .btn-primary{
    background: linear-gradient(135deg, var(--coral), var(--pink));
    color:#fff;
    box-shadow: 0 10px 24px -10px var(--shadow);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px -12px var(--shadow); filter: brightness(1.04); }
  .btn-ghost{
    background: transparent; color: var(--ink); border: 1.5px solid var(--line);
  }
  .btn-ghost:hover{ border-color: var(--indigo); color: var(--indigo); }

  .hero-trust{
    margin-top: 26px;
    font-size: 0.86rem;
    color: var(--ink-soft);
    display:flex; align-items:center; gap:10px;
  }
  .hero-trust .dots{ display:flex; }
  .hero-trust .dots span{
    width:9px;height:9px;border-radius:50%;
    background: var(--bg-alt); border:2px solid var(--bg);
    box-shadow: 0 0 0 1px var(--line);
    margin-left:-6px;
  }
  .hero-trust .dots span:first-child{ margin-left:0; }
  .hero-trust .dots .rp{ background: var(--indigo); }
  .hero-trust .dots .sh{ background: var(--coral); }
  .hero-trust .dots .aa{ background: var(--gold); }
  .hero-trust .dots .ph{ background: var(--pink); }

  /* ============ HERO VISUAL ============ */
  .hero-visual{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    min-height: 340px;
  }
  .ticket{
    position:relative;
    width: min(340px, 82vw);
    aspect-ratio: 1/1;
    border-radius: 30% 30% 30% 6%;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px var(--shadow);
    animation: ticketIn 1s cubic-bezier(.22,.61,.36,1) .22s both;
  }
  .ticket img{ width:100%; height:100%; object-fit:cover; }
  @keyframes ticketIn{
    from{ opacity:0; transform: translateY(16px); }
    to{ opacity:1; transform: none; }
  }
  .hero-visual .stamp{
    position:absolute;
    right: -1%;
    bottom: -13%;
    background: var(--gold-pale);
    color: var(--gold);
    border: 2px dashed var(--gold);
    border-radius: 50%;
    width: 108px; height:108px;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    font-family:'Unbounded'; font-weight:700; font-size:0.72rem;
    letter-spacing:0.03em;
    transform: rotate(-14deg);
    line-height:1.25;
    animation: stampIn .8s cubic-bezier(.22,.61,.36,1) .95s both;
  }
  @keyframes stampIn{
    from{ opacity:0; transform: rotate(-14deg) translateY(10px); }
    to{ opacity:1; transform: rotate(-14deg) translateY(0); }
  }

  /* ============ PERFORATION DIVIDER ============ */
  .perf{
    height: 28px;
    background-image: radial-gradient(circle, var(--bg) 5px, transparent 5.5px);
    background-size: 28px 28px;
    background-position: center;
    background-repeat: repeat-x;
    position: relative;
  }
  .perf::before, .perf::after{
    content:""; position:absolute; top:50%; left:0; right:0;
    border-top: 1.5px dashed var(--line);
  }
  .section-alt{ background: var(--bg-alt); }

  /* ============ SECTION SHELL ============ */
  section{ padding: 68px 0; }
  .eyebrow{
    font-family:'Space Mono'; font-size:0.78rem; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase; color: var(--indigo);
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:""; width:22px; height:2px; background:var(--coral); display:inline-block; }
  .section-head{ max-width: 640px; margin-bottom: 42px; }
  .section-head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top:10px; }
  .section-head p{ color: var(--ink-soft); margin-top: 14px; font-size:1.02rem; }

  /* reveal-on-scroll: a quiet fade with a short rise, staggered a little
     across siblings so a row of cards settles in sequence rather than
     all snapping at once. Nothing overshoots or bounces. */
  [data-reveal]{ opacity:1; transform:none; }
  [data-reveal].pre{ opacity:0.001; transform: translateY(18px); }
  [data-reveal].go{ animation: riseIn .85s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes riseIn{ from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform:none; } }

  /* ============ FEATURE TAGS ============ */
  .feat-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 860px){ .feat-grid{ grid-template-columns: 1fr; } }
  .feat-card{
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 8px 16px 16px 8px;
    padding: 24px 20px;
    position:relative;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  .feat-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -20px var(--shadow); border-color: var(--indigo-pale); }
  .feat-card::before{
    content:""; position:absolute; left:0; top:22px; width:8px; height:8px;
    border-radius:50%; background:var(--bg); border:2px solid var(--coral);
    transform: translateX(-50%);
  }
  .feat-card .ic{
    width:40px; height:40px; border-radius:10px;
    background: var(--indigo-pale); color: var(--indigo);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 16px; font-size:1.2rem;
  }
  .feat-card h3{ font-size: 1.02rem; font-family:'Manrope'; font-weight:800; }
  .feat-card p{ color: var(--ink-soft); font-size: 0.92rem; margin-top:8px; }

  /* ============ CATEGORY MARQUEE ============ */
  .marquee-wrap{
    overflow:hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee-track{
    display:flex; gap:14px; width:max-content;
    will-change: transform;
    backface-visibility: hidden;
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-wrap{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  }
  .chip{
    flex: 0 0 auto;
    display:flex; align-items:center; gap:10px;
    background: var(--bg-alt);
    border:1px solid var(--line);
    border-radius: 100px;
    padding: 12px 22px;
    font-weight:700; font-size:0.94rem;
    white-space:nowrap;
  }
  .chip .dot{ width:8px;height:8px;border-radius:50%; }

  /* ============ PARTNERS ============ */
  .partners-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  @media (max-width: 1080px){ .partners-grid{ grid-template-columns: repeat(3,1fr); gap:16px; } }
  @media (max-width: 760px){ .partners-grid{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 470px){ .partners-grid{ grid-template-columns: 1fr;} }
  .partner-card{
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 8px 20px 20px 8px;
    padding: 22px 16px 20px;
    position:relative;
    text-align:left;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  .partner-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 36px -20px var(--shadow); }
  .partner-card .fold{
    position:absolute; left:0; bottom:0; width:34px; height:34px;
    background: linear-gradient(135deg, var(--gold), var(--coral) 50%, var(--pink));
    clip-path: polygon(0 100%, 100% 100%, 0 0);
  }
  .partner-card .mark{
    width:52px; height:52px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Unbounded'; font-weight:800; font-size:1.2rem;
    color:#fff; margin-bottom:16px;
  }
  /* real merchant logos sit on a white plate in both themes, so each brand
     appears on the ground it was designed for */
  .partner-card .logo-plate{
    height: 76px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 10px 14px;
    display:flex; align-items:center; justify-content:center;
  }
  .partner-card .logo-plate img{
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
  }
  /* stands in until a real logo file arrives — their name set in our own
     typeface, never an imitation of their mark. Dark ink because the plate
     itself is white in both themes. */
  .partner-card .logo-plate .plate-name{
    font-family:'Unbounded', system-ui, sans-serif;
    font-weight:700; font-size:1.02rem;
    letter-spacing:0.01em;
    color:#23262F;
    text-align:center;
  }
  .partner-card h3{ font-family:'Manrope'; font-weight:800; font-size:0.99rem; line-height:1.25; }
  .partner-card .cat{ color: var(--ink-soft); font-size:0.84rem; margin-top:4px; }
  .partner-card .seal{
    margin-top:14px; display:inline-flex; align-items:center; gap:6px;
    font-family:'Space Mono'; font-size:0.7rem; font-weight:700;
    color: var(--gold); border:1px solid var(--gold); border-radius:100px;
    padding: 4px 10px 4px 8px; letter-spacing:0.03em;
  }
  /* Invitation strip under the partner grid. Deliberately not a card: a dashed
     rule and a single row, so it reads as a prompt rather than as another
     onboarded merchant. */
  .partners-invite{
    margin-top: 18px;
    display:flex; align-items:center; gap:16px;
    padding: 16px 20px;
    border: 1.5px dashed var(--line);
    border-radius: 8px 20px 20px 8px;
    color: var(--ink-soft);
    text-decoration:none;
    font-size: 0.9rem;
    background: transparent;
    transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .partners-invite .invite-plus{
    flex: 0 0 auto;
    width:38px; height:38px; border-radius:50%;
    border:1.5px dashed var(--line);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; line-height:1;
    transition: border-color .3s ease, background .3s ease, color .3s ease;
  }
  .partners-invite .invite-text{ flex:1 1 auto; }
  .partners-invite .invite-text strong{ color: var(--ink); font-weight:800; }
  .partners-invite .invite-go{
    flex:0 0 auto; font-size:1.05rem;
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .partners-invite:hover{
    border-color: var(--indigo);
    background: var(--indigo-pale);
    color: var(--ink);
  }
  .partners-invite:hover .invite-plus{ border-color: var(--indigo); color: var(--indigo); }
  .partners-invite:hover .invite-go{ transform: translateX(4px); }
  .partners-invite:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
  @media (max-width: 520px){
    .partners-invite{ flex-wrap:wrap; gap:12px; }
    .partners-invite .invite-go{ display:none; }
  }

  /* ============ FAQ ============ */
  /* Native <details> rather than a JS accordion: the answers sit in the DOM
     whether open or shut, so Google indexes all of them, and it works with a
     keyboard and a screen reader for free. */
  .faq-list{ margin-top: 30px; border-top: 1px solid var(--line); }
  .faq-item{ border-bottom: 1px solid var(--line); }
  .faq-item > summary{
    list-style: none;
    cursor: pointer;
    padding: 20px 44px 20px 0;
    position: relative;
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.01rem;
    color: var(--ink);
    transition: color .25s ease;
  }
  .faq-item > summary::-webkit-details-marker{ display:none; }
  .faq-item > summary:hover{ color: var(--indigo); }
  .faq-item > summary:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
  .faq-item > summary::after{
    content:"";
    position:absolute; right:8px; top:50%;
    width:9px; height:9px;
    border-right:2px solid var(--indigo);
    border-bottom:2px solid var(--indigo);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .faq-item[open] > summary::after{ transform: translateY(-30%) rotate(225deg); }
  .faq-item .faq-answer{
    padding: 0 40px 22px 0;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.65;
    max-width: 68ch;
  }
  @media (max-width: 520px){
    .faq-item > summary{ font-size: 0.97rem; padding-right: 36px; }
  }

  /* ============ WHY MERCHANTS ============ */
  .why-wrap{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items:start;
  }
  @media (max-width: 900px){ .why-wrap{ grid-template-columns:1fr; } }
  .why-list{ display:flex; flex-direction:column; gap:22px; }
  .why-item{ display:flex; gap:16px; }
  .why-item .num{
    font-family:'Space Mono'; font-weight:700; font-size:0.85rem;
    color: var(--coral); flex:0 0 auto; padding-top:3px;
  }
  .why-item h3{ font-family:'Manrope'; font-weight:800; font-size:1.02rem; }
  .why-item p{ color: var(--ink-soft); font-size:0.94rem; margin-top:4px; }
  .why-card{
    background: linear-gradient(155deg, var(--indigo-deep), var(--indigo));
    border-radius: 10px 26px 26px 10px;
    padding: 34px 30px;
    color: #fff;
    position:relative;
    overflow:hidden;
  }
  .why-card::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.14), transparent 45%);
    pointer-events: none; /* decorative only — must not swallow clicks on the CTA */
  }
  .why-card > *{ position: relative; z-index: 1; }
  .why-card .eyebrow{ color: rgba(255,255,255,0.75); }
  .why-card .eyebrow::before{ background: #fff; }
  .why-card h3{ font-size:1.3rem; margin-top:14px; color:#fff; }
  .why-card p{ color: rgba(255,255,255,0.82); margin-top:12px; font-size:0.98rem; }
  .why-card .btn-primary{ background:#fff; color: var(--indigo-deep); margin-top:20px; }
  .why-card .btn-primary:hover{ box-shadow: 0 14px 30px -10px rgba(0,0,0,0.4); }

  /* ============ SIGNUP (coupon stub) ============ */
  .stub{
    position: relative;
    background: var(--bg-alt);
    border: 1.5px dashed var(--line);
    border-radius: 18px;
    padding: 44px;
    display:grid;
    grid-template-columns: 1fr 1px 1.1fr;
    gap: 40px;
  }
  @media (max-width: 860px){
    .stub{ grid-template-columns: 1fr; padding: 30px 24px; }
    .stub .stub-divider{ display:none; }
  }
  .stub-divider{ background-image: linear-gradient(var(--line) 60%, transparent 0%); background-size: 2px 12px; background-repeat: repeat-y; }
  .stub::before, .stub::after{
    content:""; position:absolute; width:26px; height:26px; border-radius:50%;
    background: var(--bg); top:50%; transform:translateY(-50%);
  }
  .stub::before{ left:-13px; }
  .stub::after{ right:-13px; }
  .stub-left h2{ font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
  .stub-left p{ color: var(--ink-soft); margin-top:14px; max-width:38ch; }
  .stub-left .mini-trust{
    margin-top:22px; display:flex; gap:10px; flex-wrap:wrap;
  }
  .mini-badge{
    font-family:'Space Mono'; font-size:0.72rem; font-weight:700;
    border:1px solid var(--line); border-radius:100px; padding:6px 12px;
    color: var(--ink-soft);
  }

  .toggle-row{ display:flex; gap:8px; background: var(--bg); padding:5px; border-radius:100px; margin-bottom: 22px; width:max-content; }
  .toggle-btn{
    border:none; background:transparent; padding:9px 18px; border-radius:100px;
    font-weight:700; font-size:0.88rem; color: var(--ink-soft); cursor:pointer;
    transition: background .15s ease, color .15s ease;
  }
  .toggle-btn.active{ background: var(--indigo); color:#fff; }

  form{ display:flex; flex-direction:column; gap:14px; }
  .field-row{ display:flex; gap:14px; }
  @media (max-width:520px){ .field-row{ flex-direction:column; } }
  label{ font-size:0.82rem; font-weight:700; color: var(--ink-soft); display:block; margin-bottom:6px; }
  input, select{
    width:100%;
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family:'Manrope'; font-size:0.95rem; color: var(--ink);
  }
  input:focus, select:focus{ border-color: var(--indigo); }
  .field{ flex:1; }
  .merchant-only{ display:none; }
  .merchant-only.show{ display:flex; flex-direction:column; gap:14px; }
  .submit-btn{ margin-top:6px; }
  .form-note{ font-size:0.8rem; color: var(--ink-soft); margin-top:4px; }
  .success{
    display:none; align-items:center; gap:10px;
    background: var(--indigo-pale); color: var(--indigo);
    border-radius: 10px; padding: 14px 16px; font-weight:700; font-size:0.9rem;
    margin-top: 8px;
  }
  .success.show{ display:flex; }

  /* ============ FOOTER ============ */
  footer{ padding: 48px 0 40px; border-top: 1px solid var(--line-soft); }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
  .foot-brand{ display:flex; align-items:center; gap:10px; }
  .foot-brand img{ width:30px;height:30px;border-radius:8px; }
  .foot-brand span{ font-family:'Unbounded'; font-weight:700; }
  .foot-links{ display:flex; gap:22px; font-size:0.86rem; color: var(--ink-soft); }
  .foot-links a{ text-decoration:none; }
  .foot-links a:hover{ color: var(--indigo); }
  .foot-copy{ font-size:0.78rem; color: var(--ink-soft); margin-top: 22px; text-align:center; }

  /* ==========================================================
     MOTION — site-wide animation pass.
     Everything below is movement only; nothing here changes
     layout, so the page still reads correctly at rest and with
     prefers-reduced-motion (which disables all of it, above).
     ========================================================== */

  /* --- nav: shimmering brand stripe + scroll-progress line --- */
  .brand-stripe{
    background: linear-gradient(90deg, var(--coral), var(--pink) 25%, var(--gold) 50%, var(--pink) 75%, var(--coral));
    background-size: 300% 100%;
    animation: stripeShimmer 14s linear infinite;
  }
  @keyframes stripeShimmer{
    from{ background-position: 0% 0; }
    to{ background-position: 300% 0; }
  }
  .scroll-line{
    position:absolute; left:0; bottom:-1px; height:2px; width:0;
    background: linear-gradient(90deg, var(--coral), var(--pink));
    z-index:2;
  }
  .nav-links a{ position:relative; }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
    background: linear-gradient(90deg, var(--coral), var(--pink));
    transform: scaleX(0); transform-origin:left;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .nav-links a:hover::after{ transform: scaleX(1); }
  .brand img{ transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .brand:hover img{ transform: rotate(-6deg) scale(1.07); }

  /* --- hero: ambient drift --- */
  .hero-float{
    animation: settleIn 1s ease .7s both,
               floaty 7s ease-in-out 1.7s infinite;
  }
  .hero-float:nth-of-type(2){ animation-delay: .85s, 2.3s; }
  .hero-float:nth-of-type(3){ animation-delay: 1s, 2.9s; }
  @keyframes floaty{
    0%,100%{ transform: rotate(var(--r,0deg)) translateY(0); }
    50%{ transform: rotate(calc(var(--r,0deg) + 5deg)) translateY(-14px); }
  }
  .ticket{
    animation: ticketIn 1s cubic-bezier(.22,.61,.36,1) .22s both,
               ticketFloat 9s ease-in-out 1.4s infinite;
  }
  @keyframes ticketFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-12px); }
  }
  /* the Doha skyline draws itself in, tower by tower */
  .hero-skyline path{
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: drawLine 2.6s cubic-bezier(.33,.68,.36,1) both;
  }
  .hero-skyline path:nth-child(1){ animation-delay:.35s; }
  .hero-skyline path:nth-child(2){ animation-delay:.5s; }
  .hero-skyline path:nth-child(3){ animation-delay:.62s; }
  .hero-skyline path:nth-child(4){ animation-delay:.74s; }
  .hero-skyline path:nth-child(5){ animation-delay:.86s; }
  .hero-skyline path:nth-child(6){ animation-delay:.98s; }
  .hero-skyline path:nth-child(7){ animation-delay:1.1s; }
  .hero-skyline path:nth-child(8){ animation-delay:1.22s; }
  .hero-skyline path:nth-child(9){ animation-delay:1.34s; }
  .hero-skyline path:nth-child(10){ animation-delay:1.46s; }
  .hero-skyline path:nth-child(11){ animation-delay:1.58s; }
  .hero-skyline path:nth-child(12){ animation-delay:1.7s; }
  @keyframes drawLine{ to{ stroke-dashoffset: 0; } }
  /* "Free." keeps a slow-moving gradient */
  .hero h1 em{
    background: linear-gradient(100deg, var(--coral), var(--pink), var(--gold), var(--coral));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientShift 10s linear infinite;
  }
  @keyframes gradientShift{
    from{ background-position: 0% 50%; }
    to{ background-position: 300% 50%; }
  }
  .hero-visual{ will-change: transform; }

  /* --- scroll reveals: different entrances per element type --- */
  @keyframes riseInLeft{ from{ opacity:0; transform: translateX(-30px);} to{ opacity:1; transform:none;} }
  @keyframes riseInRight{ from{ opacity:0; transform: translateX(30px);} to{ opacity:1; transform:none;} }
  @keyframes popIn{ from{ opacity:0; transform: translateY(22px) scale(.96);} to{ opacity:1; transform:none;} }
  .why-list.pre{ transform: translateX(-30px); }
  .why-card.pre{ transform: translateX(30px); }
  .feat-card.pre, .partner-card.pre, .stub.pre{ transform: translateY(22px) scale(.96); }
  .why-list.go{ animation-name: riseInLeft; }
  .why-card.go{ animation-name: riseInRight; }
  .feat-card.go, .partner-card.go, .stub.go{ animation-name: popIn; }
  /* the eyebrow rule draws out as its section arrives */
  .section-head.go .eyebrow::before{
    animation: lineGrow .7s cubic-bezier(.22,.61,.36,1) .2s both;
    transform-origin:left;
  }
  @keyframes lineGrow{ from{ transform: scaleX(0);} to{ transform: scaleX(1);} }

  /* --- cards --- */
  .feat-card .ic{ transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .feat-card:hover .ic{ transform: rotate(-8deg) scale(1.14); }
  .partner-card .mark, .partner-card .logo-plate img{ transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .partner-card:hover .mark, .partner-card:hover .logo-plate img{ transform: scale(1.05); }
  .partner-card .fold{ transition: width .4s cubic-bezier(.22,.61,.36,1), height .4s cubic-bezier(.22,.61,.36,1); }
  .partner-card:hover .fold{ width:48px; height:48px; }
  .partner-card .seal{ animation: sealGlow 4s ease-in-out 1s infinite; }
  @keyframes sealGlow{
    0%,100%{ box-shadow: 0 0 0 0 rgba(165,130,74,0); }
    50%{ box-shadow: 0 0 0 5px rgba(165,130,74,.14); }
  }
  .partner-card.placeholder .plus{ transition: transform .55s cubic-bezier(.22,.61,.36,1); }
  .partner-card.placeholder:hover .plus{ transform: rotate(90deg); }

  /* --- category chips --- */
  .chip{ transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
  .chip:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 22px -14px var(--shadow); }
  .marquee-wrap--2{ margin-top: 14px; }

  /* --- merchant panel: living gradient --- */
  .why-item .num{ transition: transform .35s cubic-bezier(.22,.61,.36,1); }
  .why-item:hover .num{ transform: translateX(4px); }
  .why-card{
    background: linear-gradient(155deg, var(--indigo-deep), var(--indigo), var(--indigo-deep));
    background-size: 100% 300%;
    animation: panelShift 14s ease-in-out infinite;
  }
  @keyframes panelShift{
    0%,100%{ background-position: 50% 0%; }
    50%{ background-position: 50% 100%; }
  }

  /* --- buttons: light sweeps across on hover --- */
  .btn, .nav-cta{ position:relative; overflow:hidden; }
  .btn::after, .nav-cta::after{
    content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-18deg);
    transition: left .7s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
  }
  .btn:hover::after, .nav-cta:hover::after{ left:140%; }

  /* --- form --- */
  input, select{ transition: border-color .25s ease, box-shadow .25s ease; }
  input:focus, select:focus{ box-shadow: 0 0 0 4px var(--indigo-pale); }
  .toggle-row{ position:relative; }
  .toggle-pill{
    position:absolute; top:5px; bottom:5px; left:5px; width:0;
    background: var(--indigo); border-radius:100px; z-index:0;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), width .45s cubic-bezier(.22,.61,.36,1);
  }
  .toggle-btn{ position:relative; z-index:1; }
  .toggle-btn.active{ background: transparent; color:#fff; }
  .merchant-only.show{ animation: popIn .45s cubic-bezier(.22,.61,.36,1) both; }
  .success.show{ animation: popIn .5s cubic-bezier(.22,.61,.36,1) both; }

  /* --- footer --- */
  .foot-brand img{ transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .foot-brand:hover img{ transform: rotate(-6deg) scale(1.07); }
  .foot-links a{ position:relative; }
  .foot-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px;
    background: var(--indigo); transform: scaleX(0); transform-origin:left;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .foot-links a:hover::after{ transform: scaleX(1); }

/* ==========================================================
   MERCHANT PAGES  (/merchants/ and /merchants/<slug>/)
   Reuses the homepage tokens and card styles; only the layout
   pieces that don't exist on the homepage are defined here.
   ========================================================== */
.merchant-main{ padding: 46px 0 72px; }

.crumbs{
  display:flex; align-items:center; flex-wrap:wrap;
  font-size:0.82rem; color: var(--ink-soft);
  margin-bottom: 30px;
}
.crumbs a{ color: var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color: var(--indigo); text-decoration:underline; }
.crumbs .crumb-sep{ margin:0 9px; opacity:0.5; }
.crumbs [aria-current="page"]{ color: var(--ink); font-weight:600; }

.merchant-hero{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 38px;
  align-items:start;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 760px){
  .merchant-hero{ grid-template-columns: 1fr; gap: 24px; }
}
.merchant-logo{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:22px;
  display:flex; align-items:center; justify-content:center;
  min-height:130px;
  box-shadow: 0 10px 26px -18px var(--shadow);
}
.merchant-logo img{ max-width:100%; max-height:90px; width:auto; object-fit:contain; }
.merchant-intro h1{
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight:800; line-height:1.12; letter-spacing:-0.01em;
  margin-top: 12px;
  text-wrap: balance;
}
.merchant-intro .lede{
  margin-top:14px; font-size:1.06rem; color:var(--ink-soft); max-width:60ch;
}
/* Says plainly that there are no live offers yet. Better to state it than to let
   a visitor arrive expecting a flyer and feel misled. */
.merchant-intro .status-note{
  margin-top:16px; padding:13px 16px;
  background: var(--indigo-pale);
  border-left:3px solid var(--indigo);
  border-radius:0 8px 8px 0;
  font-size:0.9rem; color:var(--ink); max-width:62ch;
}
.merchant-intro .btn{ margin-top:20px; }

.merchant-body{ padding-top: 40px; max-width: 74ch; }
.merchant-body h2{
  font-size:1.32rem; font-weight:800; margin-top:38px; margin-bottom:14px;
}
.merchant-body h2:first-child{ margin-top:0; }
.merchant-body p{ color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }

.sells-list{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px; }
@media (max-width: 560px){ .sells-list{ grid-template-columns:1fr; } }
.sells-list li{
  position:relative; padding-left:22px; color:var(--ink-soft); font-size:0.95rem;
}
.sells-list li::before{
  content:""; position:absolute; left:2px; top:0.55em;
  width:7px; height:7px; border-radius:50%;
  background: linear-gradient(135deg, var(--coral), var(--pink));
}

.branch-list{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.branch{
  display:grid; grid-template-columns: 200px 1fr; gap:16px; align-items:baseline;
  padding:15px 2px; border-bottom:1px solid var(--line-soft);
}
@media (max-width: 680px){
  .branch{ grid-template-columns:1fr; gap:4px; }
}
.branch-name{ font-family:'Manrope', system-ui, sans-serif; font-weight:800; font-size:0.98rem; }
.branch-addr{ color:var(--ink-soft); font-size:0.92rem; }

.official-link{ font-size:0.9rem; }
.official-link a{ color:var(--indigo); font-weight:600; }

.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width: 560px){ .rel-grid{ grid-template-columns:repeat(2,1fr); } }
.rel-card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:16px 12px; text-decoration:none;
  background:var(--bg-alt); border:1px solid var(--line);
  border-radius:6px 14px 14px 6px;
  color:var(--ink); font-size:0.86rem; font-weight:700; text-align:center;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.rel-card img{
  height:38px; width:auto; max-width:100%; object-fit:contain;
  background:#fff; border-radius:4px; padding:5px 7px;
}
.rel-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -20px var(--shadow); border-color:var(--indigo); }

.back-link{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.back-link a{ color:var(--indigo); font-weight:700; text-decoration:none; font-size:0.92rem; }
.back-link a:hover{ text-decoration:underline; }

/* the index reuses .partner-card, but there the cards are links and the store
   name is an h2 rather than an h3 */
.merchants-index .partner-card{ text-decoration:none; color:inherit; display:block; }
.merchants-index .card-title{
  font-family:'Manrope', system-ui, sans-serif; font-weight:800; font-size:1.05rem;
}

/* homepage partner cards became links once merchant pages existed */
a.partner-card{ text-decoration:none; color:inherit; display:block; }
.see-all{ margin-top:18px; font-size:0.92rem; }
.see-all a{ color:var(--indigo); font-weight:700; text-decoration:none; }
.see-all a:hover{ text-decoration:underline; }

/* .nav-cta is an <a> on subpages, where there is no in-page #signup to scroll to */
a.nav-cta{ text-decoration:none; }

/* Al Anees uses named store formats (SuperStore, Instant Store, Kiosk). These
   are not addresses, so they ride as a chip beside the branch name rather than
   in a column of their own — a sparse column is what made the hours field look
   bad, and most branches have no format name. */
.branch-format{
  display:inline-block; margin-left:9px;
  font-family:'Space Mono', ui-monospace, monospace;
  font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em;
  color: var(--indigo);
  background: var(--indigo-pale);
  border-radius:100px; padding:3px 9px;
  vertical-align:1px; white-space:nowrap;
}

/* fifth founding partner */
.hero-trust .dots .bb{ background: var(--gold-pale); border-color: var(--bg); }

/* The merchants section slides its two halves in from opposite sides, so before
   they reveal, .why-card sits 30px past the right edge and widens the page — a
   real horizontal scrollbar on narrow screens. `overflow-x: clip` contains the
   overhang; `hidden` would do it too but creates a scroll container, which can
   break position:sticky elsewhere on the page. */
#merchants{ overflow-x: clip; }

/* Cards stretch to equal height in the grid, but the category wraps to two lines
   on some and one on others, so the seal landed at a different height on each.
   Flex column + auto top margin pins every seal to the same baseline. */
.partner-card{ display:flex; flex-direction:column; }
a.partner-card, .merchants-index .partner-card{ display:flex; }
.partner-card .seal{ margin-top:auto; align-self:flex-start; }
.partner-card .cat{ margin-bottom:14px; }

/* the 404 lists every merchant (merchant pages list every *other* one), so it
   needs one more column than they do */
.rel-grid--all{ grid-template-columns:repeat(5,1fr); }
@media (max-width: 760px){ .rel-grid--all{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 480px){ .rel-grid--all{ grid-template-columns:repeat(2,1fr); } }

/* ---- eight founding partners ----
   Eight cards fill two rows of four exactly; the earlier 5-up grid would leave
   5 + 3. Cards regain a little of the padding they gave up at 5-up. */
.partners-grid{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px){ .partners-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px){ .partners-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 470px){ .partners-grid{ grid-template-columns: 1fr; } }
.partner-card{ padding: 24px 18px 20px; }

/* "and 5 more" reads as a link, quietly */
.trust-more{ color: var(--indigo); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); }
.trust-more:hover{ border-bottom-color: var(--indigo); }

/* name plates wherever a merchant has no logo file yet */
.merchant-logo .plate-name{
  font-family:'Unbounded', system-ui, sans-serif; font-weight:700;
  font-size:1.15rem; color:#23262F; text-align:center; line-height:1.2;
  text-wrap: balance;
}
.rel-card .plate-name{
  display:flex; align-items:center; justify-content:center;
  height:38px; padding:0 8px; background:#fff; border-radius:4px;
  font-family:'Unbounded', system-ui, sans-serif; font-weight:700;
  font-size:0.62rem; color:#23262F; letter-spacing:0.01em; text-align:center; line-height:1.15;
}
/* seven sibling partners on each merchant page now; the 404 shows all eight */
.rel-grid{ grid-template-columns: repeat(4, 1fr); }
.rel-grid--all{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px){ .rel-grid, .rel-grid--all{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 480px){ .rel-grid, .rel-grid--all{ grid-template-columns:repeat(2,1fr); } }

/* Contact block on merchant pages. For the merchants with no website of their
   own, this is the part of the page a searcher actually came for. */
.contact-list{
  display:grid; grid-template-columns: 120px 1fr; gap:10px 18px;
  margin: 4px 0 8px; align-items:baseline;
}
@media (max-width: 520px){ .contact-list{ grid-template-columns:1fr; gap:2px 0; } }
.contact-list dt{
  font-family:'Manrope', system-ui, sans-serif; font-weight:800;
  font-size:0.86rem; color:var(--ink);
}
.contact-list dd{ margin:0; font-size:0.95rem; color:var(--ink-soft); }
.contact-list dd a{ color:var(--indigo); font-weight:600; text-decoration:none; }
.contact-list dd a:hover{ text-decoration:underline; }
@media (max-width: 520px){ .contact-list dd{ margin-bottom:10px; } }