/* ============================================================
   hero-sim.css — the homepage hero: a typed headline and the
   focused iOS 26 card beside it that acts out each phrase.
   Loaded after the landing CSS. It fits the square into the blue
   page's two-column hero (.arc-concept .hero-with-phone) in place
   of the phone video, and follows the page's light/dark theme
   (html[data-theme]). Driven by js/hero-sim.js.
   ============================================================ */

/* ---- headline: the page's h1 typography; the last line types out each use case in turn. The hidden
   sizers hold the height of the longest one so nothing below jumps while it types. The typed line
   always holds the whole phrase: what is typed, the caret, then the rest unseen (.hero-rest), so every
   line break is the finished phrase's from the first key and no typed word ever moves, left-aligned or
   centred. The caret takes no width and is no break opportunity (an inline, its bar drawn by ::after;
   js/hero-sim.js sets --hero-ascent, the font's ascent in em, to stand it on the baseline). A phrase's
   last two words stay together (a no-break space, held by .hero-keep), so no phrase ends on a lone
   word. */
.imsg-hero .hero-rotator { display: grid; }
.imsg-hero .hero-rotator > * { grid-area: 1 / 1; }
.imsg-hero .hero-sizer, .imsg-hero .hero-rest { visibility: hidden; }
.imsg-hero .hero-keep { white-space: nowrap; }
.imsg-hero .hero-caret { display: none; position: relative; }
.imsg-hero .hero-rotator.is-typing .hero-caret { display: inline; }
.imsg-hero .hero-caret::after {
  content: ""; position: absolute; left: .05em; top: calc(var(--hero-ascent, 1.04) * 1em - .82em);
  width: .06em; height: .92em; background: var(--imsg-blue); border-radius: 1px;
  animation: hero-caret 1s steps(1) infinite;
}
.imsg-hero .hero-rotator.is-keying .hero-caret::after { animation: none; }      /* solid while keys land, blinks at rest */
@keyframes hero-caret { 50% { opacity: 0; } }
[data-theme="dark"] .arc-concept .hero-with-sim .hero-caret::after { background: #69adff; }   /* = the dark iMessage blue */
/* small phones: "Use iMessage to" stays on one line over two lines of phrase */
@media (max-width: 400px) { .arc-concept .hero-with-sim h1 { font-size: clamp(32px, 10.6vw, 38px); } }

/* ---- fit: the square takes the phone's place. Desktop: copy and square side by side, vertically
   centred (the blue grid's align-items): 360 px up to 1125 px wide, then 32vw to 480 px; just above the
   breakpoint it gives way (to 300 px) so the phone field keeps 200 px. At the blue page's 900 px
   breakpoint the copy centres and the square sits close under the form, its content keeping to its
   top edge (the notifications stack down from the card's side inset; js/hero-sim.js keeps a card's
   top there), so the story starts right under the form; on phones it reaches into the hero's side
   padding so the card spans the form. */
@media not all and (max-width: 900px) {
  .arc-concept .hero-with-sim .imsg-container {
    grid-template-columns: minmax(0, 1fr) clamp(300px, max(32vw, min(360px, 100vw - 640px)), 480px);
    column-gap: clamp(40px, 100vw - 860px, 56px);
  }
  .arc-concept .hero-with-sim .hero-sim { width: 100%; margin: 0; }
  .arc-concept .hero-with-sim .hero-sub { text-wrap: pretty; }                   /* the narrower column: no lone last word */
}
@media (max-width: 900px) {
  .arc-concept .hero-with-sim .imsg-container { gap: 12px; }
  .arc-concept .hero-with-sim .hero-sim { width: min(100%, 400px); margin: 0 auto; }
  .arc-concept .hero-with-sim .hs-screen > .hs-notes { justify-content: flex-start; padding-top: calc(50% - 160 * var(--kT)); }
}
@media (max-width: 480px) {
  .arc-concept .hero-with-sim .hero-sim { width: min(100% + 32px, 400px); margin-inline: calc((100% - min(100% + 32px, 400px)) / 2); }
}

/* ---- the square: a focused iOS 26 card that acts out each headline phrase -------------------------
   One square stage, clear over the hero's wash (the notifications' wallpaper). Notification moments show the app's branded iOS
   notifications arriving in a stack centred in the square (under the form, from its top edge); conversation moments frame only that
   phrase's bubbles in a card, laid out in a 320 pt transcript that spans it. The platters are the
   card's width, scale and shadow, so a tapped one grows into the card. Every iOS size is in pt:
   calc(N * var(--kT)). Without JS or with reduced motion it rests on the offer notification. */
.imsg-hero .hero-sim {
  --kT: calc(90cqw / 320);
  --ios-bg: #FFFFFF; --ios-in: #E9E9EB; --ios-in-ink: #000000; --ios-meta: rgba(60, 60, 67, .6);
  --ios-note: #FFFFFF; --ios-note-ink: #000000; --ios-note-meta: rgba(60, 60, 67, .6);
  --ios-dot: #ABABAD; --ios-dot-hi: #808080; --blue-top: #5AABFF; --blue-bot: #0088FF;
  --edge: 0 0 0 1px rgba(16, 20, 32, .08), 0 2px 6px rgba(16, 20, 32, .06);       /* hairline + contact, */
  --rim: 0 0 transparent;                                                          /* the platter material's inner rim (dark) */
  --plate: var(--edge), 0 30px 70px -20px rgba(16, 20, 32, .28);                    /* + the soft lift: neutral on the blue-to-cream wash */
  position: relative; width: min(100%, 480px); aspect-ratio: 1 / 1; margin: 0 auto; justify-self: center;
  container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none; user-select: none;
}
/* phones: the card takes a little more of the square */
@media (max-width: 560px) { .imsg-hero .hero-sim { --kT: calc(94cqw / 320); } }
/* no container units (Safari < 16, Firefox < 110): approximate the stage; JS sets the exact values */
@supports not (width: 1cqw) {
  .imsg-hero .hero-sim { --kT: calc(clamp(300px, max(32vw, min(360px, 100vw - 640px)), 480px) * .9 / 320); }
  @media (max-width: 900px) { .imsg-hero .hero-sim { --kT: calc(min(100vw - 96px, 400px) * .9 / 320); } }
  @media (max-width: 560px) { .imsg-hero .hero-sim { --kT: calc(min(100vw - 72px, 400px) * .94 / 320); } }
  @media (max-width: 480px) { .imsg-hero .hero-sim { --kT: calc(min(100vw - 40px, 400px) * .94 / 320); } }
}
/* iOS dark mode: the thread is black with #262629 received bubbles and the dark balloon blues; the
   notifications are the dark platter material. Shadows vanish on dark, so every edge is a hairline. */
[data-theme="dark"] .imsg-hero .hero-sim {
  --ios-bg: #000000; --ios-in: #262629; --ios-in-ink: #FFFFFF; --ios-meta: #8D8D92;
  --ios-note: #2C2C2E; --ios-note-ink: #FFFFFF; --ios-note-meta: rgba(235, 235, 245, .6);
  --ios-dot: #5E5E63; --ios-dot-hi: #98989D; --blue-top: #409CFF; --blue-bot: #0091FF;
  --edge: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .35);
  --rim: inset 0 0 0 1px rgba(255, 255, 255, .1);                                  /* the material's lit rim (static.md), so a platter lifts off the dark wash */
  --plate: var(--edge), 0 28px 64px -12px rgba(0, 0, 0, .7);
}

/* layers: the card is a clip-path over a stage-sized layer; the plate carries its shadow and moves by
   translate, never left/top, so it is not a layout shift. Notifications sit over both. */
.hero-sim .hs-screen { position: absolute; inset: 0; isolation: isolate; }
.hero-sim .hs-plate {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: calc(32 * var(--kT)); box-shadow: var(--plate);
}
.hero-sim[data-shot="notes"] .hs-plate { visibility: hidden; }
.hero-sim .hs-chat {                                                              /* JS sets the clip before showing it */
  position: absolute; inset: 0; z-index: 2; overflow: hidden; contain: strict; background: var(--ios-bg); color: var(--ios-in-ink);
}
.hero-sim .hs-chat[hidden] { display: none; }

/* notifications: iOS platters (hero-lockscreen.png geometry, measured @3x) at the card's width, scale
   and shadow, in a stack centred in the square (stacked under the form, down from its top), newest on top. The newest (first) is drawn in front,
   as on iOS. All sit over the card unless JS tucks them under (an open). The stack is lit as one:
   every platter has the hairline and contact shadow, and only the oldest (bottom, drawn behind the
   rest) casts the soft lift, so no platter shades the one below it. A lone platter is the card's plate
   exactly; a pressed one takes the lift as the others fall away, and hands it to the card. */
.hero-sim .hs-screen > .hs-notes {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: calc(8 * var(--kT));
}
.hero-sim .hs-note {
  position: relative; z-index: 3; box-sizing: border-box; width: calc(320 * var(--kT)); min-height: calc(66 * var(--kT));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title time" "body body";
  align-items: baseline; align-content: center; column-gap: calc(8 * var(--kT));
  padding: calc(11 * var(--kT)) calc(17.5 * var(--kT)) calc(13.67 * var(--kT)) calc(63.5 * var(--kT));
  border-radius: calc(23 * var(--kT)); background: var(--ios-note); box-shadow: var(--rim), var(--edge);
  color: var(--ios-note-ink); font-size: calc(15 * var(--kT)); line-height: calc(18 * var(--kT)); font-weight: 400;
  font-variation-settings: "opsz" 15; letter-spacing: var(--hs-track-note, normal);   /* 15 pt's cut and spacing at any size (JS) */
  transition: box-shadow 90ms cubic-bezier(0, 0, .58, 1);
}
.hero-sim .hs-note:last-child { z-index: 2; }
.hero-sim .hs-note:first-child { z-index: 4; }
.hero-sim .hs-note:last-child, .hero-sim .hs-note.is-pressed { box-shadow: var(--rim), var(--plate); }
.hero-sim .hs-note::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity 90ms cubic-bezier(0, 0, .58, 1); }
.hero-sim .hs-note.is-pressed::after { opacity: .06; }
.hero-sim .hs-note.is-under { z-index: 1; }                                     /* the card grows over it */
.hero-sim .hs-note.is-open { background: none; box-shadow: none; transition: none; }   /* tapped: the card under it takes over */
.hero-sim .hs-note.is-open::after { opacity: 0; transition: none; }             /* the press tint goes with it, at once */
.hero-sim .hs-note-title { grid-area: title; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-sim .hs-note-time { grid-area: time; position: relative; top: calc(-2.67 * var(--kT)); font-size: calc(13 * var(--kT)); color: var(--ios-note-meta); }
.hero-sim .hs-note-body { grid-area: body; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-wrap: pretty; }
.hero-sim .hs-logo { position: absolute; left: calc(14 * var(--kT)); top: 50%; width: calc(38 * var(--kT)); height: calc(38 * var(--kT)); margin-top: calc(-19 * var(--kT)); border-radius: 50%; background: #000; }
.hero-sim .hs-logo img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.2; clip-path: circle(41.667%); }   /* the pear fills the circle; the icon's corner marks fall outside it */
.hero-sim .hs-logo::after {                                                      /* Messages app badge: 16 pt, 3 pt past the photo */
  content: ""; position: absolute; right: calc(-3 * var(--kT)); bottom: calc(-3 * var(--kT));
  width: calc(16 * var(--kT)); height: calc(16 * var(--kT)); border-radius: calc(3.6 * var(--kT));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='b' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FAFDFA'/%3E%3Cstop offset='1' stop-color='%23BCE6BD'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23b)' d='M12 5c-4.4 0-8 2.9-8 6.5 0 2 1.1 3.8 2.9 5l-.6 2.6 3-1.5c.9.3 1.8.4 2.7.4 4.4 0 8-2.9 8-6.5S16.4 5 12 5z'/%3E%3C/svg%3E") center / calc(17 * var(--kT)) no-repeat,
    linear-gradient(#8EE27E, #74D46A 50%, #5DBF56);                                 /* iOS 26's softer green, hero-lockscreen.png */
}

/* thread: a 320 pt Messages transcript; the card frames only this phrase's rows. Its layout top is
   pinned at the stage top and JS translates it so its bottom rests on the phrase's floor (the bottom
   edge that centres the phrase's payoff card): appending a row moves no laid-out box. Text keeps the
   17 pt optical size (SF Text, not SF Display) at any stage size; JS sets --hs-track so lines break
   where they would at 17 pt. */
.hero-sim .hs-msgs {
  position: absolute; left: 50%; top: 0; box-sizing: border-box;
  width: calc(320 * var(--kT)); margin-left: calc(-160 * var(--kT));
  padding: calc(14 * var(--kT)) calc(16 * var(--kT)) calc(16 * var(--kT)) calc(15.83 * var(--kT));
  display: flex; flex-direction: column;
  font-size: calc(17 * var(--kT)); line-height: calc(20 * var(--kT)); font-weight: 400;
  font-variation-settings: "opsz" 17;
}
/* iOS 26 scroll-edge fade along the card's top edge (JS keeps it on the edge): rows cropped by a short
   card, or leaving through the top, soften instead of being cut */
.hero-sim .hs-edge { position: absolute; left: 0; right: 0; top: 0; height: calc(14 * var(--kT)); background: linear-gradient(var(--ios-bg) 20%, transparent); }
.hero-sim .hs-msgs > * { flex: none; margin: 0; }
.hero-sim .hs-msgs > * + * { margin-top: calc(10 * var(--kT)); }                 /* sender change, after a receipt */
.hero-sim .hs-msgs .chat-in + .chat-in, .hero-sim .hs-msgs .chat-out + .chat-out { margin-top: calc(4 * var(--kT)); }
.hero-sim .hs-msgs .hs-stamp + * { margin-top: 0; }
.hero-sim .hs-msgs .hs-receipt { margin-top: calc(6.1 * var(--kT)); }            /* cap-top 9 pt below the bubble */
.hero-sim .hs-msgs .chat-bubble.is-reacted { margin-top: calc(38 * var(--kT)); } /* measured, reactions.jpg */
.hero-sim .hs-stamp, .hero-sim .hs-receipt {                                     /* 11 / 13 pt, never under 9.5 px */
  font-size: max(9.5px, calc(11 * var(--kT))); line-height: max(11.2px, calc(13 * var(--kT))); color: var(--ios-meta);
  font-variation-settings: "opsz" 11; letter-spacing: var(--hs-track-meta, normal);  /* the caption's cut and spacing (JS) */
}
.hero-sim .hs-stamp { align-self: center; margin-bottom: calc(7.5 * var(--kT)); text-align: center; }
.hero-sim .hs-stamp b, .hero-sim .hs-receipt b { font-weight: 600; }
.hero-sim .hs-receipt { align-self: flex-end; margin-right: calc(21.2 * var(--kT)); }
.hero-sim .hs-msgs .chat-bubble {                                                 /* overrides the page's generic .chat-bubble */
  position: relative; z-index: 1; box-sizing: border-box;                            /* over any stamp or receipt it glides past */
  max-width: calc(223.4 * var(--kT));                                               /* 69.8 % of 320 pt */
  padding: calc(10.15 * var(--kT)) calc(13.5 * var(--kT)); border: 0; border-radius: calc(20.5 * var(--kT));
  font-size: inherit; line-height: inherit; letter-spacing: var(--hs-track, normal); box-shadow: none; overflow-wrap: break-word;
  text-wrap: pretty;                                                                /* no one-word last line in a wider fallback font */
}
.hero-sim .hs-msgs .chat-in { align-self: flex-start; background: var(--ios-in); color: var(--ios-in-ink); transform-origin: 0 100%; }
.hero-sim .hs-msgs .chat-out { align-self: flex-end; background: var(--fill, #0A8CFE); color: #fff; }
/* iOS 26 hook tail (static.md fit), only on the last bubble of a run */
.hero-sim .hs-tail { position: absolute; bottom: calc(-7.1 * var(--kT)); width: calc(21.5 * var(--kT)); height: calc(11.6 * var(--kT)); fill: currentColor; overflow: visible; opacity: 0; transition: opacity 120ms cubic-bezier(0, 0, .58, 1); }
.hero-sim .chat-out .hs-tail { right: 0; color: var(--fill, #0A8CFE); }
.hero-sim .chat-in .hs-tail { left: 0; transform: scaleX(-1); color: var(--ios-in); }
.hero-sim .has-tail > .hs-tail { opacity: 1; }
/* typing indicator (iOS 26, web.md measured) */
.hero-sim .hs-msgs .chat-typing {                                                  /* bottom margin: the thought circles hang 7.75 pt lower */
  width: calc(60 * var(--kT)); height: calc(35 * var(--kT)); margin-bottom: calc(7.75 * var(--kT));
  padding: 0; background: none; border-radius: 0; overflow: visible;
}
.hero-sim .chat-typing .hs-pill { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(4 * var(--kT)); padding-left: calc(12 * var(--kT)); border-radius: calc(17.5 * var(--kT)); background: var(--ios-in); transform-origin: 0 100%; }
.hero-sim .chat-typing i { flex: none; display: block; width: calc(9 * var(--kT)); height: calc(9 * var(--kT)); border-radius: 50%; background: var(--ios-dot); opacity: 1; transform: none; animation: hs-typing 1.2s ease-in-out infinite; }
.hero-sim .chat-typing i:nth-child(2) { animation-delay: .2s; }
.hero-sim .chat-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes hs-typing { 0%, 60%, 100% { background-color: var(--ios-dot); } 30% { background-color: var(--ios-dot-hi); } }
.hero-sim .chat-typing b { position: absolute; border-radius: 50%; background: var(--ios-in); }
.hero-sim .chat-typing .hs-think1 { left: calc(-.75 * var(--kT)); top: calc(30.25 * var(--kT)); width: calc(12.5 * var(--kT)); height: calc(12.5 * var(--kT)); }
.hero-sim .chat-typing .hs-think2 { left: calc(-5.15 * var(--kT)); top: calc(37.25 * var(--kT)); width: calc(5.5 * var(--kT)); height: calc(5.5 * var(--kT)); }
.hero-sim .hs-msgs .chat-typing.is-ghost { position: absolute; left: calc(15.83 * var(--kT)); margin: 0; }
.hero-sim .chat-typing.is-ghost i { visibility: hidden; }                         /* its dots never share a frame with the text */
.hero-sim .hs-msgs > .is-ghost + * { margin-top: 0; }                            /* the ghost sits first, out of flow */
/* tapback: 34 pt badge + two trailing dots, one unit (reactions.jpg); overlaps the bubble's top-trailing corner */
.hero-sim .hs-msgs .chat-tapback {
  position: absolute; z-index: 1; right: calc(-14 * var(--kT)); top: calc(-27.3 * var(--kT));
  width: calc(34 * var(--kT)); height: calc(34 * var(--kT)); border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--badge); color: #fff;
  box-shadow: 0 0 0 calc(.6 * var(--kT)) var(--ios-bg); transform-origin: 58.8% 80.3%;   /* = the bubble's corner */
  font-size: calc(22 * var(--kT)); line-height: 1;
}
.hero-sim .chat-tapback::before, .hero-sim .chat-tapback::after { content: ""; position: absolute; border-radius: 50%; background: var(--badge); }
.hero-sim .chat-tapback::before { left: calc(22.86 * var(--kT)); top: calc(26.99 * var(--kT)); width: calc(10.2 * var(--kT)); height: calc(10.2 * var(--kT)); }
.hero-sim .chat-tapback::after { left: calc(31.69 * var(--kT)); top: calc(37.7 * var(--kT)); width: calc(5.2 * var(--kT)); height: calc(5.2 * var(--kT)); }
.hero-sim .chat-tapback.is-theirs { --badge: var(--ios-in); }
.hero-sim .chat-tapback.is-mine { --badge: var(--fill, #0A8CFE); }
.hero-sim .chat-tapback svg { width: calc(26 * var(--kT)); height: calc(26 * var(--kT)); fill: #fff; }
.hero-sim .chat-tapback > * { position: relative; z-index: 1; }
/* the business's ‼️: Apple's glossy red emphasize glyph (reactions.jpg), drawn by js/hero-sim.js */
.hero-sim .chat-tapback .hs-bang { width: 100%; height: 100%; }
.hero-sim .hs-bang g { transform-box: fill-box; transform-origin: 50% 100%; }

/* Phones and tablets: the headline (and its YC pill), then the phone-number form, then the square.
   The copy column dissolves into the hero's grid so its children can be ordered around it. */
@media (max-width: 900px) {
  .arc-concept .hero-with-sim .hero-copy { display: contents; }
  .arc-concept .hero-with-sim h1 { order: 1; }
  .arc-concept .hero-with-sim .hero-yc { order: 2; justify-self: center; margin-top: 6px; }
  .arc-concept .hero-with-sim .demo-card { order: 3; margin-top: 0; }
  .arc-concept .hero-with-sim .hero-sim { order: 4; }
}