/* Original design layer (2026-10-18): Original now renders the same pages as the other templates.
   classic/telroo.css keeps its look; this file styles the page parts it never had. Loaded after it. */

/* No all-caps labels: text shows as written (first letter capital). */
.kicker { text-transform: none; letter-spacing: normal; }
.site-logo small { text-transform: none; letter-spacing: 0.08em; }

/* Home hero phone: home-screen wallpaper and app icons behind the QR steps. */
.phone__wall { position: absolute; inset: -4px; background: radial-gradient(ellipse at 15% 15%, #fff2cf, transparent 65%), radial-gradient(ellipse at 85% 70%, #dce8fa, transparent 65%), linear-gradient(150deg, #f6eee6, #e4edeb); filter: blur(2px); }
.phone__apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 10px; padding: 64px 18px 0; }
.phone__app { display: grid; place-items: center; aspect-ratio: 1; border-radius: 11px; background: #9bbdb1; color: #fff; box-shadow: 0 3px 7px rgb(30 60 70 / 8%); }
.phone__app svg { width: 65%; height: 65%; }
.phone__app--mail, .phone__app--browser { background: #a2bbd8; }
.phone__app--calendar, .phone__app--music { background: #d9aaa4; }
.phone__app--camera { background: #b5b7c5; }
.phone__app--map { background: #a9c6a4; }
.phone__app--weather { background: #ddc38e; }
.phone__dock { position: absolute; inset: auto 14px 22px; display: flex; justify-content: space-around; padding: 10px 6px; border-radius: 19px; background: rgb(255 255 255 / 55%); }
.phone__dock span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #a0bcb3; color: #fff; font-size: 22px; }
.phone__dock span:nth-child(2) { background: #a2bbd8; }
.phone__dock span:nth-child(3) { background: #d9aaa4; }
.phone__screen { position: relative; }
.phone__status, .phone__step { z-index: 1; }

/* Pause control for the hero animation (shown by telroo.js). */
.hero__pause { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--coral-dark); border-radius: 50%; background: var(--paper); color: var(--coral-dark); box-shadow: var(--lift); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.hero__pause:hover { background: var(--coral); color: var(--ocean); }
.hero__pause[aria-pressed="false"] .hero__pause-icon--play, .hero__pause[aria-pressed="true"] .hero__pause-icon--pause { display: none; }
.hero__pause[hidden] { display: none; }
.hero--paused :is(.phone, .phone *, .float-card) { animation-play-state: paused !important; }
/* Same spot as the other templates: bottom-right corner of the phone area, clear of the floating cards. */
.hero__pause { top: auto; right: 12px; bottom: 12px; left: auto; translate: none; z-index: 3; }

/* Product page buttons: Buy now (colour from brand.css) and the softer Add to cart. */
.button--buy-soft { background: rgb(var(--coral-rgb) / 12%); color: var(--ocean); border: 1px solid var(--coral-dark); }
.button--buy-soft:hover { background: rgb(var(--coral-rgb) / 22%); color: var(--ocean); }
.support-link { font-weight: 600; }
/* Coupon: a link until opened. */
.checkout__coupon summary { cursor: pointer; font-weight: 600; color: var(--eucalyptus); }
.checkout__coupon[open] summary { margin-bottom: 8px; }
/* Phone buy bar: chosen plan, price and Buy now, pinned to the bottom while the main buy button is off screen. */
.buybar { display: none; }
@media (max-width: 860px) {
  .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--paper); border-top: 1px solid var(--edge); box-shadow: 0 -4px 16px rgb(var(--ocean-rgb) / 8%); transition: transform .25s var(--ease); }
  .buybar[hidden] { display: flex; transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }
  .buybar__info { display: grid; min-width: 0; flex: 1; line-height: var(--lh-ui); }
  .buybar__plan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--ocean-soft); }
  .buybar__price { font-size: var(--fs-md); }
  .buybar .button { flex: none; min-height: 44px; padding-inline: 20px; }
  body:has(.buybar:not([hidden])) .site-footer { padding-bottom: 96px; }
}

/* Product page: small blog block at the bottom (three guides, whole card opens the post). */
.mini-blog__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.mini-blog__item { position: relative; display: grid; align-content: start; gap: 10px; padding: 14px; }
.mini-blog__item img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-media); }
.mini-blog__item h3 { margin: 0; font-size: var(--fs-md); }
.mini-blog__item p { margin: 0; color: var(--ocean-soft); font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.mini-blog__link { color: var(--ocean); text-decoration: none; }
.mini-blog__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.mini-blog__item:has(.mini-blog__link:hover) h3 { text-decoration: underline; }

/* The shared home page loads the hero photo as an <img>; drop the old CSS background so it is not downloaded twice. */
img.hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: center; background: none; }

/* Order-page status note under the hero destination links. */
.hero__status { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ocean); }
.hero__status svg { flex: none; color: var(--roo, currentColor); }
.hero__status a { color: inherit; }