/* ALYSSIUN STORE v2: the About and Publish Now pages (sv-about.js, sv-publish.js).
 * Two pages that explain, so they are built from a few quiet pieces: a hero
 * with a framed screenshot, a numbered flow, glass panels, and lists of points.
 * Tokens only (LUX / NEO): thin display type, hairlines, frosted glass, small
 * radii, no pill shapes, no colour fills. Every picture that is not a real
 * screenshot is drawn here in SVG with the ink of the atmosphere. */

/* Drawn icons */
.st-ico { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.st-glyph { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--hair-2); border-radius: var(--sv-r-m); background: var(--sv-glass); color: var(--text); }
.st-lead { margin: 0; max-width: 60ch; color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; }
.st-section[id] { scroll-margin-top: 130px; }

/* Hero: words on one side, a framed screenshot on the other. */
.st-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(20px, 3.6vw, 56px); align-items: center;
  margin-top: clamp(14px, 2.4vw, 28px); padding: clamp(24px, 4.4vw, 60px); border: 1px solid var(--hair); border-radius: var(--sv-r-l); background: var(--banner); overflow: hidden; isolation: isolate; }
.st-hero .sv-hero-copy h1 { font-size: clamp(38px, 5.2vw, 72px); line-height: 1.02; }
.st-hero .sv-hero-copy p { max-width: 46ch; }
.st-hero .sv-hero-copy > * { animation: st-rise .7s var(--sv-ease) backwards; }
.st-hero .sv-hero-copy > :nth-child(2) { animation-delay: 70ms; }
.st-hero .sv-hero-copy > :nth-child(3) { animation-delay: 140ms; }
.st-hero .sv-hero-copy > :nth-child(n+4) { animation-delay: 210ms; }
.st-hero .st-figure { animation: st-rise .9s var(--sv-ease) 120ms backwards; }
.st-note { margin: 0; color: var(--muted); font-size: 13px; }
.st-rings { position: absolute; z-index: -1; left: -14%; bottom: -62%; width: min(72%, 780px); aspect-ratio: 1; pointer-events: none; opacity: .8; }
.st-rings circle { fill: none; stroke: var(--hair-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-rings g { transform-origin: 200px 200px; animation: st-spin 120s linear infinite; }
.st-rings g circle { stroke-dasharray: 2 9; }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-rise { from { opacity: 0; transform: translateY(14px); } }

/* A real screenshot in a glass frame. Until the picture is there (or if it is
 * missing) the frame shows a drawn outline of the same screen. */
.st-figure { margin: 0; min-width: 0; display: grid; gap: 10px; }
.st-frame { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--hair-2); border-radius: var(--sv-r-l); overflow: hidden; background: var(--void-2); box-shadow: var(--sv-shadow); }
.st-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, var(--sv-sheen), transparent 38%); mix-blend-mode: soft-light; }
.st-ph { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--hair-2); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.st-ph .f { fill: var(--glass); }
.st-ph .k { stroke: var(--muted); stroke-width: 1.4; }
.st-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.st-shot[hidden] { display: none; }
.st-figure figcaption { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* Children of a section come in one after another once it is on screen. */
.sv-reveal:not(.is-in) .st-stagger > * { opacity: 0; }
.sv-reveal.is-in .st-stagger > * { animation: st-rise .6s var(--sv-ease) backwards; }
.sv-reveal.is-in .st-stagger > :nth-child(2) { animation-delay: 70ms; }
.sv-reveal.is-in .st-stagger > :nth-child(3) { animation-delay: 140ms; }
.sv-reveal.is-in .st-stagger > :nth-child(4) { animation-delay: 210ms; }
.sv-reveal.is-in .st-stagger > :nth-child(5) { animation-delay: 280ms; }
.sv-reveal.is-in .st-stagger > :nth-child(n+6) { animation-delay: 350ms; }

/* The numbered flow. A column by default (phones, and beside a picture);
 * a line of steps joined by a hairline when there is room. */
.st-flow { list-style: none; margin: 0; padding: 0; display: grid; }
.st-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; padding-bottom: 24px; }
.st-step:last-child { padding-bottom: 0; }
.st-step::before { content: ""; position: absolute; left: 22px; top: 44px; bottom: 0; width: 1px; background: var(--hair-2); }
.st-step:last-child::before { display: none; }
.st-num { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--hair-2); border-radius: var(--sv-r-m); background: var(--sv-glass); color: var(--text); font-size: 17px; font-weight: 200;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.st-step-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-content: start; padding-top: 3px; }
.st-step-body .st-ico { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); margin-top: 4px; }
.st-step h3 { margin: 0; grid-column: 1; font-size: 17px; font-weight: 500; line-height: 1.3; }
.st-step p { margin: 0; grid-column: 1; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (min-width: 720px) {
  .st-flow:not(.is-col) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .st-flow:not(.is-col) .st-step { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 22px 0 0; align-content: start; }
  .st-flow:not(.is-col) .st-step::before { left: 44px; right: 0; top: 22px; bottom: auto; width: auto; height: 1px; display: block; }
  .st-flow:not(.is-col) .st-step:nth-child(3n)::before, .st-flow:not(.is-col) .st-step:last-child::before { display: none; }
  .st-flow:not(.is-col) .st-step-body { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0; }
  .st-flow:not(.is-col) .st-step-body .st-ico { grid-column: 1; grid-row: auto; margin: 0 0 4px; }
}
@media (min-width: 1120px) {
  .st-flow:not(.is-col) { grid-template-columns: repeat(var(--st-n, 6), minmax(0, 1fr)); }
  .st-flow:not(.is-col) .st-step:nth-child(3n)::before { display: block; }
  .st-flow:not(.is-col) .st-step:last-child::before { display: none; }
}

/* Glass panels: the five groups, the tiles, the problems, the closing pair. */
.st-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.st-grid > * { grid-column: span 2; }
.st-grid.is-five > :nth-child(-n+2), .st-grid.is-two > * { grid-column: span 3; }
.st-panel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: clamp(18px, 2.4vw, 30px); border: 1px solid var(--hair); border-radius: var(--sv-r-l); background: var(--sv-glass); overflow: hidden;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .32s var(--sv-ease), border-color .2s ease, box-shadow .32s var(--sv-ease), background .2s ease; }
@media (hover: hover) { .st-panel:hover { transform: translateY(-3px); border-color: var(--hair-2); box-shadow: var(--sv-shadow); background: var(--sv-glass-strong); } }
.st-panel h3 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 200; line-height: 1.12; letter-spacing: -.01em; }
.st-panel > p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.st-panel > .sv-btn, .st-panel > .st-wait { margin-top: auto; }
.st-panel > * { position: relative; }
/* The same drawing again, very large and faint, in the corner of a panel. */
.st-panel-art { position: absolute; right: -26px; top: -26px; width: 170px; height: 170px; pointer-events: none; fill: none; stroke: var(--hair-2); stroke-width: .5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: transform .8s var(--sv-ease); }
@media (hover: hover) { .st-panel:hover .st-panel-art { transform: rotate(-6deg) scale(1.06); } }
.st-panel.is-tile { gap: 12px; }
.st-panel.is-tile h3 { font-size: 20px; font-weight: 400; }
.st-panel.is-big { padding: clamp(24px, 3.6vw, 48px); gap: 16px; background: var(--banner); border-color: var(--hair-2); }
.st-panel.is-big h3 { font-size: clamp(28px, 3.6vw, 46px); }
.st-panel.is-big > p { font-size: clamp(15px, 1.5vw, 17px); max-width: 34ch; }
.st-panel.is-big .st-panel-art { width: 240px; height: 240px; }
.st-panel.is-soon { border-style: dashed; border-color: var(--hair-2); background: transparent; }
.st-panel.is-soon > h3, .st-panel.is-soon > p { max-width: 30ch; }
.st-panel.is-soon .st-panel-art { top: auto; bottom: -14px; right: -10px; }

/* "Problem" and "With the Store", one under the other. */
.st-pw { margin: 0; width: 100%; display: grid; gap: 12px; }
.st-pw div + div { padding-top: 12px; border-top: 1px solid var(--hair); }
.st-pw dt, .st-tag { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.st-pw dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.st-pw div:first-child dd { color: var(--muted); }
.st-quote { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--hair-2); }

/* Two halves: a picture and what it shows. */
.st-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 60px); align-items: center; }
.st-split.is-top { align-items: start; }
.st-split > * { min-width: 0; }
.st-copy { display: grid; gap: 16px; justify-items: start; }
.st-copy h2 { margin: 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 200; line-height: 1.08; letter-spacing: -.01em; }
.st-copy .sv-eyebrow { margin: 0; }

/* A list of points, each with a drawn mark. */
.st-points { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; }
.st-points li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-top: 1px solid var(--hair); }
.st-points li:last-child { border-bottom: 1px solid var(--hair); }
.st-points .st-ico { grid-row: 1 / span 2; margin-top: 1px; color: var(--text); }
.st-points strong { font-size: 16px; font-weight: 500; line-height: 1.35; }
.st-points span { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 1.5; }
.st-panel .st-points li:first-child { border-top: 0; padding-top: 0; }
.st-panel .st-points li:last-child { border-bottom: 0; padding-bottom: 0; }

/* The waitlist: a button, then a quiet line once you are on it. */
.st-wait { width: 100%; min-height: 52px; display: flex; align-items: center; }
.st-done { margin: 0; display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 15px; line-height: 1.45; animation: st-rise .5s var(--sv-ease) backwards; }
.st-done svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--sv-check); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-after { margin-top: clamp(18px, 2.6vw, 30px); }
.st-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1119px) {
  .st-grid.is-tiles > * { grid-column: span 3; }
  .st-panel-art { width: 120px; height: 120px; right: -18px; top: -18px; }
  .st-panel.is-big .st-panel-art { width: 150px; height: 150px; opacity: .55; }
}
@media (max-width: 899px) {
  .st-hero, .st-split { grid-template-columns: minmax(0, 1fr); }
  .st-rings { left: auto; right: -30%; bottom: auto; top: -18%; width: 90%; }
  .st-grid.is-five > * { grid-column: span 3; }
  .st-grid.is-five > :first-child { grid-column: span 6; }
  .st-grid.is-three > * { grid-column: span 6; }
  .st-split.is-picture-last > .st-figure { order: 2; }
}
@media (max-width: 639px) {
  .st-grid > *, .st-grid.is-five > *, .st-grid.is-five > :nth-child(-n+2), .st-grid.is-two > * { grid-column: span 6; }
  .st-grid.is-tiles > * { grid-column: span 3; }
  .st-panel.is-tile { padding: 16px 14px; }
  .st-panel.is-tile h3 { font-size: 17px; }
  .st-panel.is-tile > p { font-size: 13.5px; }
  .st-panel:not(.is-tile) > .sv-btn, .st-wait .sv-btn, .st-banner-actions, .st-banner-actions .sv-btn { width: 100%; }
}
@media (max-width: 539px) {
  .st-hero { margin-left: calc(var(--sv-pad) * -1); margin-right: calc(var(--sv-pad) * -1); border-left: 0; border-right: 0; border-radius: 0; padding: 26px var(--sv-pad) 28px; }
  .st-hero .sv-hero-copy h1 { font-size: clamp(34px, 10.4vw, 44px); }
  .st-hero .sv-btn { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .st-rings g, .st-hero .sv-hero-copy > *, .st-hero .st-figure, .sv-reveal.is-in .st-stagger > *, .st-done { animation: none; }
  .sv-reveal:not(.is-in) .st-stagger > * { opacity: 1; }
  .st-panel, .st-panel-art { transition: none; }
  .st-panel:hover, .st-panel:hover .st-panel-art { transform: none; }
}