/* ============================================================
   OwnerFlow Landing — Apple-inspired design layer
   ------------------------------------------------------------
   Scope: templates/OwnerFlow.html ("/") ONLY. Loaded after
   static/css/ownerflow_main.css so these rules can safely
   override section backgrounds/typography for the DESIGN-apple.md
   language without touching the shared stylesheet.
   All selectors are prefixed `owf-` or scoped under an `.owf-*`
   ancestor class so nothing here leaks into other pages.
   ============================================================ */

:root {
   /* ---- Color tokens (DESIGN-apple.md, landing-only) ---- */
   --owf-accent: #0066cc;
   --owf-accent-focus: #0071e3;
   --owf-accent-on-dark: #2997ff;
   --owf-ink: #1d1d1f;
   --owf-body-on-dark: #ffffff;
   --owf-body-muted-on-dark: #cccccc;
   --owf-ink-muted-80: #333333;
   --owf-ink-muted-48: #7a7a7a;
   --owf-divider-soft: #f0f0f0;
   --owf-hairline: #e0e0e0;
   --owf-canvas: #ffffff;
   --owf-parchment: #f5f5f7;
   --owf-pearl: #fafafc;
   --owf-tile-1: #272729;
   --owf-tile-2: #2a2a2c;
   --owf-tile-3: #252527;

   /* ---- Radius ---- */
   --owf-radius-xs: 5px;
   --owf-radius-sm: 8px;
   --owf-radius-md: 11px;
   --owf-radius-lg: 18px;
   --owf-radius-pill: 9999px;

   /* ---- Spacing ---- */
   --owf-space-section: 80px;
   --owf-space-section-sm: 48px;

   /* ---- Shadow (product imagery only) ---- */
   --owf-shadow-product: 3px 5px 30px rgba(0, 0, 0, 0.22);

   /* ---- Font stack: system-ui/-apple-system resolve to SF Pro on
      Apple platforms; Pretendard (already loaded globally) covers
      Korean glyphs and every other platform. SF Pro is never
      fetched or shipped. ---- */
   --owf-font: system-ui, -apple-system, BlinkMacSystemFont, "Pretendard", sans-serif;

   --owf-content-max: 1440px;
}

/* ============================================================
   Typography primitives
   ============================================================ */
.owf-display-hero {
   font-family: var(--owf-font);
   font-weight: 600;
   font-size: clamp(28px, 4.5vw, 56px);
   line-height: 1.1;
   letter-spacing: -0.28px;
}
.owf-display-lg {
   font-family: var(--owf-font);
   font-weight: 600;
   font-size: clamp(24px, 3.2vw, 40px);
   line-height: 1.2;
   letter-spacing: -0.2px;
}
.owf-lead {
   font-family: var(--owf-font);
   font-weight: 400;
   font-size: clamp(16px, 2vw, 21px);
   line-height: 1.5;
   letter-spacing: 0;
}
.owf-tagline {
   font-family: var(--owf-font);
   font-weight: 600;
   font-size: 14px;
   line-height: 1.2;
   letter-spacing: 0.02em;
}
.owf-body {
   font-family: var(--owf-font);
   font-weight: 400;
   font-size: 17px;
   line-height: 1.47;
   letter-spacing: -0.374px;
}

/* ============================================================
   Buttons — pill primary/secondary, Apple button grammar.
   Applied as additional classes alongside the existing ts-btn /
   ts-cta__btn-* classes; original classes are left in the markup
   untouched for any shared JS/CSS hooks.
   ============================================================ */
.owf-btn-primary,
.owf-btn-secondary {
   font-family: var(--owf-font) !important;
   border-radius: var(--owf-radius-pill) !important;
   min-height: 44px;
   box-shadow: none !important;
   transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.owf-btn-primary {
   background: var(--owf-accent) !important;
   color: #ffffff !important;
   border: 1px solid transparent !important;
   backdrop-filter: none !important;
}
.owf-btn-primary:hover {
   background: var(--owf-accent-focus) !important;
   transform: none !important;
   box-shadow: none !important;
}
.owf-btn-primary:active {
   transform: scale(0.95) !important;
}

/* Secondary pill for use on a LIGHT tile (ghost outline, blue text) */
.owf-btn-secondary {
   background: var(--owf-canvas) !important;
   color: var(--owf-accent) !important;
   border: 1px solid var(--owf-accent) !important;
   backdrop-filter: none !important;
}
.owf-btn-secondary:hover {
   background: var(--owf-parchment) !important;
   transform: none !important;
   color: var(--owf-accent) !important;
   border-color: var(--owf-accent) !important;
}
.owf-btn-secondary:active {
   transform: scale(0.95) !important;
}

/* Secondary pill variant for use on a DARK tile (ghost outline, white text) */
.owf-btn-secondary--on-dark {
   background: rgba(255, 255, 255, 0.08) !important;
   color: var(--owf-body-on-dark) !important;
   border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.owf-btn-secondary--on-dark:hover {
   background: rgba(255, 255, 255, 0.14) !important;
   color: var(--owf-body-on-dark) !important;
   border-color: rgba(255, 255, 255, 0.6) !important;
}
.owf-btn-secondary--on-dark:active {
   transform: scale(0.95) !important;
}

.owf-btn-primary:focus-visible,
.owf-btn-secondary:focus-visible,
.owf-btn-secondary--on-dark:focus-visible {
   outline: 2px solid var(--owf-accent-focus) !important;
   outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
   .owf-btn-primary,
   .owf-btn-secondary,
   .owf-btn-secondary--on-dark {
      transition: none !important;
   }
}

/* ============================================================
   SECTION: Hero — switched to a light canvas tile per design
   decision (Apple hero tiles alternate light/dark; this hero
   uses `owf-parchment`). Overrides target the EXISTING ts-hero__*
   classes so no markup restructuring is required — only the
   `.owf-hero` ancestor class changes which rules win.
   ============================================================ */
.owf-hero {
   background: var(--owf-parchment) !important;
   min-height: auto !important;
   padding-top: var(--owf-space-section);
   padding-bottom: var(--owf-space-section);
}
.owf-hero .ts-hero__inner {
   max-width: var(--owf-content-max);
   padding-top: 64px;
   padding-bottom: 24px;
}
.owf-hero .ts-hero__title {
   color: var(--owf-ink) !important;
   font-family: var(--owf-font);
   font-weight: 600;
   letter-spacing: -0.28px;
}
.owf-hero .ts-hero__sub {
   color: var(--owf-ink-muted-80) !important;
}
.owf-hero .ts-hero__badge {
   background: var(--owf-canvas) !important;
   border: 1px solid var(--owf-hairline) !important;
   color: var(--owf-accent) !important;
   box-shadow: none !important;
}
.owf-hero .ts-hero__scroll-line {
   background: linear-gradient(to bottom, rgba(29, 29, 31, 0.35), transparent) !important;
}
.owf-hero .ts-hero__scroll-line::after {
   background: var(--owf-ink) !important;
}
/* Icon grid labels were tuned for a dark background (white @ 65%);
   re-tone for the light tile so they stay readable. */
.owf-hero .ts-hero__icon-label {
   color: var(--owf-ink-muted-80) !important;
}
.owf-hero .ts-hero__icon-item:hover .ts-hero__icon-label {
   color: var(--owf-ink) !important;
}
/* ts-btn--secondary was authored white-on-transparent for a dark
   hero; on the light tile it needs the ghost-pill treatment. */
.owf-hero .ts-btn--secondary {
   background: var(--owf-canvas) !important;
   color: var(--owf-accent) !important;
   border: 1px solid var(--owf-accent) !important;
   backdrop-filter: none !important;
   box-shadow: none !important;
}
.owf-hero .ts-btn--secondary:hover {
   background: var(--owf-parchment) !important;
   color: var(--owf-accent) !important;
   border-color: var(--owf-accent) !important;
   transform: none !important;
}
.owf-hero .ts-btn--primary,
.owf-hero .ts-btn--secondary {
   box-shadow: none !important;
}
.owf-hero .ts-btn--primary:hover {
   transform: none !important;
   box-shadow: none !important;
}
.owf-hero .ts-btn--primary:active,
.owf-hero .ts-btn--secondary:active {
   transform: scale(0.95) !important;
}
.owf-hero .ts-btn--primary:focus-visible,
.owf-hero .ts-btn--secondary:focus-visible {
   outline: 2px solid var(--owf-accent-focus) !important;
   outline-offset: 2px;
}

/* ============================================================
   SECTION: Maintenance / iPhone showcase — dark tile.
   The existing markup (.ts-maintain) ships light-surface text
   tokens (near-black on light gray); this overrides them for a
   dark tile so contrast holds. Phone-frame mockups are already
   self-contained dark cases with white screens and need no change.
   ============================================================ */
.owf-tile-dark {
   background: var(--owf-tile-1) !important;
   padding-top: var(--owf-space-section);
   padding-bottom: var(--owf-space-section);
}
.owf-tile-dark .ts-maintain__inner {
   max-width: var(--owf-content-max);
}
.owf-tile-dark .ts-maintain__eyebrow {
   background: rgba(255, 255, 255, 0.1) !important;
   color: var(--owf-accent-on-dark) !important;
}
.owf-tile-dark .ts-maintain__title {
   color: var(--owf-body-on-dark) !important;
   font-family: var(--owf-font);
   font-weight: 600;
}
.owf-tile-dark .ts-maintain__desc {
   color: var(--owf-body-muted-on-dark) !important;
}
.owf-tile-dark .ts-maintain__phone-title {
   color: var(--owf-body-on-dark) !important;
}
.owf-tile-dark .ts-maintain__phone-desc {
   color: var(--owf-body-muted-on-dark) !important;
}
.owf-tile-dark .ts-phone__frame {
   box-shadow: var(--owf-shadow-product) !important;
}

/* ============================================================
   SECTION: Final CTA — already a dark tile in the shared CSS;
   only the button grammar + container width are updated to the
   DESIGN-apple.md pill language.
   ============================================================ */
.owf-cta-dark {
   background: var(--owf-tile-1) !important;
}
.owf-cta-dark .ts-cta__inner {
   max-width: min(720px, var(--owf-content-max));
}
.owf-cta-dark .ts-cta__badge {
   border-radius: var(--owf-radius-pill);
   box-shadow: none !important;
}
.owf-cta-dark .ts-cta__btn-primary,
.owf-cta-dark .ts-cta__btn-secondary {
   border-radius: var(--owf-radius-pill) !important;
   min-height: 44px;
   box-shadow: none !important;
}
.owf-cta-dark .ts-cta__btn-primary {
   background: var(--owf-accent) !important;
}
.owf-cta-dark .ts-cta__btn-primary:hover {
   background: var(--owf-accent-focus) !important;
   transform: none !important;
   box-shadow: none !important;
}
.owf-cta-dark .ts-cta__btn-primary:active,
.owf-cta-dark .ts-cta__btn-secondary:active {
   transform: scale(0.95) !important;
}
.owf-cta-dark .ts-cta__btn-secondary:hover {
   transform: none !important;
}
.owf-cta-dark .ts-cta__btn-primary:focus-visible,
.owf-cta-dark .ts-cta__btn-secondary:focus-visible {
   outline: 2px solid var(--owf-accent-focus) !important;
   outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
   .owf-cta-dark .ts-cta__btn-primary,
   .owf-cta-dark .ts-cta__btn-secondary,
   .owf-hero .ts-btn--primary,
   .owf-hero .ts-btn--secondary {
      transition: none !important;
   }
}

/* ============================================================
   Responsive — checked at 1440 / 1068 / 833 / 640 / 419px per
   DESIGN-apple.md. Section vertical padding tightens on small
   viewports; hero display type steps down; touch targets stay
   >= 44px throughout (buttons already min-height:44px above).
   ============================================================ */
@media (max-width: 1068px) {
   .owf-hero .ts-hero__inner {
      padding-top: 48px;
   }
}

@media (max-width: 833px) {
   .owf-hero,
   .owf-tile-dark {
      padding-top: var(--owf-space-section-sm);
      padding-bottom: var(--owf-space-section-sm);
   }
}

@media (max-width: 640px) {
   .owf-hero .ts-hero__cta {
      flex-direction: column;
      align-items: stretch;
   }
   .owf-hero .ts-hero__cta .owf-btn-primary,
   .owf-hero .ts-hero__cta .owf-btn-secondary {
      width: 100%;
   }
}

@media (max-width: 419px) {
   .owf-display-hero {
      font-size: 28px;
   }
}