/* Smile Lab USA — keyword landers.
 *
 * Eight pages, one intent each. A buyer arrives on a phone from a search box,
 * so the first screen has to answer the search and show the number before he
 * scrolls. Everything below it is one thought per screen: a block fills the
 * fold, the next block starts a new one.
 *
 * Colours, radii and motion come from sl-design.css. This file adds only the
 * lander layout, so a palette change there lands here with no edits.
 */

.sll {
  --sll-gap: clamp(18px, 4.6vw, 32px);
  --sll-pad: clamp(16px, 5vw, 28px);
  --sll-wrap: 1160px;
  background: var(--sl-cream, #faf7f2);
  color: var(--sl-ink, #1c1b19);
  font-family: 'Assistant', Helvetica, Arial, sans-serif;
}

.sll *,
.sll *::before,
.sll *::after { box-sizing: border-box; }

.sll-in {
  width: 100%;
  max-width: var(--sll-wrap);
  margin: 0 auto;
  padding: 0 var(--sll-pad);
}

/* Block equals screen: a section carries its own air and never runs into the
   next one. Padding is the only spacing rule on this page. */
.sll-sec {
  padding: clamp(30px, 8vw, 62px) 0;
  border-top: 1px solid var(--sl-hairline, #eee7db);
}

.sll-sec--plain { border-top: 0; }
.sll-sec--warm { background: var(--sl-cream-warm, #f1ece4); }
.sll-sec--ink { background: var(--sl-forest, #14322b); color: #f6f2e9; }
.sll-sec--ink .sll-h2 { color: #fff; }
.sll-sec--ink .sll-p { color: rgba(246, 242, 233, .86); }

/* ------------------------------------------------------------- headings -- */
/* One line, always. The step is tied to the viewport so the longest heading on
   these pages still holds its line at 320px, and no heading is allowed to
   break into a two word tail. */
.sll-h1 {
  margin: 0;
  font-family: 'Assistant', Helvetica, Arial, sans-serif;
  font-size: clamp(26px, 7.8vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--sl-forest, #14322b);
  white-space: nowrap;
}

.sll-h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 5vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--sl-forest, #14322b);
  text-wrap: balance;
}

.sll-h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--sl-forest, #14322b);
}

.sll-eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f7f0e2;
  box-shadow: inset 0 0 0 1px #ead9b7;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7a5a17;
  white-space: nowrap;
}

.sll-p {
  margin: 0 0 12px;
  font-size: clamp(15px, 3.9vw, 17px);
  line-height: 1.55;
  color: #443f38;
  text-wrap: pretty;
}

.sll-p:last-child { margin-bottom: 0; }
.sll-p strong { color: var(--sl-forest, #14322b); }

.sll-lede {
  margin: 12px 0 0;
  font-size: clamp(16px, 4.3vw, 20px);
  line-height: 1.4;
  font-weight: 600;
  color: #33453f;
  text-wrap: pretty;
}

/* ----------------------------------------------------------------- hero -- */
.sll-hero {
  padding: clamp(18px, 5vw, 38px) 0 clamp(26px, 6vw, 48px);
}

.sll-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sll-gap);
  align-items: center;
}

.sll-hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-card, 12px);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-lift, 0 8px 24px rgba(20, 50, 43, .10));
}

/* Sources run from square product shots to 16:9 packshots, so the frame sets
   the shape and the photo fills it. */
.sll-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* On a phone the first screen has to hold the heading, the answer and the
   number. A square product shot alone would eat all of it, so here the photo
   is a band above the copy and the whole appliance still shows inside it. */
.sll-hero__media img {
  display: block;
  width: 100%;
  height: clamp(168px, 46vw, 205px);
  object-fit: contain;
  background: #fff;
}

.sll-hero__media[data-fit="cover"] img { object-fit: cover; }

/* The price is the reason the page exists, so it is the loudest thing after
   the heading and it never hides behind a fold. */
.sll-price {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-card, 12px);
  background: #fff;
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(20, 50, 43, .06));
  border-left: 4px solid var(--sl-gold, #d8a548);
  font-size: clamp(15px, 3.9vw, 17px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--sl-forest, #14322b);
  text-wrap: pretty;
}

.sll-price b {
  font-size: 1.22em;
  font-weight: 800;
  letter-spacing: -.01em;
}

.sll-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
}

a.sll-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 50px;
  background: var(--cta-gold, #e8b54a);
  color: var(--cta-ink, #1c1b19);
  box-shadow: var(--cta-ring-shadow, inset 0 0 0 1px #a97c22);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}

a.sll-cta:hover,
a.sll-cta:focus-visible {
  background: var(--cta-gold-hover, #d99e34);
  color: var(--cta-ink, #1c1b19);
}

a.sll-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--sl-forest, #14322b);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

a.sll-link:hover { color: var(--sl-copper, #b4400f); }

/* chips: the four promises a buyer checks before he reads a word */
.sll-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.sll-chips li {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--sl-hairline, #eee7db);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #3d4a44;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- grids -- */
.sll-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.sll-card {
  padding: 16px;
  border-radius: var(--radius-card, 12px);
  background: #fff;
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(20, 50, 43, .06));
}

.sll-sec--warm .sll-card { box-shadow: inset 0 0 0 1px var(--sl-hairline, #eee7db); }

.sll-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #55504a;
}

.sll-card .sll-num {
  display: block;
  margin: 8px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--sl-copper, #b4400f);
}

/* A card can carry a real photo of the thing it prices: three builds of one
   appliance are told apart by sight long before the words are read. The default
   frame is 3:2, the shape of our own bench shots. A packshot that is square by
   origin keeps its shape through --sq rather than being cropped, because those
   frames carry the product name inside the picture. */
.sll-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0 0 10px;
  border-radius: 10px;
  background: #fff;
}

.sll-card--sq img { aspect-ratio: 1 / 1; object-fit: contain; }

.sll-card img + .sll-h3 { margin-top: 0; }

/* split: copy on one side, a real photo filling the other. No empty half. */
.sll-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sll-gap);
  align-items: center;
}

.sll-fig {
  margin: 0;
  border-radius: var(--radius-card, 12px);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(20, 50, 43, .06));
}

/* ---------------------------------------------------------------- steps -- */
.sll-steps {
  counter-reset: sllstep;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.sll-steps li {
  counter-increment: sllstep;
  position: relative;
  padding: 14px 16px 14px 54px;
  border-radius: var(--radius-card, 12px);
  background: #fff;
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(20, 50, 43, .06));
  font-size: 14.5px;
  line-height: 1.5;
  color: #55504a;
}

.sll-steps li::before {
  content: counter(sllstep);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sl-forest, #14322b);
  color: #f6f2e9;
  font-size: 14px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
}

.sll-steps b {
  display: block;
  color: var(--sl-forest, #14322b);
  font-weight: 800;
}

/* ---------------------------------------------------------------- table -- */
/* Prices stand in a table because a buyer compares them down a column. On a
   phone the table keeps its shape and scrolls sideways rather than folding
   into unreadable stacks. */
.sll-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-card, 12px);
  background: #fff;
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(20, 50, 43, .06));
  /* Scroll shadow: the edge that still hides a column carries a soft fade, so a
     narrow screen reads the table as scrollable rather than as cut off. Two
     local layers paint over the fade once that edge is reached. */
  background-image:
    linear-gradient(to right, #fff, #fff),
    linear-gradient(to left, #fff, #fff),
    linear-gradient(to right, rgba(20, 50, 43, .14), rgba(20, 50, 43, 0)),
    linear-gradient(to left, rgba(20, 50, 43, .14), rgba(20, 50, 43, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.sll-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.sll-table th,
.sll-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--sl-hairline, #eee7db);
  line-height: 1.35;
}

.sll-table thead th {
  background: var(--sl-forest, #14322b);
  color: #f6f2e9;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  border-bottom: 0;
}

.sll-table tbody tr:last-child th,
.sll-table tbody tr:last-child td { border-bottom: 0; }

.sll-table tbody th {
  font-weight: 800;
  color: var(--sl-forest, #14322b);
  white-space: nowrap;
}

.sll-table td.sll-money {
  font-weight: 800;
  color: var(--sl-copper, #b4400f);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ faq -- */
.sll-faq { display: grid; gap: 8px; }

.sll-faq details {
  border-radius: var(--radius-card, 12px);
  background: #fff;
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(20, 50, 43, .06));
  overflow: hidden;
}

.sll-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 44px 14px 16px;
  position: relative;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--sl-forest, #14322b);
}

.sll-faq summary::-webkit-details-marker { display: none; }

.sll-faq summary::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--sl-gold, #d8a548);
  border-bottom: 2px solid var(--sl-gold, #d8a548);
  transform: rotate(45deg);
  transition: transform var(--dur-fast, 150ms) var(--ease-productive, ease);
}

.sll-faq details[open] summary::after {
  transform: rotate(225deg);
  margin-top: -2px;
}

.sll-faq p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #55504a;
}

/* -------------------------------------------------------------- closing -- */
.sll-plate {
  padding: 18px;
  border-radius: var(--radius-card, 12px);
  background: #fff;
  box-shadow: var(--shadow-lift, 0 8px 24px rgba(20, 50, 43, .10));
}

.sll-sec--ink .sll-plate { box-shadow: none; }

.sll-fresh {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #7c766d;
}

.sll-sec--ink .sll-fresh { color: rgba(246, 242, 233, .6); }

/* Breadcrumbs carry no arrow. The separator is a dot drawn by the stylesheet,
   so the copy itself stays free of punctuation clutter. */
.sll-crumbs {
  margin: 0 0 clamp(14px, 3.5vw, 22px);
  font-size: 13px;
  line-height: 1.4;
  color: #7c766d;
}

.sll-crumbs a {
  color: #4d5c56;
  text-decoration: none;
}

.sll-crumbs a:hover { text-decoration: underline; }

.sll-crumbs a + a::before,
.sll-crumbs span::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px 3px;
  border-radius: 50%;
  background: var(--sl-gold, #d8a548);
  vertical-align: middle;
}

/* --------------------------------------------------------- wider screens -- */
@media (min-width: 750px) {
  /* A paragraph running the full 1160px is unreadable, so prose sitting
     directly in a section keeps a measure. Anything inside a card, a column or
     a table already has one from its own box. */
  .sll-sec > .sll-in > .sll-p,
  .sll-sec > .sll-in > .sll-h2 { max-width: 68ch; }

  .sll-grid { grid-template-columns: repeat(3, 1fr); }
  .sll-grid--two { grid-template-columns: repeat(2, 1fr); }
  .sll-grid--four { grid-template-columns: repeat(4, 1fr); }
  .sll-steps { grid-template-columns: repeat(3, 1fr); }
  .sll-split { grid-template-columns: 1fr 1fr; }
  .sll-split--media-first .sll-fig { order: -1; }
  .sll-table { min-width: 0; }
}

@media (min-width: 750px) {
  .sll-hero__media img { height: clamp(260px, 34vw, 420px); }
}

@media (min-width: 990px) {
  /* A section that is nothing but prose would leave half the row empty once the
     measure is capped. Two columns fill the row and keep the same line length,
     with the heading spanning both. */
  .sll-sec--prose > .sll-in {
    columns: 2;
    column-gap: clamp(30px, 4vw, 56px);
  }

  .sll-sec--prose > .sll-in > .sll-h2 {
    column-span: all;
    max-width: none;
  }

  .sll-sec--prose > .sll-in > .sll-p {
    max-width: none;
    break-inside: avoid;
  }

  .sll-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .sll-hero__media { order: 2; }
  /* Beside the copy the frame is fixed and the whole appliance still shows in
     it: a square crop would cut the clasps off the wider packshots. */
  .sll-hero__media img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sll-faq summary::after { transition-duration: .001ms; }
}