/* Beside marketing site, v3 design. Warm day palette from the brandbook
   (beside-app/marketing/merk/brandbook.html, chapter 3), Literata + Figtree
   (chapter 4). Hairlines over cards, the clock as the page's one ornament. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --sand: #F1E4CE; --sand2: #EAD9BD; --cream: #FBF4E8; --screen: #FCF7EE; --screen2: #F7EEDF;
  --surface: #FFFFFF; --surface2: #FBF2E2; --bezel: #2A211B;
  --ink: #3A2A20; --ink-soft: #6B5A4C; --ink-faint: #9C8B79;
  --amber: #E1974C; --ochre: #EBAE63; --amber-deep: #C97C34;
  --terra: #C4623E; --terra-deep: #A84E2F; --terra-text: #B0492C;
  --leaf: #7E9A66; --leaf-deep: #5F7C4B; --leaf-soft: #DCE5CC;
  --hair: rgba(58,42,32,0.12); --hair-soft: rgba(58,42,32,0.06);
  --leaf-tint: rgba(126,154,102,0.16);
  --serif: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
.shell { max-width: 1140px; margin: 0 auto; padding: 0 56px; }

/* buttons */
.cta { display: inline-block; background: var(--terra); color: var(--cream); font-size: 14.5px; font-weight: 700; padding: 12px 26px; border-radius: 100px; white-space: nowrap; }
.cta:hover { background: var(--terra-deep); }
.ghost { display: inline-block; border: 1.5px solid var(--hair); background: var(--surface); color: var(--ink); font-size: 14.5px; font-weight: 600; padding: 12px 26px; border-radius: 100px; }
.storebadge { display: inline-block; line-height: 0; border: 0; background: none; padding: 0; transition: opacity 0.15s ease; }
.storebadge:hover { opacity: 0.82; }
.storebadge svg { display: block; height: auto; max-width: 100%; }

/* ---------------- nav ---------------- */
.nav { border-bottom: 1px solid var(--hair-soft); background: var(--cream); position: relative; z-index: 50; }
.nav .shell { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 78px; }
.brand { display: inline-flex; align-items: center; }
.brand svg { display: block; }
.navlinks { display: flex; gap: 36px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.navlinks a:hover { color: var(--ink); }
.navright { display: flex; align-items: center; gap: 14px; position: relative; }

/* language picker */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); padding: 8px 10px; border-radius: 10px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: " \25BE"; font-size: 10px; }
.lang[open] summary { background: var(--sand); color: var(--ink); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 18px 40px rgba(58,42,32,0.14); padding: 6px; display: flex; flex-direction: column; min-width: 150px; z-index: 60; }
.lang-menu a { padding: 9px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.lang-menu a:hover { background: var(--screen2); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--terra-text); }

/* hamburger, mobile only; the three lines fold into a cross when open */
.mmenu { display: none; }
.mmenu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); }
.mmenu summary::-webkit-details-marker { display: none; }
.mmenu summary svg path { transition: transform 0.18s ease, opacity 0.14s ease; transform-origin: center; }
.mmenu summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.mmenu[open] summary { background: var(--sand); }
.mmenu[open] summary svg path:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mmenu[open] summary svg path:nth-child(2) { opacity: 0; }
.mmenu[open] summary svg path:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mpanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--cream); border-bottom: 1px solid var(--hair); box-shadow: 0 26px 44px rgba(58,42,32,0.14); padding: 6px 26px 16px; }
.mpanel a { display: flex; align-items: center; min-height: 48px; font-family: var(--serif); font-size: 17.5px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); border-bottom: 1px solid var(--hair-soft); }
.mpanel a:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }
.mpanel .klein { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.mlangs { display: flex; gap: 20px; padding: 14px 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.mlangs a { min-height: 32px; display: inline-flex; align-items: center; }
.mlangs a[aria-current="true"] { color: var(--terra-text); }

/* ---------------- hero ---------------- */
.hero { padding: 96px 0 100px; }
.hero .shell { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 76px; align-items: center; }
.hero h1 { font-family: var(--serif); font-size: 56px; line-height: 1.1; font-weight: 600; letter-spacing: -1.5px; max-width: 17ch; }
.hero .lede { margin-top: 26px; font-size: 18.5px; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; }
.ctas { margin-top: 36px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fine { margin-top: 16px; font-size: 13.5px; color: var(--ink-faint); }
.heroart { display: flex; flex-direction: column; align-items: center; }

/* phone renders from the PhoneMockup studio */
.phoneimg { width: 300px; height: auto; }
.phoneimg.heromock { width: 340px; }

/* hero phone only: a calm Wren perched on the top edge of the device, her feet
   gripping the rim like a branch, the way she sits on the day line inside the
   app. The PhoneMockup render carries ~4.8% transparent padding above the
   device frame, so the perch is dropped low enough that her feet overlap the
   real device rim (never the image box), keeping her firmly on the phone and
   never floating above it. She stays within the phone's width, so she never
   runs off a narrow screen. All percentages, so the perch scales everywhere. */
.phonewrap { position: relative; display: inline-block; line-height: 0; }
.wren-perch { position: absolute; width: 30%; height: auto; top: -8%; left: 30%; pointer-events: none; }

/* caption under every app screen: never an image without a caption */
.cap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 300px; }
.cap b { color: var(--ink); }

/* ---------------- sections ---------------- */
.sect { padding: 104px 0; }
.sect.sand { background: var(--sand); }
.sect.warm { background: var(--screen2); }
.sect h2, .endcta h2 { font-family: var(--serif); font-size: 35px; line-height: 1.18; font-weight: 600; letter-spacing: -0.7px; max-width: 26ch; }
.sub { margin-top: 14px; font-size: 16px; color: var(--ink-soft); max-width: 60ch; line-height: 1.7; }
.body { margin-top: 24px; max-width: 62ch; font-size: 16.5px; line-height: 1.8; color: var(--ink-soft); }
.body p + p { margin-top: 18px; }
.body b { color: var(--ink); font-weight: 600; }

/* the problem: the clock as the page's only ornament */
.problem { border-top: 1px solid var(--hair-soft); }
.problem .shell { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
.bigtime { font-family: var(--serif); font-size: 164px; line-height: 0.95; font-weight: 600; letter-spacing: -6px; color: var(--terra-text); font-variant-numeric: tabular-nums; }
.bigtime small { display: block; margin-top: 14px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.othertimes { margin-top: 44px; border-top: 1px solid var(--hair); max-width: 340px; }
.othertimes .row { display: flex; align-items: baseline; gap: 18px; padding: 15px 2px; border-bottom: 1px solid var(--hair); }
.othertimes .t { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--terra-text); font-variant-numeric: tabular-nums; flex: 0 0 62px; }
.othertimes .w { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* the quotable definition block */
.defwrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
.defblock { background: var(--surface); border: 1px solid var(--hair); border-radius: 22px; padding: 30px 34px; font-size: 16px; line-height: 1.78; color: var(--ink); box-shadow: 0 14px 36px rgba(58,42,32,0.08); }

/* the Tuesday: how it works as one continuous afternoon */
.day { margin-top: 26px; }
.beat { display: grid; grid-template-columns: 132px 1fr 340px; gap: 52px; padding: 60px 0; border-top: 1px solid var(--hair-soft); align-items: start; }
.beat:first-child { border-top: none; }
.beat .when { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: -0.8px; color: var(--terra-text); font-variant-numeric: tabular-nums; padding-top: 4px; }
.beat .when small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-faint); }
.beat h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; max-width: 20ch; }
.beat .txt { margin-top: 13px; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); max-width: 52ch; }
.beat .txt b { color: var(--ink); font-weight: 600; }
.beat .art { display: flex; flex-direction: column; align-items: center; }
.beat.short { grid-template-columns: 132px 1fr; }
.beat.short .txt { max-width: 58ch; }

/* wren band */
.wrenband .shell { display: grid; grid-template-columns: 230px 1fr; gap: 70px; align-items: center; }
.wrenband .art { display: flex; flex-direction: column; align-items: center; gap: 26px; color: var(--ink); }
.wrenband .art .pose2 { opacity: 0.85; }

/* sources: hairline list, the traceable mechanism */
.traceh { margin-top: 52px; font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -0.4px; }
.trace { margin-top: 20px; border-top: 1px solid var(--hair); max-width: 840px; }
.trace .row { display: grid; grid-template-columns: 88px 128px 1fr; gap: 26px; padding: 17px 2px; border-bottom: 1px solid var(--hair); }
.trace .t { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--terra-text); font-variant-numeric: tabular-nums; }
.trace b { font-size: 14.5px; font-weight: 600; padding-top: 3px; }
.trace span { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.traceafter { margin-top: 20px; max-width: 62ch; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.traceafter b { color: var(--ink); font-weight: 600; }
.srclist { margin-top: 40px; border-top: 1px solid var(--hair); max-width: 820px; }
.srclist .row { display: grid; grid-template-columns: 280px 1fr; gap: 34px; padding: 18px 2px; border-bottom: 1px solid var(--hair); }
.srclist b { font-size: 15px; font-weight: 600; }
.srclist span { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.honest { margin-top: 44px; background: var(--surface2); border: 1px solid var(--hair-soft); border-radius: 20px; padding: 26px 30px; max-width: 760px; font-size: 15.5px; line-height: 1.75; color: var(--ink); }

/* parent reviews: four real quotes, word for word, editorial hairline grid */
.reviews { border-top: 1px solid var(--hair-soft); }
.quotes { margin-top: 44px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 1fr; column-gap: 70px; }
.quote { margin: 0; padding: 30px 2px 32px; border-bottom: 1px solid var(--hair); }
.quote .stars { display: flex; gap: 3px; color: var(--amber-deep); }
.quote blockquote { margin: 14px 0 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.62; letter-spacing: -0.1px; color: var(--ink); max-width: 52ch; }
.quote figcaption { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* guides: editorial question list, no card grid */
.guides { margin-top: 44px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 1fr; column-gap: 70px; }
.guide { display: block; padding: 22px 2px; border-bottom: 1px solid var(--hair); }
.guide:hover h3 { color: var(--terra-text); }
.guide h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; }
.guide p { margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); max-width: 48ch; }
.guide .bron { display: block; margin-top: 9px; font-size: 11.5px; color: var(--ink-faint); }
.allg { margin-top: 34px; }

/* faq */
.faqs { margin-top: 40px; max-width: 820px; border-top: 1px solid var(--hair); }
.faq { padding: 26px 2px; border-bottom: 1px solid var(--hair); }
.faq h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
.faq p { margin-top: 10px; font-size: 15px; line-height: 1.72; color: var(--ink-soft); max-width: 68ch; }

/* closing cta: left aligned, no centered band */
.endcta .shell { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 70px; align-items: center; }
.endcta .ctas { margin-top: 32px; }
.endwren { display: flex; justify-content: center; color: var(--ink); }

/* ---------------- footer ---------------- */
.footer { border-top: 1px solid var(--hair-soft); padding: 60px 0 44px; background: var(--screen2); }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; }
.footer h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; margin-bottom: 12px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.footer ul a:hover { color: var(--ink); }
.footer .blurb { margin-top: 12px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); max-width: 42ch; }
.footer .disc { margin-top: 36px; font-size: 12px; line-height: 1.6; color: var(--ink-faint); max-width: 72ch; }
.footer .bottom { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair-soft); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-faint); }

/* ---------------- guide template ---------------- */
.ghero { padding: 58px 0 10px; }
.gcrumb { font-size: 12.5px; color: var(--ink-faint); }
.gcrumb a { color: var(--ink-soft); }
.ghero h1 { font-family: var(--serif); font-size: 44px; line-height: 1.15; font-weight: 600; letter-spacing: -1.1px; margin-top: 20px; max-width: 22ch; }
.ghero .sub { max-width: 62ch; }
.gby { margin-top: 20px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.gby b { color: var(--ink); font-weight: 600; }
.gmeta { margin-top: 10px; font-size: 13px; color: var(--ink-faint); }
.ganswer { margin-top: 32px; background: var(--surface); border: 1px solid var(--hair); border-radius: 20px; padding: 26px 30px; max-width: 740px; box-shadow: 0 12px 30px rgba(58,42,32,0.07); }
.ganswer .lbl { font-size: 12px; font-weight: 700; color: var(--leaf-deep); }
.ganswer p { margin-top: 8px; font-size: 16.5px; line-height: 1.72; }
.gcols { display: grid; grid-template-columns: 230px 1fr; gap: 64px; padding: 46px 0 84px; align-items: start; }
.gtoc { position: sticky; top: 20px; background: var(--surface2); border: 1px solid var(--hair-soft); border-radius: 16px; padding: 18px 20px; }
.gtoc b { font-size: 12.5px; display: block; margin-bottom: 10px; }
.gtoc ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.gtoc a:hover { color: var(--ink); }
.glede { font-size: 17px; line-height: 1.75; color: var(--ink-soft); max-width: 66ch; }
.gbody h2 { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -0.5px; margin-top: 46px; max-width: 24ch; scroll-margin-top: 24px; }
.gbody p { margin-top: 14px; font-size: 16px; line-height: 1.78; color: var(--ink-soft); max-width: 66ch; }
.gbody p strong, .gbody p b { color: var(--ink); font-weight: 600; }
.gbody .faqg { margin-top: 8px; scroll-margin-top: 24px; }
.gbody .faqs { max-width: 66ch; margin-top: 24px; }
.gbody .honest { max-width: 66ch; font-size: 14px; padding: 20px 24px; }
.gsrc { margin-top: 42px; border-top: 1px solid var(--hair); padding-top: 22px; max-width: 66ch; scroll-margin-top: 24px; }
.gsrc b { font-size: 13.5px; }
.gsrc p { margin-top: 8px; font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); }
.grel { margin-top: 44px; }
.grel b { font-size: 14px; }
.grel .links { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.grel .links a { color: var(--terra-text); font-weight: 600; }
.gband { margin-top: 48px; background: var(--sand); border-radius: 22px; padding: 30px 34px; max-width: 620px; display: flex; gap: 24px; align-items: center; color: var(--ink); }
.gband svg { flex: 0 0 auto; }
.gband h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; }
.gband p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.gband .cta { margin-top: 14px; }

/* ---------------- legal (privacy) ---------------- */
.legal { max-width: 740px; }
.legal p { margin-top: 14px; font-size: 15.5px; line-height: 1.78; color: var(--ink-soft); }
.legal p strong { color: var(--ink); }
.legal h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -0.4px; margin-top: 44px; }
.legal h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.2px; margin-top: 28px; }
.legal ul { margin-top: 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.legal li strong { color: var(--ink); }
.legal a { color: var(--terra-text); font-weight: 600; }
.legal table { margin: 16px 0; }
.legal th { color: var(--ink); }
.legal td { color: var(--ink-soft); }

/* ---------------- motion, only with script and without reduced-motion ---------------- */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .reveal.d1 { transition-delay: 0.12s; }
html.js .reveal.d2 { transition-delay: 0.24s; }
html.js .reveal.d3 { transition-delay: 0.36s; }
html.js .reveal.inview { opacity: 1; transform: none; }

/* clock times announce themselves: faint until their moment scrolls in */
html.js .beat .when { color: var(--ink-faint); transition: color 1.1s ease 0.25s; }
html.js .beat.inview .when { color: var(--terra-text); }

/* Wren's breathing: four counts in, six out, on a ten second cycle */
.breathe { transform-origin: 50% 82%; }
html.js .breathe { animation: adem 10s ease-in-out infinite; }
@keyframes adem { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Wren as a presence: small, bottom left, lives the page with the visitor */
.companion { display: none; }
html.js .companion { display: block; position: fixed; left: 26px; bottom: 20px; width: 74px; height: 70px; z-index: 300; pointer-events: none; color: var(--ink); }
.companion svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.7s ease; }
.companion[data-pose="calm"] .p-calm { opacity: 1; }
.companion[data-pose="breathing"] .p-breathing { opacity: 1; }
.companion[data-pose="asleep"] .p-asleep { opacity: 1; }
.companion[data-pose="proud"] .p-proud { opacity: 1; }
.companion[data-pose="nearby"] .p-nearby { opacity: 1; }
@media (max-width: 960px) { html.js .companion { display: none; } }

/* reduced motion: double lock next to the .js gate */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .beat .when { color: var(--terra-text); transition: none; }
  html.js .breathe { animation: none; }
  .companion svg { transition: none; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  .hero .shell, .problem .shell, .defwrap, .wrenband .shell, .endcta .shell { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 72px; }
  .hero .shell { gap: 48px; }
  .heroart { align-items: flex-start; }
  .beat { grid-template-columns: 90px 1fr; }
  .beat .art { grid-column: 2; margin-top: 26px; align-items: flex-start; }
  .guides { grid-template-columns: 1fr; }
  .gcols { grid-template-columns: 1fr; }
  .gtoc { position: static; }
  .footer .cols { grid-template-columns: 1fr; }
  .trace .row { grid-template-columns: 64px 1fr; }
  .trace .row span { grid-column: 2; }
  .srclist .row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 860px) {
  .shell { padding: 0 26px; }
  .nav .shell { height: 66px; }
  .navlinks { display: none; }
  .lang { display: none; }
  .mmenu { display: block; }
  .navright { position: static; }
  .navright .cta { font-size: 13.5px; padding: 10px 18px; }
  .hero { padding: 40px 0 56px; }
  .hero h1 { font-size: 31px; line-height: 1.14; letter-spacing: -0.9px; }
  .hero .lede { margin-top: 16px; font-size: 15px; }
  .ctas { margin-top: 24px; gap: 10px; }
  .ctas .storebadge svg { width: 120px; height: 40px; }
  .ctas .storebadge:last-child svg { width: 135px; height: 40px; }
  .sect { padding: 52px 0 56px; }
  .sect h2, .endcta h2 { font-size: 25px; line-height: 1.2; letter-spacing: -0.5px; }
  .body { margin-top: 14px; font-size: 14.5px; line-height: 1.72; }
  .body p + p { margin-top: 12px; }
  .bigtime { font-size: 88px; line-height: 1; letter-spacing: -3px; }
  .bigtime small { margin-top: 8px; font-size: 13px; }
  .othertimes { margin-top: 28px; }
  .defblock { padding: 20px 22px; font-size: 14px; }
  .beat { grid-template-columns: 1fr; gap: 8px; padding: 34px 0; }
  .beat .when { font-size: 24px; }
  .beat h3 { font-size: 18.5px; margin-top: 6px; }
  .beat .txt { font-size: 13.5px; }
  .beat .art { grid-column: 1; }
  .phoneimg { width: 240px; }
  .phoneimg.heromock { width: 260px; }
  .wrenband .shell { gap: 28px; }
  .wrenband .art { flex-direction: row; justify-content: flex-start; }
  .traceh { margin-top: 36px; font-size: 19px; }
  .trace b { padding-top: 0; }
  .honest { padding: 20px 22px; font-size: 14px; }
  .quotes { margin-top: 28px; }
  .quote blockquote { font-size: 15.5px; }
  .faqs { margin-top: 24px; }
  .faq h3 { font-size: 17.5px; }
  .ghero h1 { font-size: 30px; letter-spacing: -0.7px; }
  .ganswer { padding: 20px 22px; }
  .ganswer p { font-size: 15px; }
  .gcols { padding: 30px 0 56px; gap: 28px; }
  .gband { flex-direction: column; align-items: flex-start; }
  .footer { padding: 44px 0 34px; }
}