/* ============================================================
   SugarScore - content styling ported 1:1 from the client reference
   (cristianciuc.ro/sugarscore/): same colors, shapes, shadows, radius
   as the reference. The one deliberate difference: no font-family here,
   so Nutrivita's own site font keeps cascading into this page instead
   of the reference's Barlow/Trebuchet.
   Everything is scoped under .sugarscore-page so nothing here can leak
   into, or collide with, the rest of the site's CSS. Chrome (header/
   nav/footer/breadcrumb) is Nutrivita's own real theme, untouched here.
   ============================================================ */

body#module-gurutools-sugarscore #wrapper{padding-bottom:0}

.sugarscore-page{
  --ss-ink:#3d3d3d;
  --ss-muted:#6d6a66;
  --ss-coral:#f2735f;
  --ss-coral-dark:#d95a45;
  --ss-coral-tint:#fdeee9;
  --ss-green:#67ac33;
  --ss-green-dark:#4f8a24;
  --ss-green-tint:#eef6e8;
  --ss-blue:#1488ca;
  --ss-blue-dark:#0f6ea6;
  --ss-blue-tint:#e9f3fb;
  --ss-lav:#f1f3f7;
  --ss-mint:#eef6ee;
  --ss-paper:#fbfaf7;
  --ss-line:#e7e5e0;
  --ss-shadow:0 16px 40px rgba(61,61,61,.10);
  --ss-shadow-sm:0 6px 18px rgba(61,61,61,.08);
  --ss-radius:22px;
  color:var(--ss-ink);
  line-height:1.65;
}

/* Full-page width comes from a {block name='main_content'} override in the
   .tpl files now (drops the theme's own <div class="container"> around the
   page), not a CSS width:100vw breakout - that trick caused a real
   horizontal-overflow scrollbar on browsers with a classic (non-overlay)
   scrollbar, since 100vw doesn't subtract the scrollbar's own width.
   Reference's own content width (1180px/28px padding), not the theme's
   container (1200px/20px) - so text wraps onto exactly the same number of
   lines as the reference, not a slightly different one. */
.sugarscore-page .container{max-width:1180px;margin:0 auto;padding:0 28px}

.sugarscore-page *,.sugarscore-page *::before,.sugarscore-page *::after{box-sizing:border-box}
.sugarscore-page img{max-width:100%;display:block}
.sugarscore-page [hidden]{display:none!important}
.sugarscore-page a{color:var(--ss-blue);text-decoration:none}
.sugarscore-page a:hover{text-decoration:underline}
/* The theme's own bare h1-h4 rule renders in "Roboto Condensed" at 400 -
   a narrow display font meant for small UI labels, not large headings; it
   out-specifies plain element selectors here, hence !important. Figtree is
   Nutrivita's real body font (confirmed via computed style), reused here at
   a heavy weight instead of a second, unrelated typeface. */
.sugarscore-page h1,.sugarscore-page h2,.sugarscore-page h3,.sugarscore-page h4{
  color:var(--ss-ink);line-height:1.15;
  font-family:'Figtree',sans-serif!important;
  font-weight:900!important;
}
.sugarscore-page p{color:var(--ss-ink)}

/* ---------- Buttons (pill, as in the reference) ---------- */
.sugarscore-page .ss-btn{
  display:inline-block;font-weight:700!important;font-size:1rem;border:none;cursor:pointer;
  border-radius:999px;padding:12px 22px;vertical-align:middle;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.sugarscore-page .ss-btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--ss-shadow-sm)}
.sugarscore-page .ss-btn-primary{background:var(--ss-blue);color:#fff}
.sugarscore-page .ss-btn-primary:hover{background:var(--ss-blue-dark);color:#fff}
.sugarscore-page .ss-btn-ghost{background:transparent;color:var(--ss-blue);border:2px solid var(--ss-blue)}
.sugarscore-page .ss-btn-ghost:hover{background:var(--ss-blue-tint);color:var(--ss-blue)}
.sugarscore-page .ss-btn-coral{background:var(--ss-coral);color:#fff}
.sugarscore-page .ss-btn-coral:hover{background:var(--ss-coral-dark);color:#fff}
.sugarscore-page .ss-btn-green{background:var(--ss-green);color:#fff}
.sugarscore-page .ss-btn-green:hover{background:var(--ss-green-dark);color:#fff}

/* ---------- Hero ---------- */
.sugarscore-page .ss-hero{background:var(--ss-mint);padding:56px 0 0}
.sugarscore-page .ss-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end}
.sugarscore-page .ss-hero h1{font-size:clamp(2.5rem,5vw,4.2rem);letter-spacing:-1px;margin-bottom:20px}
.sugarscore-page .ss-lead{font-size:1.25rem;font-weight:500!important;color:var(--ss-ink);margin-bottom:28px;max-width:50ch}
.sugarscore-page .ss-hero .ss-btn{margin-bottom:30px}
.sugarscore-page .ss-hero-img img{width:100%;max-width:520px;margin:0 auto;filter:drop-shadow(0 24px 40px rgba(103,172,51,.18))}

/* ---------- Sections ---------- */
.sugarscore-page .ss-section{padding:90px 0}
.sugarscore-page .ss-section-head{text-align:center;max-width:760px;margin:0 auto 58px}
.sugarscore-page .ss-section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);display:inline-block;position:relative;padding-bottom:18px}
.sugarscore-page .ss-section-head h2::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:84px;height:5px;border-radius:3px;background:var(--ss-green);
}

.sugarscore-page .ss-features{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sugarscore-page .ss-feature{
  border-radius:var(--ss-radius);padding:36px 30px 40px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  border:1px solid rgba(61,61,61,.06);
}
.sugarscore-page .ss-feature img{width:150px;height:150px;object-fit:contain}
.sugarscore-page .ss-feature h3{font-size:1.35rem}
.sugarscore-page .ss-feature p{color:var(--ss-muted);font-size:1.02rem}
.sugarscore-page .ss-feature-blue{background:var(--ss-blue-tint)}
.sugarscore-page .ss-feature-lav{background:var(--ss-lav)}
.sugarscore-page .ss-feature-green{background:var(--ss-green-tint)}

/* ---------- Lifestyle ---------- */
.sugarscore-page .ss-lifestyle{background:var(--ss-coral-tint);padding:90px 0}
.sugarscore-page .ss-lifestyle-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.sugarscore-page .ss-lifestyle-img{border-radius:28px;overflow:hidden;box-shadow:var(--ss-shadow);aspect-ratio:4/3}
.sugarscore-page .ss-lifestyle-img img{width:100%;height:100%;object-fit:cover}
.sugarscore-page .ss-lifestyle h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:28px}
.sugarscore-page .ss-benefits{list-style:none;display:flex;flex-direction:column;gap:16px;padding:0;margin:0}
.sugarscore-page .ss-benefits li{position:relative;padding-left:40px;font-size:1.08rem;color:var(--ss-ink)}
.sugarscore-page .ss-benefits li::before{
  content:"\2713";position:absolute;left:0;top:1px;width:28px;height:28px;
  background:var(--ss-green);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700!important;font-size:.9rem;
}

/* ---------- CTA band ---------- */
.sugarscore-page .ss-cta-band{
  background:linear-gradient(135deg,var(--ss-blue) 0%,var(--ss-blue-dark) 100%);
  color:#fff;padding:80px 0;text-align:center;
}
.sugarscore-page .ss-cta-band h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:16px}
.sugarscore-page .ss-cta-band p{color:rgba(255,255,255,.92);font-size:1.15rem;max-width:640px;margin:0 auto 34px}

/* ---------- List pages (Articole) ---------- */
.sugarscore-page .ss-page-head{background:var(--ss-mint);padding:70px 0 64px;text-align:center}
.sugarscore-page .ss-page-head h1{font-size:clamp(2.3rem,4.5vw,3.4rem);letter-spacing:-1px;display:inline-block;position:relative;padding-bottom:16px}
.sugarscore-page .ss-page-head h1::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:90px;height:5px;border-radius:3px;background:var(--ss-coral);
}
/* 680px (the reference's own value) wraps to 3 lines here instead of 2 -
   Nutrivita's real font (Figtree) is wider per-character than the
   reference's Barlow. Widened just enough (measured live: 700px is the
   exact breakpoint) rather than shrinking the font, since text size here
   was already fixed once to match the original. */
.sugarscore-page .ss-page-head p{margin:18px auto 0;max-width:720px;font-size:1.2rem;color:var(--ss-muted)}

.sugarscore-page .ss-stack{max-width:860px;margin:0 auto;padding:70px 24px 40px;display:flex;flex-direction:column;gap:44px}
.sugarscore-page .ss-entry{
  background:#fff;border:1px solid var(--ss-line);border-radius:var(--ss-radius);
  padding:46px 48px;box-shadow:var(--ss-shadow-sm);
}
.sugarscore-page .ss-entry .ss-kicker{
  display:inline-block;font-weight:700!important;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ss-coral-dark);margin-bottom:14px;
}
.sugarscore-page .ss-entry h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:18px}
.sugarscore-page .ss-entry h3{font-size:1.25rem;margin:30px 0 12px;color:var(--ss-green-dark)}
/* Neither rule declared its own size in the reference either - it relied on
   its own body{font-size:17px}. Nutrivita's real theme sets body to 13px,
   so without this these inherit a much smaller size than intended. */
.sugarscore-page .ss-entry p{margin-bottom:14px;color:var(--ss-ink);font-size:17px}
/* The theme resets all <ul>/<ol> to list-style:none globally; the
   reference never set its own list-style at all, relying on the plain
   browser default (disc/decimal) it had with no such reset in place.
   Restoring that default here - .ss-benefits below keeps its own
   intentional list-style:none (checkmarks, not bullets), since that rule
   is more specific and wins regardless of this one. */
.sugarscore-page ul{list-style:disc}
.sugarscore-page ol{list-style:decimal}
/* The theme gives <ol> its own padding-left:32px by default, vs 0px on
   <ul> - misaligning "Mod de preparare" against "Ingrediente" above it
   even though both share this same margin. Zeroed explicitly so both
   start at the same indent, matching the reference. */
.sugarscore-page .ss-entry ul,.sugarscore-page .ss-entry ol{margin:0 0 16px 26px;padding-left:0}
.sugarscore-page .ss-entry li{margin-bottom:8px;font-size:17px}
.sugarscore-page .ss-key-points{
  background:var(--ss-green-tint);border-left:5px solid var(--ss-green);
  border-radius:12px;padding:20px 24px;margin:22px 0 0;
}
.sugarscore-page .ss-key-points ul{margin:10px 0 0 22px}

/* ---------- Rețete ---------- */
.sugarscore-page .ss-recipe-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.sugarscore-page .ss-pill{
  font-size:.9rem;font-weight:600!important;padding:7px 16px;border-radius:999px;
  background:var(--ss-blue-tint);color:var(--ss-blue-dark);
}
.sugarscore-page .ss-pill-coral{background:var(--ss-coral-tint);color:var(--ss-coral-dark)}
.sugarscore-page .ss-pill-green{background:var(--ss-green-tint);color:var(--ss-green-dark)}
.sugarscore-page .ss-recipe-img{
  border-radius:28px;overflow:hidden;margin:6px 0 24px;box-shadow:var(--ss-shadow);
  aspect-ratio:4/3;
}
.sugarscore-page .ss-recipe-img img{width:100%;height:100%;object-fit:cover}
.sugarscore-page .ss-sugar-note{
  background:var(--ss-coral-tint);border-left:5px solid var(--ss-coral);
  border-radius:12px;padding:16px 20px;margin-top:22px;font-size:1rem;
}
.sugarscore-page .ss-sugar-note strong{color:var(--ss-coral-dark)}

/* Same reset-to-400 pattern already hit twice on bare <b> tags (.ss-metric
   b, .ss-total-box b) also applies to <strong> - fixed once, globally,
   instead of waiting to find each instance. */
.sugarscore-page strong{font-weight:700!important}

/* ---------- Calculator intro ---------- */
.sugarscore-page .ss-calc-intro{background:var(--ss-mint);padding:70px 0;text-align:center}
.sugarscore-page .ss-calc-intro h1{font-size:clamp(2.2rem,4.4vw,3.3rem);display:inline-block;position:relative;padding-bottom:16px}
.sugarscore-page .ss-calc-intro h1::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:90px;height:5px;border-radius:3px;background:var(--ss-blue);
}
.sugarscore-page .ss-calc-intro p{max-width:640px;margin:20px auto 32px;font-size:1.2rem;color:var(--ss-muted)}
/* Own .ss-calc-intro p above was winning over this on specificity (extra
   "p" element selector) even though .ss-privacy is also a <p> there -
   qualified under .ss-calc-intro too so it wins instead. */
.sugarscore-page .ss-calc-intro .ss-privacy{font-size:.95rem!important;color:var(--ss-muted);margin-top:18px}

/* ---------- Wizard shell ---------- */
.sugarscore-page .ss-calc-wrap{padding:56px 0 90px}
.sugarscore-page .ss-wizard{
  max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--ss-line);
  border-radius:26px;box-shadow:var(--ss-shadow);overflow:hidden;
}
.sugarscore-page .ss-wizard-top{
  display:flex;align-items:center;gap:18px;padding:26px 34px;
  border-bottom:1px solid var(--ss-line);background:var(--ss-paper);flex-wrap:wrap;
}
.sugarscore-page .ss-step-label{font-weight:900!important;font-size:1.3rem}
.sugarscore-page .ss-progress{flex:1;min-width:140px;height:10px;background:var(--ss-lav);border-radius:99px;overflow:hidden}
.sugarscore-page .ss-progress i{display:block;height:100%;background:var(--ss-green);border-radius:99px;transition:width .3s ease;width:0}
.sugarscore-page .ss-wizard-body{padding:38px 34px 30px}
.sugarscore-page .ss-wizard-body h2{font-size:1.7rem;margin-bottom:10px}
.sugarscore-page .ss-hint{color:var(--ss-muted);margin-bottom:26px;font-size:1.02rem}

/* ---------- Choice tiles ---------- */
.sugarscore-page .ss-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:26px}
.sugarscore-page .ss-choices.ss-cols-3{grid-template-columns:repeat(3,1fr)}
.sugarscore-page .ss-tile{
  border:2px solid var(--ss-line);border-radius:16px;padding:18px 20px;
  cursor:pointer;font-size:1.05rem;font-weight:600!important;color:var(--ss-ink);background:#fff;
  transition:.15s;text-align:left;display:flex;align-items:center;gap:12px;width:100%;
}
.sugarscore-page .ss-tile .ss-dot{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--ss-line);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;
}
.sugarscore-page .ss-tile:hover{border-color:var(--ss-green)}
.sugarscore-page .ss-tile[aria-pressed="true"]{border-color:var(--ss-green);background:var(--ss-green-tint)}
.sugarscore-page .ss-tile[aria-pressed="true"] .ss-dot{background:var(--ss-green);border-color:var(--ss-green)}

/* ---------- Profile fields ---------- */
.sugarscore-page .ss-field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;margin-bottom:26px}
.sugarscore-page .ss-field label{display:flex;align-items:end;font-weight:700!important;font-size:1.05rem;margin-bottom:6px}
.sugarscore-page .ss-field input{
  width:100%;padding:13px 15px;border:2px solid var(--ss-line);border-radius:12px;
  font-size:1.05rem;color:var(--ss-ink);background:#fff;
}
.sugarscore-page .ss-field input:focus{outline:none;border-color:var(--ss-green)}

/* ---------- Schedule (step 4) ---------- */
.sugarscore-page .ss-schedule{display:flex;flex-direction:column;gap:22px;margin-bottom:24px}
.sugarscore-page .sched-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--ss-line);border-radius:14px;padding:12px 18px;background:#fff;
}
.sugarscore-page .sched-row label{font-weight:600!important;font-size:1rem}
.sugarscore-page .sched-row input{
  width:90px;padding:10px 12px;border:2px solid var(--ss-line);border-radius:10px;
  font-size:1.05rem;text-align:right;
}
.sugarscore-page .sched-row input:focus{outline:none;border-color:var(--ss-green)}
.sugarscore-page .sched-group{margin-bottom:6px}
.sugarscore-page .sched-group-title{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-weight:900!important;font-size:1.02rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ss-ink);margin:0 0 10px 2px;
}
.sugarscore-page .sched-group-title .sq{width:12px;height:12px;border-radius:3px;background:var(--ss-ink);align-self:center;flex:0 0 auto}
.sugarscore-page .sched-group-rows{display:flex;flex-direction:column;gap:10px}
.sugarscore-page .sched-group.g-somn .sched-group-title .sq{background:var(--ss-blue)}
.sugarscore-page .sched-group.g-somn .sched-row{border-left:5px solid var(--ss-blue)}
.sugarscore-page .sched-group.g-sport .sched-group-title .sq{background:var(--ss-green)}
.sugarscore-page .sched-group.g-sport .sched-row{border-left:5px solid var(--ss-green)}
.sugarscore-page .sched-group.g-work .sched-group-title .sq{background:var(--ss-coral)}
.sugarscore-page .sched-group.g-work .sched-row{border-left:5px solid var(--ss-coral)}
.sugarscore-page .sched-group.g-misc .sched-group-title .sq{background:var(--ss-ink)}
.sugarscore-page .sched-group.g-misc .sched-row{border-left:5px solid var(--ss-line)}
.sugarscore-page .ss-total-box{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--ss-blue-tint);border-radius:14px;padding:16px 20px;margin-bottom:8px;
  font-weight:700!important;font-size:1.05rem;
}
/* The theme resets plain <b> tags to 400 regardless of an ancestor's
   declared weight - same pattern already hit on .ss-metric b. */
.sugarscore-page .ss-total-box b{font-weight:700!important}
.sugarscore-page .ss-total-box.over{background:var(--ss-coral-tint);color:var(--ss-coral-dark)}
.sugarscore-page .ss-form-error{color:var(--ss-coral-dark);font-weight:600!important;margin-bottom:14px;display:none}
.sugarscore-page .ss-form-error.show{display:block}

.sugarscore-page .ss-wizard-actions{display:flex;justify-content:space-between;gap:14px;padding:0 34px 32px;flex-wrap:wrap}
.sugarscore-page .ss-spacer{flex:1}

/* ---------- Result ---------- */
/* Same body{font-size:13px}-inheritance gap as .ss-entry p/li above -
   neither of these declared its own size in the reference either. */
.sugarscore-page .ss-result-sub{margin:14px 0 6px;font-weight:700!important;color:var(--ss-muted);font-size:17px}
.sugarscore-page .ss-score-num{font-weight:900!important;font-size:3.6rem;color:var(--ss-blue);line-height:1}
.sugarscore-page .ss-score-unit{font-size:1.2rem;font-weight:700!important;color:var(--ss-muted)}
.sugarscore-page .ss-result-msg{margin-top:22px;font-size:17px}
.sugarscore-page .ss-result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.sugarscore-page .ss-metric{background:var(--ss-paper);border:1px solid var(--ss-line);border-radius:14px;padding:18px;text-align:center}
.sugarscore-page .ss-metric b{display:block;font-size:2.625rem;color:var(--ss-green-dark);font-weight:900!important}
.sugarscore-page .ss-metric span{font-size:.85rem;color:var(--ss-muted)}

/* ---------- Newsletter ---------- */
.sugarscore-page .ss-newsletter{
  background:var(--ss-blue-tint);border:1px solid rgba(20,136,202,.15);border-radius:var(--ss-radius);
  padding:30px 34px;margin:16px 0 0;display:flex;flex-direction:column;gap:22px;
}
.sugarscore-page .ss-newsletter h3{font-size:1.5rem;margin-bottom:14px}
.sugarscore-page .ss-newsletter p{max-width:720px;margin:0 0 6px;font-size:1.05rem;color:var(--ss-ink)}
/* The bare text node used to sit directly in the flex row as an anonymous
   flex item with no text-align/flex-grow of its own, which is why the
   wrapped second line was drifting right instead of lining up under the
   first. Wrapped it in its own <span> with flex:1 + text-align:left. */
.sugarscore-page .ss-nl-opt label{display:flex;align-items:start;gap:12px;font-size:1.08rem;color:var(--ss-ink);line-height:1.5}
.sugarscore-page .ss-nl-opt label input[type=checkbox]{width:24px;height:24px;border-radius:6px;border:2px solid var(--ss-blue);flex:0 0 auto}
.sugarscore-page .ss-nl-opt label span{flex:1;text-align:left}
.sugarscore-page .ss-nl-email{margin-top:12px;display:flex;flex-direction:row;gap:14px;align-items:center}
.sugarscore-page .ss-nl-email input[type=email]{flex:1;padding:15px 16px;border:2px solid var(--ss-line);border-radius:12px;font-size:1.1rem;background:#fff}
.sugarscore-page .ss-nl-email .ss-btn{font-size:1.15rem;border-radius:12px;padding:15px 24px}
.sugarscore-page .ss-nl-email .ss-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.sugarscore-page .ss-nl-status{font-size:.98rem;font-weight:600!important;margin-top:4px}
.sugarscore-page .ss-nl-status.ok{color:var(--ss-green-dark)}
.sugarscore-page .ss-nl-status.err{color:var(--ss-coral-dark)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .sugarscore-page .ss-hero-grid{gap:32px}
  .sugarscore-page .ss-features{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .sugarscore-page .ss-feature{flex-direction:row;text-align:left;padding:26px 28px}
  .sugarscore-page .ss-feature img{width:110px;height:110px}
  .sugarscore-page .ss-lifestyle-grid{grid-template-columns:1fr;gap:36px}
  .sugarscore-page .ss-lifestyle-img{max-width:640px}
  .sugarscore-page .ss-result-metrics{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .sugarscore-page .ss-hero-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sugarscore-page .container{padding:0 12px}
  .sugarscore-page .ss-entry{padding:32px 24px}
  .sugarscore-page .ss-hero{padding:48px 0 0}
  .sugarscore-page .ss-hero-img img{max-width:340px}
  .sugarscore-page .ss-lead{font-size:1.15rem}
  .sugarscore-page .ss-section{padding:64px 0}
  .sugarscore-page .ss-lifestyle{padding:64px 0}
  .sugarscore-page .ss-choices,.sugarscore-page .ss-choices.ss-cols-3{grid-template-columns:1fr}
  .sugarscore-page .ss-field-row{grid-template-columns:repeat(3,1fr);gap:8px;align-items:start;margin-bottom:26px}
  .sugarscore-page .ss-field label{font-size:1rem}
  .sugarscore-page .ss-wizard-top,.sugarscore-page .ss-wizard-body{padding-left:16px;padding-right:16px}
  .sugarscore-page .ss-wizard-actions{padding-left:16px;padding-right:16px;flex-wrap:nowrap}
  .sugarscore-page .ss-result-metrics{grid-template-columns:1fr}
  .sugarscore-page .ss-metric{width:calc(100% - 16px);margin:8px auto}
  .sugarscore-page .ss-feature{flex-direction:column;text-align:center}
  .sugarscore-page .ss-nl-email{flex-direction:column;gap:12px}
  .sugarscore-page .ss-nl-email input[type=email]{flex:0;width:100%;max-width:100%}
  .sugarscore-page .ss-nl-email .ss-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sugarscore-page *,.sugarscore-page *::before,.sugarscore-page *::after{transition:none!important;animation:none!important}
}