/* Hallmark · shape: Product walk · genre: editorial · theme: brand · redesign: full · job: try
 * paper: oklch(96.8% 0.012 85) · accent: oklch(54.5% 0.165 33) · display: Secular One · body: Heebo
 * hero: Stage, head and actions beside a photo at full height · nav: edge-aligned wordmark and four section links · footer: one line with the credit · imagery: 1 photograph, 9 screenshots (own capture script) · signature: the order sentence, live on real catalog data
 * axes: light/grotesk-heavy/warm · posture: restrained, deep sea bands carry the mass · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a system page is easily generic; led with the shop's own order sentence and real captures */
/* Hallmark · reworded "מערכת הזמנות — מפת מסכים" to "מהטלפון של הלקוח עד המדף במקרר" · 19 names the dash and the owner asked for a page that presents the system */
/* Hallmark · reworded "לקוח · מובייל" to "לקוח" · 63 names the middle dot */
/* Hallmark · reworded "חנות · טאבלט" to "חנות" · 63 names the middle dot */
/* Hallmark · finish-review: subagent · fix · 8 findings · 7 resolved 1 unresolved (thermal tickets keep their printed marks) · gap: none */
/* Hallmark · reworded "דגי הנמל — בוטיק" to "דגי הנמל בוטיק" · 19 names the dash */
/* Hallmark · hero-review: none run · the hero was assessed in the finish review */
/* Hallmark · dismissed kept · index.html and the three app routes were recorded and compared as served URLs */
/* Hallmark · dismissed F4 · each screen has one coral primary, the sea fill is a queue step and green marks done */
:root {
  --text-display: clamp(3rem, 6.2vw, 5.5rem); --text-section: clamp(2.25rem, 4vw, 3.5rem); --text-title: var(--text-xl);
  --container: 1360px;
}
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; inset-inline-start: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.s-nav { background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.s-nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-sea); text-decoration: none; white-space: nowrap; }
.s-nav nav { display: flex; gap: var(--space-lg); }
.s-nav nav a { color: var(--color-ink); text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.s-nav nav a:hover { color: var(--color-accent-2); }

.s-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; min-height: calc(100dvh - 73px); max-height: 960px; padding-block: var(--space-lg); }
.s-hero h1 { text-wrap: balance; font-size: var(--text-display); max-width: 11ch; line-height: 1.04; color: var(--color-sea); }
.s-hero .lead { margin-top: var(--space-md); font-size: var(--text-xl); line-height: 1.4; max-width: 28ch; }
.s-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.s-hero-pic { position: relative; }
.photo { margin: 0; height: min(calc(100dvh - 145px), 760px); min-height: 440px; border-radius: var(--radius-card); }
.photo > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.s-order-line { position: absolute; z-index: var(--z-raised); inset-block-end: var(--space-lg); inset-inline-end: calc(-1 * var(--space-lg)); display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg); background: var(--color-sea); color: var(--color-on-sea); border-radius: var(--radius-card); }
.s-order-line .o-label { font-size: var(--text-sm); color: var(--color-on-sea-2); }
.s-order-line strong { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.2; }

.s-try { background: var(--color-sea); color: var(--color-on-sea); padding-block: var(--space-3xl); }
.s-try h2 { font-size: var(--text-section); max-width: 15ch; line-height: 1.08; }
.s-try-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.s-try .section-title { color: var(--color-on-sea-2); }
.s-try .stepper button:focus-visible, .s-try .chip:focus-visible { outline-color: var(--color-focus-on-sea); }
.s-try .stepper .val small { color: var(--color-on-sea-2); }
.s-try .stepper button:disabled { background: transparent; color: var(--color-on-sea-2); border-color: var(--color-on-sea-2); }
.s-try .chip.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.s-sentence #try-main { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.12; text-wrap: balance; max-width: 16ch; }
.s-sentence .s-sub { margin-top: var(--space-md); font-size: var(--text-2xl); font-weight: 700; }
.s-sentence .s-fine { margin-top: var(--space-sm); color: var(--color-on-sea-2); font-size: var(--text-lg); }

.s-phones { padding-block: var(--space-3xl); }
.s-phones h2, .s-team h2, .s-flow h2, .s-scope h2, .s-index h2 { font-size: var(--text-section); max-width: 20ch; line-height: 1.08; color: var(--color-sea); }
.s-phone-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.s-phone-row figure { margin: 0; }
.s-phone-row figcaption { margin-top: var(--space-sm); }
.shot { aspect-ratio: 780 / 1200; border-radius: var(--radius-card); border: 1px solid var(--color-rule); }
.shot > img { object-position: top; }
[data-slot="phone-2"] > img { object-position: 50% 80%; }
.shot.wide { aspect-ratio: 1770 / 1230; }

.s-flow { background: var(--color-paper-2); padding-block: var(--space-3xl); }
.s-table { width: 100%; border-collapse: collapse; margin-top: var(--space-xl); font-size: var(--text-lg); }
.s-table thead th { text-align: start; font-size: var(--text-md); font-weight: 700; color: var(--color-muted); padding-block: var(--space-xs); border-bottom: 2px solid var(--color-sea); white-space: nowrap; }
.s-table tbody th { text-align: start; font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--color-sea); white-space: nowrap; }
.s-table td, .s-table tbody th { padding-block: var(--space-sm); padding-inline-end: var(--space-lg); border-bottom: 1px solid var(--color-paper-3); vertical-align: baseline; }

.s-team { padding-block: var(--space-3xl); }
.s-tabs { display: flex; gap: var(--space-2xs); margin-block: var(--space-lg) var(--space-md); overflow-x: auto; scrollbar-width: none; }
.s-tabs button { min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: transparent; color: var(--color-ink); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.s-tabs button:hover { background: var(--color-sea-soft); }
.s-tabs button:active { transform: scale(.985); }
.s-tabs button[aria-selected="true"] { background: var(--color-sea); color: var(--color-on-sea); border-color: var(--color-sea); font-weight: 700; }
.s-cap { margin-top: var(--space-sm); font-size: var(--text-lg); }

.s-print { background: var(--color-sea); color: var(--color-on-sea); padding-block: var(--space-3xl); }
.s-print-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.s-print h2 { font-size: var(--text-section); max-width: 12ch; line-height: 1.08; }
.s-print-text p { margin-top: var(--space-md); font-size: var(--text-lg); color: var(--color-on-sea-2); max-width: 45ch; }
.s-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.ticket-shot { aspect-ratio: 544 / 702; border: 0; }
.ticket-shot.is-label { aspect-ratio: 544 / 368; }

.s-scope { padding-block: var(--space-3xl); }
.s-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-xl); }
.s-scope h3, .s-index h3 { font-size: var(--text-title); color: var(--color-sea); padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-sea); max-width: none; }
.s-scope ul { list-style: none; margin: 0; padding: 0; }
.s-scope li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-size: var(--text-lg); }

.s-index { background: var(--color-paper-2); padding-block: var(--space-3xl); }
.s-index-note { margin-top: var(--space-sm); font-size: var(--text-lg); }
.s-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-xl); }
.s-index-grid a { display: flex; align-items: center; min-height: 48px; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-paper-3); }
.s-index-grid a:hover { color: var(--color-accent-2); }

.s-foot { background: var(--color-sea); color: var(--color-on-sea-2); padding-block: var(--space-lg); font-size: var(--text-sm); }
.s-foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); }
.s-foot a { color: var(--color-on-sea); }
.s-foot a:focus-visible { outline-color: var(--color-focus-on-sea); }

@media (max-width: 60rem) {
  .s-nav nav a:not(:last-child) { display: none; }
  .s-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); min-height: 0; max-height: none; }
  .photo { height: 420px; min-height: 0; }
  .s-order-line { inset-inline: var(--space-sm); inset-block-end: var(--space-sm); }
  .s-order-line strong { font-size: var(--text-xl); }
  .s-try-in, .s-print-in, .s-scope-grid, .s-index-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .s-try-in > div:first-child { display: contents; }
  .s-try h2 { order: -2; }
  .s-try-in > .s-sentence { order: -1; }
  .s-phone-row { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; padding-bottom: var(--space-xs); }
  .s-try, .s-phones, .s-flow, .s-team, .s-print, .s-scope, .s-index { padding-block: var(--space-2xl); }
  .s-table { font-size: var(--text-md); }
  .s-tabs { flex-wrap: wrap; overflow-x: visible; }
  .s-table thead { display: none; }
  .s-table tr { display: block; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-paper-3); }
  .s-table td, .s-table tbody th { display: block; border: 0; padding: 0; }
  .s-table td:nth-child(2) { color: var(--color-muted); }
}
@media (max-width: 40rem) { .shot.wide { aspect-ratio: 4 / 5; } .shot.wide > img { object-position: right top; } }
@media (prefers-reduced-motion: reduce) { .s-tabs button:active { transform: none; } }