/* Portwell landing page. Layout follows DES-6 option A (show the evidence). Values come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html[data-motion="reduce"] { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); overflow-x: hidden; }
a { color: var(--teal); }
img { display: block; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 12px; }
h1 { font-size: clamp(34px, 6vw, 52px); letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 3.4vw, 30px); max-width: 30ch; }
h3, .h3 { font-size: 18px; }
p { margin: 0 0 12px; max-width: 66ch; }
code { font-family: var(--mono); font-size: .86em; background: var(--tint); padding: 1px 4px; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.nav { display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 5vw, 48px); background: var(--white); border-bottom: 1px solid var(--line); }
.wm { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }
.wm img { border-radius: 7px; }
.links { display: flex; gap: 20px; margin-left: auto; font-size: 14px; }
.links a { color: var(--ink-muted); text-decoration: none; }

/* Buttons: the one primary action is teal. Tap response is --motion-tap. */
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--teal); color: var(--white); font: 700 16px/1 var(--sans);
  border: 0; border-radius: 8px; padding: 15px 22px; text-decoration: none; cursor: pointer; min-height: 48px;
  transition: transform var(--motion-tap) var(--motion-tap-ease), filter var(--motion-tap) var(--motion-tap-ease); }
.btn:active { transform: scale(.97); filter: brightness(.92); }
html[data-motion="reduce"] .btn:active { transform: none; }
.lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); font-weight: 600; text-decoration: underline; cursor: pointer; }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 72px clamp(16px, 5vw, 48px) 64px; background: var(--white); }
.lead { font-size: 18px; margin-top: 18px; }
.hero .btn { margin-top: 12px; }
.small { font-size: 14px; color: var(--ink-muted); margin-top: 8px; }

.demo { font-weight: 700; letter-spacing: .04em; color: var(--amber); border: 1px solid var(--amber); border-radius: 5px; padding: 0 6px; font-size: 11px; white-space: nowrap; }
/* Hero sequence: notice, then the line it touches in your code, then the proposed diff, then the labels.
   It plays once on load (motion.js). Without JS or with Reduce Motion the final state shows at rest. */
.seq { margin: 0; display: grid; gap: 12px; min-width: 0; font-size: 13.5px; }
.nt, .code { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.nt { padding: 12px 14px; }
.nt b, .found { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-muted); }
.found { color: var(--teal); margin: 0; }
.code { overflow: hidden; font: 12.5px/1.8 var(--mono); }
.code-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--tint); border-bottom: 1px solid var(--line); font: 12px var(--sans); }
.ln { padding: 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ln.del { background: var(--risk-wash); color: var(--risk); }
.ln.add { background: var(--teal-wash); color: var(--teal); }
.labels { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.labels li { font: 700 12px/1.25 var(--sans); letter-spacing: .04em; padding: 4px 8px; border: 1px solid currentColor; border-radius: 4px; background: var(--white); }
.labels .ink { color: var(--ink); } .labels .amb { color: var(--amber); }
html.js .seq.play [data-beat], html.js .seq.play .ln.add { opacity: 0; transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-move) var(--motion-move-ease), transform var(--motion-move) var(--motion-move-ease), background-color var(--motion-move) var(--motion-move-ease); }
html.js .seq.play .ln.add { max-height: 0; transform: none; }
html.js .seq.play .ln.del { background: var(--amber-wash); color: var(--ink); box-shadow: inset 3px 0 var(--amber); }
html.js .seq.play.b1 [data-beat="1"], html.js .seq.play.b2 [data-beat="2"], html.js .seq.play.b4 [data-beat="4"] { opacity: 1; transform: none; }
html.js .seq.play.b3 .ln.del { background: var(--risk-wash); color: var(--risk); box-shadow: none; }
html.js .seq.play.b3 .ln.add { opacity: 1; max-height: 4em; transition: opacity var(--motion-move) var(--motion-move-ease), max-height var(--motion-move) var(--motion-move-ease); }
html.js .seq.play.b2 [data-beat="1"] { opacity: .45; }
html.js .seq.play.b4 [data-beat="1"] { opacity: 1; }
/* Border Beam (Magic UI pattern, ported to plain CSS; Desk pick B): a teal arc runs once round the diff card as the
   change appears. The ring is drawn by masking the padding box, so a padding of 0 hides it at start and end. */
@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.code { position: relative; }
html.js .seq.play.b3 .code::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 0;
  background: conic-gradient(from var(--beam-angle), transparent 0 70%, var(--teal-wash) 80%, var(--teal) 96%, transparent);
  -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--white) 0 0) content-box exclude, linear-gradient(var(--white) 0 0);
  animation: beam var(--motion-beam) var(--motion-move-ease) both; }
@keyframes beam { 10%, 85% { padding: var(--beam-width); } to { --beam-angle: 360deg; padding: 0; } }
html[data-motion="reduce"] .code::after { content: none; }

/* Number roll: a clipped column of digits slides to the target (motion.js builds it). */
.roll { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: top; }
.roll-col { display: block; transition: transform var(--motion-roll) var(--motion-move-ease); }
.roll-col span { display: block; height: 1.25em; }

.sec { padding: 56px clamp(16px, 5vw, 48px); border-top: 1px solid var(--line); }
.tinted { background: var(--paper); }
.cards, .steps, .plain { list-style: none; padding: 0; margin: 0; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cards li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.cards p, .steps p, .faq p { font-size: 15px; color: var(--ink-muted); margin: 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 3px solid var(--teal); padding-top: 14px; }
.steps li::before { content: counter(s); display: block; font-weight: 700; color: var(--teal); font-size: 14px; margin-bottom: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.plain li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.plain li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 2px; background: var(--ink-muted); }
.gap { background: var(--amber-wash); color: var(--amber); border: 1px dashed var(--amber); border-radius: 4px; padding: 0 4px; font-size: .92em; }

.signup { background: var(--teal-wash); }
.form { max-width: 560px; margin-top: 20px; }
.form label { display: block; font-weight: 700; margin-bottom: 6px; }
.field { display: flex; gap: 8px; }
.field input { flex: 1; min-width: 0; min-height: 48px; font: 16px var(--sans); color: var(--ink); padding: 0 14px; border: 1px solid var(--ink-muted); border-radius: 8px; background: var(--white); }
.privacy { font-size: 14px; color: var(--ink-muted); margin-top: 10px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* honeypot for bots; hidden from people and screen readers */
.status { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.status.err { color: var(--risk); }
.tick { width: 22px; height: 22px; flex: none; }
.tick path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw var(--motion-celebrate) var(--motion-move-ease) 1 forwards; }
html[data-motion="reduce"] .tick path { animation: none; stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.ft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 24px clamp(16px, 5vw, 48px); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); background: var(--white); }
.ft img { border-radius: 4px; }

/* Sheet: drag down to dismiss; it settles on a spring when released (motion.js). */
.sheet-scrim { position: fixed; inset: 0; background: rgba(21, 43, 60, .45); display: flex; align-items: flex-end; justify-content: center; z-index: 20;
  transition: opacity var(--motion-move) var(--motion-move-ease); }
.sheet-scrim[hidden] { display: none; }
html[data-motion="reduce"] .sheet-scrim { transition: opacity var(--motion-crossfade) linear; }
.sheet { background: var(--white); width: min(640px, 100%); max-height: 85vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 8px 24px 28px; touch-action: pan-y; }
.grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 6px auto 14px; cursor: grab; touch-action: none; }
.sheet-head { display: flex; align-items: center; gap: 10px; touch-action: none; }
.sheet-head h2 { margin: 0; }
.close { margin-left: auto; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink-muted); cursor: pointer; min-width: 44px; min-height: 44px; }
.sheet h3 { font-size: 15px; margin-top: 18px; }

/* Entrance and scroll reveal. Only applied once motion.js has run, so the page reads fully without JS. */
html.js [data-hero], html.js [data-reveal], html.js [data-stagger] > * { opacity: 0; transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-move) var(--motion-move-ease), transform var(--motion-move) var(--motion-move-ease); transition-delay: var(--delay, 0ms); }
html.js [data-stagger] > * { transition-duration: var(--motion-move-short); } /* M11: rise 280 ms */
html.js .in[data-hero], html.js .in[data-reveal], html.js [data-stagger] > .in { opacity: 1; transform: none; }
html.js[data-motion="reduce"] [data-hero], html.js[data-motion="reduce"] [data-reveal], html.js[data-motion="reduce"] [data-stagger] > * {
  transform: none; transition: opacity var(--motion-crossfade) linear; transition-delay: 0ms; }

@media (max-width: 900px) {
  .hero, .two, .faq { grid-template-columns: 1fr; }
  .cards, .steps { grid-template-columns: 1fr 1fr; }
  .hero { padding-top: 48px; gap: 32px; }
}
@media (max-width: 560px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .field { flex-direction: column; }
  .links { display: none; }
  .code { font-size: 11.5px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }