/* =============================================================
   DESIGN TOKENS — extracted from Figma (tST9aa1GGCszWg2C2Pa6OW)
   All values come directly from the design file.
   ============================================================= */

:root {

  /* --- Colors --- */

  /* Page / surface */
  --color-bg-page:             #ffffff;
  --color-topbar-bg:           #ffffff;

  /* Tile company tints */
  --color-tile-instacart:      #f6fcf6;   /* soft green */
  --color-tile-lyft:           #faf7ff;   /* soft purple */
  --color-tile-youtube:        #fff4f4;   /* soft red */

  /* Text */
  --color-text-primary:        #000000;
  --color-text-secondary:      rgba(0, 0, 0, 0.70);  /* project subtitle */
  --color-text-meta:           #a3a3a3;               /* location / availability */

  /* "Get in contact" button */
  --color-btn-bg:              #363531;
  --color-btn-text:            #ffffff;

  /* Device frames */
  --color-frame-stroke:        #000000;   /* iPhone X outline */
  --color-frame-iphone8-bg:    #000000;   /* iPhone 8 body fill */
  --color-frame-ipad-bg:       #000000;   /* iPad body fill */

  /* Tooltip */
  --tooltip-bg:                #1a1a1a;
  --tooltip-text:              #ffffff;
  --tooltip-font-size:         12px;
  --tooltip-radius:            8px;
  --tooltip-padding-x:         10px;
  --tooltip-padding-y:         6px;
  --tooltip-gap:               8px;       /* gap between trigger and tooltip */
  --tooltip-duration:          150ms;


  /* --- Typography --- */

  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  /* Intro headline (Yoni's tagline) */
  --text-intro-family:  var(--font-serif);
  --text-intro-size:    30px;
  --text-intro-weight:  400;
  --text-intro-lh:      1.2;

  /* Body copy (about paragraph) */
  --text-body-family:   var(--font-serif);
  --text-body-size:     16px;
  --text-body-weight:   400;
  --text-body-lh:       1.7;

  /* Top-bar name */
  --text-name-family:   var(--font-sans);
  --text-name-size:     16px;
  --text-name-weight:   500;
  --text-name-lh:       1.7;

  /* Nav link (About) */
  --text-nav-family:    var(--font-sans);
  --text-nav-size:      16px;
  --text-nav-weight:    500;
  --text-nav-lh:        1.7;

  /* Button label */
  --text-btn-family:    var(--font-sans);
  --text-btn-size:      15px;
  --text-btn-weight:    500;
  --text-btn-lh:        1.7;

  /* Hover-reveal project title */
  --text-tile-title-family:    var(--font-sans);
  --text-tile-title-size:      16px;
  --text-tile-title-weight:    500;
  --text-tile-title-lh:        1.7;

  /* Hover-reveal project subtitle */
  --text-tile-sub-family:      var(--font-sans);
  --text-tile-sub-size:        12px;
  --text-tile-sub-weight:      400;
  --text-tile-sub-lh:          1.5;

  /* Meta info (location, availability) */
  --text-meta-family:   var(--font-sans);
  --text-meta-size:     12px;
  --text-meta-weight:   400;
  --text-meta-lh:       1.7;


  /* --- Layout & Spacing --- */

  --topbar-height:        110px;

  /* Column widths */
  --col-outer-width:      986px;   /* topbar content + tile backgrounds */
  --col-inner-width:      824px;   /* intro text + frames inside tiles */

  /* Side padding steps */
  --page-padding-mid:     48px;    /* topbar + both cols at 800–1200px */
  --page-padding-narrow:  50px;    /* intro at <800px */

  /* Intro block */
  --intro-padding-x:      53px;
  --intro-padding-top:    40px;
  --intro-padding-bottom: 60px;
  --intro-inner-gap:      36px;          /* gap between text sections */
  --intro-text-width:     571px;         /* paragraph column max-width */
  /* Radius: tr + br + bl only (no tl — design intent) */
  --intro-radius:         24px;

  /* Tile / showcase */
  --tile-gap:             24px;          /* vertical gap between tiles */
  --tile-radius:          24px;
  /* Note: tile-height (824px) and tile-height-short (528px) are Figma reference
     values only — actual tile height is driven by aspect-ratio: 1/1 + container width */

  /* Hover-reveal animation */
  --reveal-offset:        8px;           /* translateY before hover */
  --reveal-duration:      220ms;
  --reveal-easing:        ease-out;
  --reveal-subtitle-width: 405px;
  --reveal-title-gap:     4px;           /* gap between title and subtitle */
  /* --tile-bump and --tile-content-gap are defined on .tile using cqh units
     so they scale proportionally as the tile resizes */

  /* Avatar */
  --avatar-size:          56px;
  /* Radius: tr + br + bl only (no tl) */
  --avatar-radius:        24px;

  /* Button */
  --btn-padding-x:        24px;
  --btn-padding-y:        8px;
  /* Radius: tl + tr + bl only (no br — speech-bubble corner) */
  --btn-radius:           24px;

  /* Topbar meta icon size */
  --icon-size:            16px;
  --meta-gap:             9px;           /* gap between icon and label */
  --topbar-item-gap:      23px;          /* gap between topbar left items */
  --topbar-right-gap:     32px;          /* gap between About + button */


  /* --- Device Frames --- */

  /* Shared frame values */
  /* 5.281px at 1280px viewport (5.281/1280*100 = 0.413vw); scales down on narrower screens */
  --frame-border-width:   clamp(2px, 0.413vw, 5.281px);
  --frame-radius:         31.685px;
  --frame-shadow-strong:  0px 9.241px 42.246px 0px rgba(0, 0, 0, 0.13);
  --frame-shadow-light:   0px 9.241px 21.123px rgba(0, 0, 0, 0.13);

  /* iPhone X */
  --frame-iphonex-w:      268px;
  --frame-iphonex-h:      579.567px;
  /* aspect-ratio ≈ 9 / 19.5 */
  --frame-iphonex-notch-w: 158.625px;
  --frame-iphonex-notch-h: 21.508px;
  --frame-iphonex-notch-offset-x: 54.5px; /* left inset of notch pill */

  /* iPhone 8 */
  /* Outer shell is solid dark fill; top/bottom bars = (outer-h - inner-h) / 2 */
  --frame-iphone8-outer-h: 566.365px;
  --frame-iphone8-inner-w: 254.798px;
  --frame-iphone8-inner-h: 453.201px;
  --frame-iphone8-bar-h:   56.582px;    /* (566.365 - 453.201) / 2 */

  /* iPad (landscape) */
  --frame-ipad-w:          635.015px;
  --frame-ipad-h:          400.02px;
  /* aspect-ratio ≈ 16 / 10 */
  --frame-ipad-padding-x:  51.488px;
  --frame-ipad-padding-y:  5.281px;

  /* Frameless web / desktop */
  --frame-frameless-shadow: 0px 9.227px 42.183px 0px rgba(0, 0, 0, 0.13);
  --frame-frameless-w:     590.128px;
  --frame-frameless-h:     331.688px;
  /* aspect-ratio ≈ 16 / 9 */

}


/* =============================================================
   BASE RESET
   ============================================================= */

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}


/* =============================================================
   TOP BAR
   ============================================================= */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--topbar-height);
  background: var(--color-topbar-bg);
  display: flex;
  align-items: center;
  transform: translateY(0);
  transition: transform 220ms ease;
  will-change: transform;
  /* No padding here — topbar-inner handles centering like col-outer */
}

.topbar--hidden {
  transform: translateY(-100%);
}

.topbar-inner {
  /* Mirrors col-outer: max 986px, centered with auto margins */
  max-width: var(--col-outer-width);
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--topbar-item-gap);
}

.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  flex-shrink: 0;
  /* tr + br + bl — no tl */
  border-radius: 0 var(--avatar-radius) var(--avatar-radius) var(--avatar-radius);
}

.topbar-name {
  font-family: var(--text-name-family);
  font-size: var(--text-name-size);
  font-weight: var(--text-name-weight);
  line-height: var(--text-name-lh);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.topbar-home {
  display: inline-flex;
  align-items: center;
  gap: var(--topbar-item-gap);
  text-decoration: none;
  color: inherit;
  transition: opacity 150ms ease;
}

.topbar-home:hover {
  opacity: 0.7;
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: var(--meta-gap);
}

.meta-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  color: var(--color-text-meta);
}

.meta-label {
  font-family: var(--text-meta-family);
  font-size: var(--text-meta-size);
  font-weight: var(--text-meta-weight);
  line-height: var(--text-meta-lh);
  color: var(--color-text-meta);
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--topbar-right-gap);
}

.nav-link {
  font-family: var(--text-nav-family);
  font-size: var(--text-nav-size);
  font-weight: var(--text-nav-weight);
  line-height: var(--text-nav-lh);
  color: var(--color-text-primary);
  text-decoration: none;
}

/*.nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nav-link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}
*/
.btn-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-family: var(--text-btn-family);
  font-size: var(--text-btn-size);
  font-weight: var(--text-btn-weight);
  line-height: var(--text-btn-lh);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  /* tl + tr + bl — no br (speech-bubble corner) */
    border-radius: var(--btn-radius) var(--btn-radius) 0 var(--btn-radius);
  /*border-radius: var(--btn-radius) var(--btn-radius) 0 var(--btn-radius);*/
}

.about-cta-row .btn-contact {
     border-radius: 99px;
}

.btn-contact svg {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
}

/* Left arrow — hidden off the left edge until hover */
.btn-arrow-left {
  position: absolute;
  left: var(--btn-padding-x);
  top: 50%;
  transform: translate(-40px, -50%);
  opacity: 0;
  transition: transform 260ms ease-out, opacity 260ms ease-out;
}

/* Label — needs inline-block to accept transform */
.btn-text {
  display: inline-block;
  transition: transform 260ms ease-out;
}

/* Short label ("Contact") is desktop-hidden; swapped in on mobile */
.btn-label-short {
  display: none;
}

/* Right arrow — exits on hover */
.btn-arrow-right {
  transition: transform 260ms ease-out, opacity 260ms ease-out;
}

.btn-contact:hover .btn-arrow-left {
  transform: translate(0, -50%);
  opacity: 1;
}

.btn-contact:hover .btn-text {
  transform: translateX(26px);   /* 16px arrow + 10px gap */
}

.btn-contact:hover .btn-arrow-right {
  transform: translateX(28px);
  opacity: 0;
}

/* Current page — non-interactive, visually muted */
/*
.btn-contact[aria-current="page"] {
  opacity: 0.55;
  pointer-events: none;
}
*/

/* Light variant — same shape & hover behavior, light-grey fill + black text/arrows */
.btn-secondary {
  background: #ebebeb;
  color: #000;
}

/* =============================================================
   LAYOUT
   ============================================================= */

/* Offset for the fixed topbar so content doesn't start underneath it */
main {
  padding-top: var(--topbar-height);
}

/*
 * Two nested centered columns:
 *
 *  col-outer (986px) ── topbar content + full-width tile backgrounds
 *    └── col-inner (824px) ── intro text + frame region inside tiles
 *
 * At ≥1200px both are centered with auto margins, giving ~81px
 * breathing room on each side of the inner column within the outer.
 * At 800–1200px they collapse to the same 48px viewport padding (edges align).
 * At <800px col-outer has 0 padding (tiles full-bleed); intro keeps 24px.
 */

.col-outer {
  max-width: var(--col-outer-width);
  width: 100%;
  margin-inline: auto;
    padding-bottom: 100px;
}

.col-inner {
  max-width: var(--col-inner-width);
  width: 100%;
  margin-inline: auto;
}


/* =============================================================
   INTRO BLOCK
   ============================================================= */

.intro {
  display: flex;
  flex-direction: column;
  gap: var(--intro-inner-gap);
  padding: var(--intro-padding-top) var(--intro-padding-x) var(--intro-padding-bottom);
  /* tr + br + bl — no tl */
  border-radius: 0 var(--intro-radius) var(--intro-radius) var(--intro-radius);
}

.intro-headline-wrap {
  padding-right: 100px;
}

.intro-headline {
  font-family: var(--text-intro-family);
  font-size: var(--text-intro-size);
  font-weight: var(--text-intro-weight);
  line-height: var(--text-intro-lh);
  color: var(--color-text-primary);
}

.intro-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: var(--intro-text-width);
}

.intro-body p {
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  color: var(--color-text-primary);
}

/* Decorative underline on "Actively.ai" — matches Figma hand-drawn line */
.text-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* =============================================================
   ABOUT PAGE — long-form layout
   ============================================================= */

/* Section heading: Inter 500, between body (16px) and tagline (30px) */
.section-heading {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Column of sections; large gap creates clear visual chapter breaks */
.about-body {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: var(--intro-text-width);  /* same 571px as intro-body */
}

/* Matches .intro-body p — Georgia body copy inside about sections */
.about-body p {
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  color: var(--color-text-primary);
}

/* Tight column within each section: heading + body run close together */
.about-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Editorial list — bold lead-in paragraphs, no bullets */
.help-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Row of CTAs at the end of the about page — wraps on narrow viewports */
.about-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* =============================================================
   SHOWCASE
   ============================================================= */

.showcase {
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
}


/* =============================================================
   TILES
   ============================================================= */

.tile {
  /*
   * Internal layout vars in cqh units so they scale proportionally
   * as the tile grows or shrinks with the viewport.
   *
   * --tile-frame-h: frame height as % of tile height (70% = portrait fills ~70% of tile).
   *   Overridden to a width-based value for landscape frames (iPad, frameless) in step 4.
   * --tile-bump: how far the frame shifts up on hover (50px at 824px tile = 6.068cqh).
   * --tile-content-gap: gap between frame bottom and reveal text (32px at 824px = 3.883cqh).
   */
  --tile-frame-h:      70cqh;
  --tile-bump:         6.068cqh;
  --tile-content-gap:  3.883cqh;

  container-type: size;   /* enables cqh/cqw for children */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--col-inner-width);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--tile-radius);
  overflow: hidden;
}

.tile[data-company="instacart"] { background: var(--color-tile-instacart); }
.tile[data-company="lyft"]      { background: var(--color-tile-lyft); }
.tile[data-company="youtube"]   { background: var(--color-tile-youtube); }

/* Frame wrapper — flex-centered by default, bumps up on hover */
.tile-media-wrap {
  flex-shrink: 0;
  transition: transform var(--reveal-duration) var(--reveal-easing);
}

/*
 * Reveal text — absolutely positioned so it doesn't affect the
 * frame's centered layout in the default (non-hover) state.
 *
 * Derivation of `top`:
 *   tile center = 50%
 *   + frame_h/2         → bottom of centered frame
 *   + content-gap       → gap between frame and text
 *   - tile-bump         → shift up to match the frame's hover position
 *   = where reveal sits when the frame has bumped up
 *
 * Default state: hidden (opacity 0, shifted down 8px).
 * Hover-capable devices: revealed by @media (hover: hover) below.
 * Touch devices: always shown by @media (hover: none) below.
 */
.tile-reveal {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--reveal-title-gap);
  text-align: center;
  padding-inline: 40px;
  top: calc(50% + var(--tile-frame-h) / 2 + var(--tile-content-gap) - var(--tile-bump));
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition:
    opacity   var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  pointer-events: none;
}

.tile-title {
  font-family: var(--text-tile-title-family);
  font-size:   var(--text-tile-title-size);
  font-weight: var(--text-tile-title-weight);
  line-height: var(--text-tile-title-lh);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.tile-subtitle {
  font-family: var(--text-tile-sub-family);
  font-size:   var(--text-tile-sub-size);
  font-weight: var(--text-tile-sub-weight);
  line-height: var(--text-tile-sub-lh);
  color: var(--color-text-secondary);
  max-width: var(--reveal-subtitle-width);
}

/* =============================================================
   BREAKPOINTS
   ============================================================= */

/*
 * Gate hover behavior on pointer capability, not viewport width.
 * A narrow desktop browser still gets hover; a phone never does.
 */
@media (hover: hover) {
  .tile:hover .tile-media-wrap {
    transform: translateY(calc(-1 * var(--tile-bump)));
  }

  .tile:hover .tile-reveal {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: none) {
  .tile .tile-media-wrap {
    transform: translateY(calc(-1 * var(--tile-bump)));
  }

  .tile .tile-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: none;
    pointer-events: auto;
  }
}

/*
 * 800–1200px: outer and inner both collapse to 48px viewport padding.
 * The topbar also switches to 48px padding so all edges align.
 * This carries forward to <800px for the topbar (not overridden below).
 */
@media (max-width: 1200px) {
  .topbar {
    padding-inline: var(--page-padding-mid);
  }
  .topbar-inner {
    max-width: none;
  }
  .col-outer {
    max-width: none;
    padding-inline: var(--page-padding-mid);
  }
  .col-inner {
    /* max-width: none; — keep 824px at all sizes above 800px */
  }
}

/*
 * <800px (mobile): tiles full-bleed with tighter 28px side padding, logo text
 * hidden, buttons stripped of hover affordances, and project tiles restructured
 * into a natural vertical flow so the description sits below the visual instead
 * of being clipped by the fixed-square tile.
 */
@media (max-width: 800px) {

  /* --- Side padding: header + body content down to 28px --- */
  .col-outer {
    padding-inline: 0;         /* tiles stay full-bleed */
  }

  .topbar {
    padding-inline: 28px;
  }

  .intro {
    padding-inline: 28px;
  }

  /* --- Top bar --- */

  /* Logo shows the avatar only */
  .topbar-name {
    display: none;
  }

  /* Hide location + availability */
  .topbar-meta {
    display: none;
  }

  /* Swap contact button label: "Get in contact" → "Contact" */
  .btn-label-full  { display: none; }
  .btn-label-short { display: inline; }

  /* --- Buttons: no arrows, no tap animation (hover isn't real on touch) --- */
  .btn-contact .btn-arrow-left,
  .btn-contact .btn-arrow-right {
    display: none;
  }

  .btn-contact .btn-text,
  .btn-contact:hover .btn-text {
    transform: none;
  }

  /* --- Intro (home): headline full width, stepped down to 24px --- */
  .intro-headline-wrap {
    padding-right: 0;
  }

  .intro-headline {
    font-size: 24px;
  }

  /* --- Project tiles: stack visual on top, description below --- */

  .tile {
    /* The tile itself is now just a flow column; the media-wrap below carries
       the container context, so it grows naturally to fit the description. */
    container-type: normal;
    aspect-ratio: auto;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
    border-radius: 0;
    padding: 32px 0;           /* breathing room above the visual, below the text */
    --tile-bump: 0px;          /* no hover lift on touch */
  }

  /* Recreate the old square tile here as the query container, so every frame's
     cqh/cqw sizing — size, border, border-radius, bezels — resolves against a
     square (just as it does above 800px) and scales in correct aspect ratio.
     Full-bleed square = viewport width, so the frames keep shrinking smoothly
     across the 800px boundary instead of jumping to a viewport-height basis. */
  .tile-media-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Description flows below the visual — in-flow, always visible, not clipped */
  .tile-reveal {
    position: static;
    width: 100%;               /* span the tile so text wraps instead of overflowing */
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: 24px;
    padding-inline: 28px;
  }

  .tile-title {
    white-space: normal;
  }

  .tile-subtitle {
    max-width: 100%;           /* drop the 405px desktop cap so it wraps to the phone */
  }
}

/* Suppress forced line-breaks; let text reflow naturally on narrow viewports */
@media (max-width: 799px) {
  .br-desktop { display: none; }
}


/* =============================================================
   DEVICE FRAMES
   ============================================================= */

/* --- iPhone X --- */

.frame-iphone-x {
  position: relative;
  /* Height drives sizing for portrait frames; width follows via aspect-ratio */
  height: var(--tile-frame-h);
  width: auto;
  aspect-ratio: 268 / 579.567;  /* Figma: 268 × 579.567px */
  border: var(--frame-border-width) solid var(--color-frame-stroke);
  /* border-radius scales with tile: 31.685px / 824px * 100 = 3.845cqh */
  border-radius: 3.845cqh;
  box-shadow: var(--frame-shadow-strong);
  background: #000;
  overflow: hidden;
}

/*
 * Notch: centered pill at the top of the frame.
 * Dimensions in % are relative to the frame's own box, so they
 * scale automatically as the frame grows or shrinks.
 *   width:  158.625 / 268     = 59.2%
 *   height: 21.508  / 579.567 = 3.71%
 */
.frame-iphone-x::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 59.2%;
  height: 3.71%;
  background: var(--color-frame-stroke);
  border-radius: 0 0 12px 12px;
  z-index: 2;
  pointer-events: none;
}

.frame-iphone-x video,
.frame-iphone-x img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- iPhone 8 --- */

/*
 * Portrait frame — same height constraint (70cqh) as iPhone X.
 * Top and bottom hardware bars are ::before / ::after black overlays;
 * the media fills the full frame and the bars mask the edges.
 *   bar-h: 56.582 / 566.365 = 9.99%
 *   aspect-ratio: inner-w (254.798) / outer-h (566.365)
 *   border-radius: 31.685 / 566.365 × 70 = 3.92cqh
 */

.frame-iphone-8 {
  position: relative;
  height: var(--tile-frame-h);
  width: auto;
  aspect-ratio: 254.798 / 566.365;
  border: var(--frame-border-width) solid var(--color-frame-stroke);
  border-radius: 3.92cqh;
  background: #000;
  box-shadow: var(--frame-shadow-strong);
  overflow: hidden;
}

.frame-iphone-8::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9.99%;
  background: #000;
  z-index: 2;
  pointer-events: none;
}

.frame-iphone-8::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 9.99%;
  background: #000;
  z-index: 2;
  pointer-events: none;
}

.frame-iphone-8 video,
.frame-iphone-8 img {
  display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    top: 10.5%;
    position: relative;
}


/* --- iPad --- */

/*
 * Landscape frame — width-constrained (70cqw) instead of height-constrained.
 * Actual frame height: 70cqw × (400.02 / 635.015) = 44.10cqh (tile is square → cqw = cqh).
 * Override --tile-frame-h on the tile so .tile-reveal and bump math stay correct.
 *
 * Bezels via padding (all % values are relative to frame width in CSS):
 *   padding-x: 51.488 / 635.015 = 8.11%
 *   padding-y: 5.281 / 400.02 × (400.02/635.015) = 5.281/635.015 = 0.832% of frame-width
 *   border-radius: 31.685 / 635.015 × 70 = 3.49cqh
 */

.tile[data-frame="ipad"] {
  /* height = (100cqw − 108px) × (400.02 / 635.015) ≈ 63cqh − 68px */
  --tile-frame-h: calc(63cqh - 68px);
}

.frame-ipad {
  position: relative;
  width: calc(100cqw - 108px);  /* full inner width minus 54px margin each side */
  height: auto;
  aspect-ratio: 635.015 / 400.02;
  border: var(--frame-border-width) solid var(--color-frame-stroke);
  border-radius: 3.49cqh;
  background: #000;
  padding: 0.832% 8.11%;
  box-shadow: var(--frame-shadow-strong);
  overflow: hidden;
}

.frame-ipad video,
.frame-ipad img {
  display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
}

p a {
    color: var(--color-text-primary);
    font-style: normal;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    border-bottom: 2px solid #ddd;
}

p a:hover {
    border-color: #bbb;
}


/* --- Frameless --- */

/*
 * Landscape frame — width-constrained (70cqw), no bezel, no border.
 * Actual frame height: 70cqw × (331.688 / 590.128) = 39.35cqh.
 * Only a soft drop shadow and small radius to soften the corners.
 */

.tile[data-frame="frameless"] {
  --tile-frame-h: 39.35cqh;
}

.frame-frameless {
  position: relative;
  width: 70cqw;
  height: auto;
  aspect-ratio: 590.128 / 331.688;
  background: #000;
  border-radius: 6px;
  box-shadow: var(--frame-frameless-shadow);
  overflow: hidden;
}

.frame-frameless video,
.frame-frameless img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =============================================================
   TOOLTIP
   Pure CSS. Add data-tooltip="…" + tabindex="0" to any element.
   ============================================================= */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + var(--tooltip-gap));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-family: var(--font-sans);
  font-size: var(--tooltip-font-size);
  font-weight: 400;
  line-height: 1.4;
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  border-radius: var(--tooltip-radius);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tooltip-duration) ease;
  z-index: 200;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}


/* =============================================================
   MOBILE FRAME SIZING
   Placed after the frame definitions above so these width
   overrides win on equal specificity (later source wins).
   Each frame keeps its own aspect-ratio, so height follows width.
   ============================================================= */