/* ===========================================================
   6 / WHAT THEY SAY — #says
   The feedback carousel, asked for against the TapeMate comp:
   "after this part is the feedback message part / copy the format
   sa sinend ko but still sundin ang theme natin".

   WHAT WAS COPIED — the format. Eyebrow with a rule, a three-line
   headline with the last line accented and underlined, a lede, and
   a card STACK to the right of it: counter, avatar with initials,
   name, place, a verified badge, five stars, the message, round
   prev/next buttons and a row of pager dots.

   WHAT WAS NOT — the colours, and everything that carries them.
   The reference is navy and post-box red on white, with a hard
   1px grid behind it. This is the page's own cream, ivory and
   gold: the accent is --gold-ink because it is the only gold on
   this page that clears 4.5:1 on cream, the rules are hairlines
   in --line, and the ground behind the stack is a dashed arc and
   two drifting chips rather than a printed grid.

   ⚠️ NO SCRIPT IS REQUIRED. Six radios and their labels drive the
     whole carousel, the same device the map filter used and the
     stepper before it. That buys three things a JS slider would
     have had to rebuild: it works with JS off, the arrow keys
     move between messages because that is what a radio group
     does, and every message is in the document for a screen
     reader whether or not it is the one on top.
     main.js adds two things on top of this and nothing else:
     swipe, and the auto-advance. Both are pure enhancement —
     delete them and the dots, the arrows and the arrow keys
     all still work, because they are radios and labels.

   ⚠️ THE CARDS ARE STACKED IN ONE GRID CELL, NOT ABSOLUTELY
     POSITIONED. A deck of absolute cards has no height of its
     own and needs a magic number that the longest message then
     overflows. `grid-area:1/1` makes the deck exactly as tall as
     its tallest card, so a long message pushes the deck and
     nothing is ever clipped.
   =========================================================== */

/* ⚠️ ONE WIDTH FOR THE WHOLE COLUMN, declared on the section so the deck,
   the caption and the promise panel can all read it. The card was 636px wide
   and 266 tall on a 1440 — an aspect of 2.39, which is a banner rather than a
   card, and the reference card is nearer 1.1. Three hard-coded copies of one
   width is how the caption ends up wider than the thing it captions. */
.section.says{
  /* ⚠️ FLUID, NOT A FLAT 480. A fixed 480 fits the 636px column at 1440 and
     does NOT fit the 503px column at 1024 — measured, the arrows went back on
     top of the card by 35px there. The card has to give way to the two 46px
     controls beside it, so the width is tied to the viewport and the flat
     number is only the ceiling. */
  --sy-card-w:clamp(320px,34vw,480px);
  --sy-dots-gap:clamp(18px,2vw,26px);
  position:relative;
  overflow:clip;                 /* the drifting chips must not widen the page */

  /* ⚠️ THE SECTION HAD NO GROUND OF ITS OWN — it was the page's --cream,
     and the card is white-to-cream, so the two measured 1.061:1 apart. That is
     not a card on a ground, it is a card the same colour as its ground. The
     ask was to change one of them; changing the GROUND is the one that keeps
     the card the brightest thing on screen, which is what makes a card read as
     a card. Cream at both ends so neither edge terminates against the
     neighbouring section. Tokens only. */
  /* ⚠️ IT RUNS ACROSS, NOT DOWN, AND THE EYEBROW IS WHY. A vertical ramp
     put the same champagne under the head as under the deck, and "WHAT THEY
     SAY" is 11px of --gold-ink — which measures 4.79:1 on cream and 4.14:1 on
     that champagne, against the 4.5 an 11px line owes. --gold-ink is the
     DEEPEST gold in the token block, so there was nothing darker to reach for
     without leaving gold altogether. It only ever cleared because the ground
     was cream: 0.29 of headroom, and deepening the section spent it.
     Across, the head keeps its cream and the deck still gets a ground to sit
     on — which is the whole point, since the deck is the thing that was
     measuring 1.061:1 against its own background. The vertical layer on top
     only softens both edges so neither terminates against a neighbour. */
  background:
    linear-gradient(180deg,
      var(--cream) 0%, rgba(253,251,247,0) 13%,
      rgba(253,251,247,0) 87%, var(--cream) 100%),
    linear-gradient(100deg,
      var(--cream)     0%,
      var(--gold-tint) 30%,
      var(--gold-soft) 72%,
      var(--gold-soft) 100%);
}

/* ---------- the ground ---------- */
.sy-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

/* one slow warm pool, the same device the other sections use */
.sy-pool{
  position:absolute;
  width:64%;height:78%;
  top:6%;right:-8%;
  border-radius:50%;
  /* ⚠️ THIS POOL IS WHY THE GROUND WAS NEARLY WHITE EXACTLY WHERE THE CARD
     IS. It sits top-right at 64% x 78% — the deck's own corner — and painted
     rgba(255,250,236,.85) over it, which bleached whatever ground was under it
     back to the card's own colour. Deepening the section without this would
     have changed the measurement everywhere except the one place it mattered.
     It warms now instead of bleaching. */
  background:radial-gradient(ellipse at 50% 50%,
    rgba(255,252,243,.34) 0%, rgba(253,246,228,.18) 46%, rgba(250,240,214,0) 74%);
  animation:syPool 23s ease-in-out infinite alternate;
  will-change:transform, opacity;
}
@keyframes syPool{
  from{transform:translate3d(0,0,0) scale(1);opacity:.4;}
  to  {transform:translate3d(-3%,3%,0) scale(1.1);opacity:.72;}
}

/* the dashed arc that sits behind the stack in the reference, drawn
   here as a hairline in gold rather than a printed grey circle */
.sy-arc{
  position:absolute;
  top:50%;right:26%;
  width:min(560px,46vw);aspect-ratio:1;
  translate:0 -50%;
  border:1px dashed rgba(198,164,85,.34);
  border-radius:50%;
  animation:syArc 64s linear infinite;
}
@keyframes syArc{to{rotate:360deg;}}

/* the floating chips. The reference has a parcel, a heart and a
   thumb; the marks here are the page's own — a droplet and a
   four-point sparkle — because the other two belong to a courier. */
.sy-chip{
  position:absolute;
  display:grid;place-items:center;
  width:clamp(40px,3.6vw,52px);aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  animation:syFloat var(--dur,11s) ease-in-out var(--d,0s) infinite alternate;
  will-change:transform;
}
.sy-chip svg{width:46%;height:46%;fill:none;stroke:var(--gold-ink);stroke-width:1.7;}
/* ⚠️ KEPT OUT OF THE DECK'S BOX. The first placement put the droplet
   at right:44%, which is inside the card stack — it rendered as a
   half-eaten circle behind the top card. These two sit in the gutter
   between the columns and in the corner beneath them, the only places
   empty at every width this layer is shown at. */
.sy-chip-a{top:15%;right:56%;--dur:11s;}
.sy-chip-b{bottom:13%;right:3%;--dur:14s;--d:-4s;}
@keyframes syFloat{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(0,-14px,0);}
}

.says > .shell{position:relative;z-index:1;}

/* ---------- the two columns ---------- */
.sy-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,4vw,54px);
  align-items:center;
}
@media (min-width:980px){
  .sy-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,4.5vw,72px);}
}

/* ---------- the head ---------- */
.sy-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.sy-eyebrow i{
  display:block;width:26px;height:2px;border-radius:2px;
  background:var(--gold-ink);flex:none;
}
.sy-title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(32px,5.6vw,52px);
  line-height:1.1;
  letter-spacing:-.018em;
  color:var(--ink);
  margin-bottom:clamp(14px,1.6vw,20px);
}
/* the accented last line: italic gold with a swash under it, the
   reference's underline redrawn as a rule this page already owns */
.sy-title em{
  position:relative;
  font-style:italic;
  color:var(--gold-ink);
  white-space:nowrap;
}
.sy-title em::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-.06em;
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold) 0%, var(--gold-soft) 100%);
}
.sy-lede{
  font-size:clamp(14.5px,1.05vw,16px);
  line-height:1.66;
  color:var(--ink-2);
  max-width:40ch;
  margin-bottom:clamp(16px,1.8vw,22px);
  text-wrap:balance;
}
.sy-head .link-arrow{border-bottom-color:rgba(198,164,85,.55);}

/* the deck and everything that belongs to it */
.sy-col{min-width:0;}

/* ---------- the stage ---------- */
.sy-stage{position:relative;}

/* ⚠️ Focusable, not display:none. These six inputs ARE the control:
   hide them outright and the carousel stops taking the keyboard. */
.sy-in{
  /* ⚠️ bottom:0 IS LOAD-BEARING. Without an offset these 1px boxes render at
     the TOP of the stage, and activating a <label for> focuses the control it
     names — so tapping an arrow at the bottom of the section made the browser
     scroll the page up to the radio. Measured on a real touch tap: scrollY
     12143 -> 11454, and the arrow went from y=440 to y=1125. The first tap
     worked, moved the button out from under the finger, and every tap after it
     hit nothing. That is the whole of "ayaw gumana ng next buttons".

     They cannot stop taking focus — the radio group is what gives this
     carousel its arrow keys — and they cannot move later in the markup,
     because every rule here reaches forward from them with ~. Where their
     boxes RENDER is the one thing free to change, so they render at the foot
     of the stage, beside the dots and the arrows: whatever focus scrolls to is
     already under the finger, and nothing moves.

     ⚠️ AND THE ANCHOR MOVED AGAIN WITH THEM. bottom:0 was right while the
     arrows were at the foot of the stage; with them at the card's middle a
     bottom-anchored box is a scroll away once more. inset:0 makes each box the
     whole stage, and a focused element that is already partly visible is not
     scrolled to — which any part of the stage is, since something in it was
     just tapped. */
  position:absolute;inset:0;
  opacity:0;margin:0;pointer-events:none;
}

/* ---------- the deck ---------- */
.sy-deck{
  position:relative;
  display:grid;                   /* every card in one cell — see the note */
  isolation:isolate;
  /* capped, and centred in the column so the two arrows have somewhere to be
     that is not on top of the card */
  width:min(100%, var(--sy-card-w));
  margin-inline:auto;
  /* the counter sits above the card, outside it — this is its ground */
  margin-top:clamp(26px,2.8vw,36px);
}
/* the two cards peeking out behind the top one. They are pseudo-
   elements and not real cards: nothing is written on them, and a
   second and third copy of a message in the document would be
   read out twice by a screen reader. */
.sy-deck::before,
.sy-deck::after{
  content:"";
  position:absolute;inset:0;
  border-radius:var(--r-lg);
  border:1px solid rgba(198,164,85,.32);
  box-shadow:0 16px 36px -24px rgba(60,44,16,.45);
  z-index:-1;
}
/* ⚠️ DEPTH BY COLOUR, NOT BY OPACITY. These were white at .72 and .45 over
   a cream ground, which is a white card faded towards the colour behind it —
   there was nothing left of the edge to see, and the stack read as a smudge.
   Stepping white → cream → sand keeps every edge at full strength and puts the
   cards in an order the eye can actually follow. */
.sy-deck::before{
  transform:translate(12px,-12px) rotate(1.7deg);
  background:var(--cream);
}
.sy-deck::after{
  transform:translate(24px,-23px) rotate(3.3deg);
  background:var(--sand);
  border-color:rgba(198,164,85,.26);
}

.sy-card{
  grid-area:1 / 1;                /* stacked, so the deck is as tall as the tallest */
  position:relative;
  /* ⚠️ isolation:isolate IS WHAT LETS THE TWO DECORATION LAYERS BELOW USE
     z-index:-1. Without a stacking context here, a negative z-index child
     paints beneath its parent's own background — the card would cover both and
     nothing would appear. With it they sit above the card's face and below its
     words, which is exactly where a watermark belongs. Same device .sy-deck
     already uses for the two cards behind. */
  isolation:isolate;
  display:flex;flex-direction:column;
  /* ⚠️ THE SPARE SPACE IS SHARED, NOT STACKED AT ONE END. Every card is the
     same height — the grid cell, floored by the min-height below — so a short
     message leaves slack. .sy-top used to take it all with margin-top:auto,
     which put the whole gap ABOVE the name and was asked to be changed on the
     evidence of card 06, the shortest in the deck.
     justify-content and NOT a second auto margin: auto margins absorb the free
     space before justify-content sees any, so the auto had to come out rather
     than be balanced. */
  justify-content:center;
  gap:clamp(13px,1.5vw,18px);
  padding:clamp(22px,2.6vw,34px);
  /* ⚠️ A MINIMUM HEIGHT, so six slots are one size and the card is a card.
     Without it the deck is only as tall as whichever message is longest, and a
     two-line one left a 636x266 letterbox. */
  min-height:clamp(300px,26vw,380px);
  border-radius:var(--r-lg);
  /* ⚠️ NOT FLAT WHITE, AND THE EDGE IS GOLD RATHER THAN --line. A white
     card with a #E9E3D6 hairline on this section's warm ground was the whole
     complaint: it did not read as an object. Tokens only — white to cream down
     the face, a gold edge, and a shadow deep enough to lift it off. */
  background:linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  border:1px solid rgba(198,164,85,.36);
  box-shadow:
    0 28px 64px -30px rgba(60,44,16,.5),
    0 6px 16px -12px rgba(60,44,16,.22),
    0 1px 0 rgba(255,255,255,.9) inset;
  opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.985);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.sy-in:nth-of-type(1):checked ~ .sy-deck .sy-card:nth-of-type(1),
.sy-in:nth-of-type(2):checked ~ .sy-deck .sy-card:nth-of-type(2),
.sy-in:nth-of-type(3):checked ~ .sy-deck .sy-card:nth-of-type(3),
.sy-in:nth-of-type(4):checked ~ .sy-deck .sy-card:nth-of-type(4),
.sy-in:nth-of-type(5):checked ~ .sy-deck .sy-card:nth-of-type(5),
.sy-in:nth-of-type(6):checked ~ .sy-deck .sy-card:nth-of-type(6),
.sy-in:nth-of-type(7):checked ~ .sy-deck .sy-card:nth-of-type(7){
  opacity:1;visibility:visible;
  transform:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s;
}

/* ---------- the card is not blank paper ----------
   ⚠️ NOTHING HERE MAY READ AS CONTENT. A weave and a ring are the card's
   paper, not a customer's words. Nothing added here says anything.

   ⚠️ THE QUOTE WATERMARK THAT USED TO BE THE FIRST LAYER IS GONE, AND THE
   REASON IS THE NOTE THAT WAS ALREADY HERE: "a watermark that touches a real
   element stops being paper". It was sized and placed to sit "in the air
   under the counter" of an EMPTY card — a placeholder sat at the card's
   min-height with slack pushing the name row down. Seven real messages fill
   the cards, the slack is gone, the rows moved up, and at 1440 the mark
   (y 52-152 inside the card) was overlapping .sy-top, which now starts at
   124. It could not be moved up either: above the name row there is only
   ~25px of counter and the mark was 100px tall. The message already carries
   a quote mark of its own in .sy-quote::before.

   ⚠️ DRAWN, NOT TYPED. The obvious way to put a big quote mark on the card
   is content:"\201C" — which .sy-quote::before already does for the small one.
   A second one would be a second quote mark in the accessibility tree, read
   out for a card that has one quote in it. An SVG in a data URI is a picture
   and is announced by nobody. */
.sy-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background-image:
    /* two rings bottom-right, the same concentric mark .sy-promise carries */
    radial-gradient(circle closest-side,
      rgba(198,164,85,0) 0 57%,
      rgba(198,164,85,.17) 57% 60%,
      rgba(198,164,85,0) 60% 80%,
      rgba(198,164,85,.12) 80% 83%,
      rgba(198,164,85,0) 83%),
    /* a weave across the whole face, so the paper has a grain */
    repeating-linear-gradient(135deg,
      rgba(198,164,85,0) 0 11px,
      rgba(198,164,85,.05) 11px 12px);
  background-size:
    clamp(120px,13vw,168px) clamp(120px,13vw,168px),
    auto;
  background-position:
    calc(100% + 26px) calc(100% + 26px),
    0 0;
  background-repeat:no-repeat, repeat;
  opacity:.5;
}
/* what is left leans on nothing: the rings sit off the bottom-right corner
   and the weave covers the whole face, so a message of any length can push
   the rows wherever it likes and neither of them can touch it */

/* ---------- inside a card ---------- */
/* ⚠️ THE SLACK IS SHARED NOW, AND THIS NOTE USED TO SAY THE OPPOSITE. It read:
   "THE SLACK GOES UNDER THE COUNTER, NOT ABOVE THE MESSAGE. The card has a
   minimum height, so something has to absorb the spare space ... the reference
   puts it straight under the 05 / 06 and groups the name, the stars and the
   message together at the foot — .sy-count is the card's first in-flow row, so
   an auto top margin on the row AFTER it does exactly that."

   That produced a visible gap at the TOP of the short cards, and it was
   changed on request with card 06 — the shortest message in the deck, and the
   only card where the difference shows — attached. The auto margin is gone and
   .sy-card carries justify-content:center. The counter is no longer an in-flow
   row either: it is absolutely positioned above the card. */
/* flex-start, not center: the block beside the avatar is three rows now —
   name, place, stars — and a centred badge drifted down beside them. */
.sy-top{display:flex;align-items:flex-start;gap:13px;}
.sy-ava{
  flex:none;
  display:grid;place-items:center;
  overflow:hidden;   /* it holds a photograph now */
  width:clamp(44px,4vw,54px);aspect-ratio:1;
  border-radius:50%;
  background:var(--gold-tint);
  border:1px solid var(--gold-soft);
  color:var(--gold-ink);
  font-family:var(--f-display);
  font-size:clamp(15px,1.3vw,18px);
  letter-spacing:.02em;
}
/* ⚠️ THE AVATAR IS THE CUSTOMER'S OWN PROFILE PICTURE, not initials. Some
   are faces, some are shop logos, one is a butterfly — whatever they had
   on the account the message came from. It is cropped square at 240px and
   the circle is done here, so no crop has to be redone to change the size. */
.sy-ava img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.sy-who{min-width:0;}
.sy-name{
  /* handles like christinefoodcorner are one long word */
  overflow-wrap:anywhere;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.25;
  color:var(--ink);
}
.sy-where{
  font-size:clamp(11.5px,.92vw,12.5px);
  line-height:1.4;
  color:var(--ink-3);
  margin-top:2px;
}
.sy-badge{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;
  border-radius:var(--r-pill);
  border:1px solid var(--gold-soft);
  background:var(--gold-tint);
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--gold-ink);
  white-space:nowrap;
}
.sy-badge svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;}

/* ⚠️ OUT OF THE CARD ENTIRELY NOW, above its top-right corner, which is
   where the supplied UI puts it. It was in flow as the card's first row
   before that, and absolute INSIDE the card before that again — where it
   printed on top of the badge. Absolute outside is safe because nothing in
   the deck clips: .sy-deck has no overflow and the cards fill its cell. The
   deck carries a matching margin-top so this has ground to sit on. */
.sy-count{
  position:absolute;
  top:calc(-1 * clamp(24px,2.6vw,32px));
  right:2px;
  font-family:var(--f-display);
  font-size:clamp(13px,1.05vw,15px);
  color:var(--ink-3);
  letter-spacing:.04em;
}
.sy-count b{color:var(--gold-ink);font-weight:600;}

/* ⚠️ THESE ARE A RATING NONE OF THE SEVEN GAVE, AND THAT IS ON THE RECORD.
   Every message in this deck is a chat — a Shopee seller conversation or an
   Instagram DM — and not one is a rated review. They were left out for that
   reason until the supplied UI arrived with them in it.
   They are rendered ONLY on the five cards whose screenshot shows the order
   they were attached to, which is the same rule the badge follows, so the two
   travel together and the claim stays with people who demonstrably bought.
   ⚠️ IT IS STILL NOT THEIR RATING. If any of the five rated the shop
   something other than five, the real number belongs here instead. */
.sy-stars{display:flex;gap:3px;margin-top:5px;}
.sy-stars svg{width:clamp(13px,1.05vw,15px);height:auto;fill:var(--gold-accent);}

/* the hairline between who said it and what they said */
.sy-rule{
  display:block;
  height:1px;
  margin:clamp(3px,.6vw,7px) 0 clamp(1px,.4vw,4px);
  background:linear-gradient(90deg,
    rgba(198,164,85,.30) 0%,
    rgba(198,164,85,.16) 62%,
    rgba(198,164,85,0) 100%);
}

/* the foot of the card. It says nothing about any one customer — it is the
   deck's own line, which is why it can sit on all seven. */
/* ⚠️ NO margin-top:auto HERE. .sy-top already carries one, which pushes the
   whole group — identity, rule, message, this line — to the foot of a card
   that has slack. A second auto margin would split the slack between the two
   and leave the identity floating in the middle of the short cards. */
.sy-seal{
  padding-top:clamp(8px,1vw,14px);
  font-size:clamp(9px,.74vw,10.5px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-ink);
  opacity:.72;
}
.sy-seal i{font-style:normal;opacity:.6;margin:0 2px;}
.sy-seal b{font-weight:400;letter-spacing:0;color:var(--gold-accent);}

.sy-quote{
  position:relative;
  padding-left:clamp(26px,2.4vw,34px);
  font-size:clamp(14.5px,1.12vw,16.5px);
  line-height:1.62;
  color:var(--ink-2);
}
.sy-quote::before{
  content:"\201C";
  position:absolute;left:0;top:-.22em;
  font-family:var(--f-display);
  font-size:clamp(38px,3.4vw,48px);
  line-height:1;
  color:var(--gold-soft);
}

/* ---------- the controls ---------- */
/* ⚠️ THE ARROW BOX STOPS WHERE THE DECK STOPS. It was inset:0 on the whole
   stage, which includes the dots, so "top:50%" centred the arrows on stage +
   dots and sat them 35px below the middle of the card. The bottom inset is the
   dots' own height plus the one gap variable — not a second copy of it. */
.sy-arrows{
  position:absolute;
  inset:0 0 calc(44px + var(--sy-dots-gap)) 0;
  pointer-events:none;
  /* ⚠️ ABOVE THE DECK, OR THE TAPS LAND ON THE DECK INSTEAD. Measured with
     elementsFromPoint at the arrow's own centre, the stack read
     sy-deck / svg / sy-arw — the arrow was third. Two reasons, both real:
     .sy-deck::after, the ghost card behind the top one, is translated 20px
     right so its hit area reaches past the deck's box and under the arrow;
     and at <=620px .sy-stage is a flex column in which .sy-deck carries
     order:1, and flex items paint in order-modified document order, which
     lifts it past a positioned sibling with z-index:auto. A control has to be
     above the thing it controls. */
  z-index:3;
}
.sy-arw{
  position:absolute;top:50%;translate:0 -50%;
  display:none;                          /* only this state's pair is shown */
  place-items:center;
  width:46px;height:46px;                /* clears the 44px touch floor */
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  color:var(--ink-2);
  cursor:pointer;
  pointer-events:auto;
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.sy-arw svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;}
.sy-arw:hover{color:var(--gold-ink);border-color:var(--gold);transform:translateY(-1px);}
/* ⚠️ AT THE EDGE OF THE COLUMN, NOT AT THE EDGE OF THE CARD. These were
   pulled 10-23px outwards from a deck that filled the column, so they sat ON
   the card at both ends and the right one measured 23px OUTSIDE the shell.
   With the deck capped and centred there is real room between it and the
   column edge, and that is where they go. */
.sy-prev{left:0;}
.sy-next{right:0;}

.sy-in:nth-of-type(1):checked ~ .sy-arrows .sy-arw[data-for="1"],
.sy-in:nth-of-type(2):checked ~ .sy-arrows .sy-arw[data-for="2"],
.sy-in:nth-of-type(3):checked ~ .sy-arrows .sy-arw[data-for="3"],
.sy-in:nth-of-type(4):checked ~ .sy-arrows .sy-arw[data-for="4"],
.sy-in:nth-of-type(5):checked ~ .sy-arrows .sy-arw[data-for="5"],
.sy-in:nth-of-type(6):checked ~ .sy-arrows .sy-arw[data-for="6"],
.sy-in:nth-of-type(7):checked ~ .sy-arrows .sy-arw[data-for="7"]{display:grid;}

.sy-dots{
  display:flex;align-items:center;justify-content:center;gap:0;
  margin-top:var(--sy-dots-gap);
}
/* ⚠️ THE LABEL IS THE TAP TARGET, AND IT IS 44px BECAUSE THAT WAS
   MEASURED AND NOT ASSUMED. The first version drew a 9px dot and
   grew the target with a negative-inset ::after; rendered, that
   measured 25x43 — under this page's floor on BOTH axes, with a
   comment above it claiming it cleared. Widening the ::after to 44
   was not the fix either: at a 9px gap the neighbouring targets
   would overlap and a thumb would open the wrong message. A 44px
   box with NO gap gives six real targets that touch and never
   overlap, and the visible pill is drawn inside it by ::before. */
.sy-dot{
  display:grid;place-items:center;
  width:44px;height:44px;
  cursor:pointer;
}
.sy-dot::before{
  content:"";display:block;
  width:9px;height:9px;border-radius:var(--r-pill);
  background:var(--line);
  transition:width .3s var(--ease), background .3s var(--ease);
}
.sy-dot:hover::before{background:var(--gold-soft);}
.sy-in:nth-of-type(1):checked ~ .sy-dots .sy-dot:nth-of-type(1)::before,
.sy-in:nth-of-type(2):checked ~ .sy-dots .sy-dot:nth-of-type(2)::before,
.sy-in:nth-of-type(3):checked ~ .sy-dots .sy-dot:nth-of-type(3)::before,
.sy-in:nth-of-type(4):checked ~ .sy-dots .sy-dot:nth-of-type(4)::before,
.sy-in:nth-of-type(5):checked ~ .sy-dots .sy-dot:nth-of-type(5)::before,
.sy-in:nth-of-type(6):checked ~ .sy-dots .sy-dot:nth-of-type(6)::before,
.sy-in:nth-of-type(7):checked ~ .sy-dots .sy-dot:nth-of-type(7)::before{
  width:30px;background:var(--gold-accent);
}
/* the focus ring lands on the pill, because the input it belongs to
   is the thing that is 1px wide and the label box is mostly air */
.sy-in:nth-of-type(1):focus-visible ~ .sy-dots .sy-dot:nth-of-type(1)::before,
.sy-in:nth-of-type(2):focus-visible ~ .sy-dots .sy-dot:nth-of-type(2)::before,
.sy-in:nth-of-type(3):focus-visible ~ .sy-dots .sy-dot:nth-of-type(3)::before,
.sy-in:nth-of-type(4):focus-visible ~ .sy-dots .sy-dot:nth-of-type(4)::before,
.sy-in:nth-of-type(5):focus-visible ~ .sy-dots .sy-dot:nth-of-type(5)::before,
.sy-in:nth-of-type(6):focus-visible ~ .sy-dots .sy-dot:nth-of-type(6)::before,
.sy-in:nth-of-type(7):focus-visible ~ .sy-dots .sy-dot:nth-of-type(7)::before{
  /* ⚠️ --gold-ink, AND IT WAS --gold-accent. Measured off the rendered
     pixels, --gold-accent on the ground this ring lands on is 2.75:1 — under
     the 3:1 a focus indicator owes, and the only ring on the page that missed
     it. The dot it surrounds is --gold-accent too, so the ring and the thing
     it marks were the same colour. --gold-ink on the same ground is 4.72:1
     and matches the four other focus rings on this page. */
  outline:2px solid var(--gold-ink);outline-offset:4px;
}

/* ---------- the promise card ---------- */
/* the reference puts a dark panel bottom-right of the stack. Ours
   carries the brand's own promise from BRAND.md and no new claim. */
/* ⚠️ COMPACT AND RIGHT-ALIGNED, not a full-width bar. Run across the
   whole shell it read as a footer band and pulled the eye straight off
   the card; in the reference it is a small panel tucked under the
   stack, and that is the job it does here. */
.sy-promise{
  display:flex;align-items:center;gap:14px;
  /* the same track as the deck, so it sits under the stack rather than off to
     one side of it — still a compact panel, not a full-width bar */
  max-width:var(--sy-card-w);margin-inline:auto;
  margin-top:clamp(18px,2vw,24px);
  padding:clamp(15px,1.6vw,20px) clamp(17px,1.8vw,23px);
  border-radius:var(--r-md);
  background:linear-gradient(135deg, #171310 0%, #2A2119 100%);
  box-shadow:var(--shadow-md);
}
.sy-promise svg{
  flex:none;width:26px;height:26px;
  fill:none;stroke:var(--champagne);stroke-width:1.5;
}
.sy-promise b{
  display:block;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(14.5px,1.15vw,17px);
  line-height:1.32;
  color:var(--champagne);
}
.sy-promise span{
  display:block;margin-top:3px;
  font-size:clamp(11.5px,.9vw,12.5px);
  color:rgba(250,238,200,.72);
}

/* ---------- the slots ---------- */
/* ⚠️ THE PLACEHOLDER STYLES ARE GONE BECAUSE THE PLACEHOLDERS ARE. Seven
   real messages are in the deck now, verbatim, with the customers' own
   profile pictures. If a card is ever emptied again, what it needs is in
   the history of this file: a dashed avatar ring, OUTLINE stars because a
   filled five is a rating, an EMPTY badge pill because a badge over an
   invented name is a claim about a person who does not exist, and the
   caption under the deck that says so. */
/* it belongs under the deck it is about, not across the whole page */
/* ⚠️ --ink-2, AND IT WAS --ink-3. This line sits under the deck, on the
   deepest part of the new ground: --ink-3 measured 3.97:1 there against the
   4.5 a 13px line owes. It read fine on cream. Deepening a ground re-prices
   every run standing on it, and this was the one that came up short. */
.sy-note{
  color:var(--ink-2);
  max-width:var(--sy-card-w);
  margin:clamp(14px,1.6vw,20px) auto 0;
  font-size:clamp(12px,.92vw,13px);
  line-height:1.6;
  text-align:center;
}

/* ---------- narrow ---------- */
@media (max-width:979px){
  .sy-head{text-align:left;}
  .sy-title em{white-space:normal;}
  .sy-arc,
  .sy-chip{display:none;}          /* a phone gets the cards, not the props */
  .sy-deck::before{transform:translate(8px,-8px) rotate(1.5deg);}
  .sy-deck::after{transform:translate(16px,-15px) rotate(2.8deg);}
}
@media (max-width:620px){
  /* ⚠️ THE ARROWS AND THE DOTS CANNOT BE WRAPPED IN A ROW DIV. Every
     rule that drives this carousel reaches from a radio to a SIBLING
     with ~, so putting .sy-arrows inside a .sy-controls wrapper would
     take it out of the radios' sibling list and the arrows would stop
     changing with the state — silently, with no error anywhere.
     So the order is done with flex `order` on .sy-stage instead, and
     the two stay exactly where they are in the markup. */
  .sy-stage{display:flex;flex-direction:column;}
  .sy-deck{order:1;}
  .sy-dots{order:2;margin-top:clamp(16px,4vw,22px);}
  /* ⚠️ BESIDE THE CARD, NOT UNDER IT — asked for because a long message
     pushed the row past the bottom of the screen: "pag mahaba ang message is
     hindi na makita yung button". At the card's vertical middle they are on
     screen whenever the card is.
     ⚠️ THE 14px IS THE SECTION'S GUTTER, NOT A NUDGE. There is only 17px
     beside the card at 393 and the arrow is 46, so it has to borrow from the
     shell's 20px padding. Measured at 393: card 36.5..356.5, its text
     58.5..334.5, left arrow 6..52, right arrow 341..387 — over the card's
     22px padding at both ends and over its words at neither, stopping 6px
     short of the screen edge. Narrowing the card to make real room would
     leave about 220px for the message, which is not a column anyone reads. */
  .sy-prev{left:-14px;}
  .sy-next{right:-14px;}
  .sy-top{flex-wrap:wrap;}
  .sy-badge{margin-left:0;}
}

@media (prefers-reduced-motion:reduce){
  .sy-pool,.sy-arc,.sy-chip{animation:none;}
  .sy-card{transition:opacity .01s linear, visibility 0s;transform:none;}
  .sy-arw:hover{transform:none;}
}