/* Journaliso landing page: approved product composition;
Journaliso's red and system typography. */
:root {
  color-scheme:light dark;
  --page:#f8f7f5;
  --ink:#252522;
  --muted:#696762;
  --line:#dedcd7;
  --panel:#20211f;
  --panel-ink:#faf9f6;
  --panel-muted:#bcbdb7;
  --red:#e11d22;
  --red-soft:#ff6c69;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit
}
img,svg {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  text-wrap:balance
}
p {
  text-wrap:pretty
}
a:focus-visible,select:focus-visible {
  outline:3px solid var(--red-soft);
  outline-offset:6px
}
.wrap {
  width:min(1280px,calc(100% - 80px));
  margin-inline:auto
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:104px;
  padding:12px 8px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:21px;
  font-weight:650;
  letter-spacing:-.7px;
  min-height:44px
}
.brand img {
  border-radius:9px
}
.skip-link {
  position:absolute;
  z-index:10;
  left:20px;
  top:10px;
  padding:12px;
  background:var(--ink);
  color:var(--page);
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:none
}
.hero {
  position:relative;
  display:grid;
  grid-template-columns:1.03fr 1fr;
  isolation:isolate;
  min-height:690px;
  border-radius:calc(30px * var(--preview-radius,1));
  background:var(--panel);
  color:var(--panel-ink);
  overflow:hidden
}
.hero-copy {
  position:relative;
  z-index:2;
  padding:66px 0 44px 58px;
  min-width:0
}
h1 {
  margin-top:0;
  font-size:calc(clamp(42px,4.4vw,64px) * var(--preview-type,1));
  font-weight:560;
  line-height:1.04;
  letter-spacing:-3.1px
}
h1 span {
  color:var(--panel-muted)
}
.lede {
  margin:24px 0 0;
  padding-left:1.25em;
  font-size:18px;
  line-height:1.6;
  color:#d0d1cb;
  max-width:34ch
}
.lede li + li {
  margin-top:8px
}
.lede li::marker {
  color:var(--panel-muted)
}
.download {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:13px
}
.hero .download {
  margin-top:calc(38px * var(--preview-spacing,1))
}
.download-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:58px;
  border-radius:12px;
  padding:16px 21px;
  background:#faf9f6;
  color:#20211f;
  text-decoration:none;
  font-size:15px;
  font-weight:650;
  transition:background var(--preview-duration,180ms),transform var(--preview-duration,180ms)
}
.download-button svg {
  height:21px;
  width:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.download-button:hover {
  background:#e5e3de;
  transform:translateY(calc(-1 * var(--preview-lift,2px)))
}
.download-button:active {
  transform:translateY(0)
}
.download-note {
  font-size:12px;
  line-height:1.6;
  color:var(--panel-muted);
  max-width:42ch
}
.product-stage {
  --detail-width:286px;
  --detail-inset:45px;
  position:relative;
  min-width:0;
  align-self:stretch
}
.product-stage:before {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(ellipse,#73736c35,transparent 68%);
  top:80px;
  left:-90px
}
.phone {
  position:absolute;
  /* One device geometry; screen content uses the same unit at every width. */
  --phone-width:286px;
  --phone-unit:calc(var(--phone-width) / 286);
  width:var(--phone-width);
  height:calc(var(--phone-width) * 1565 / 720);
  background:#fff;
  border:calc(6 * var(--phone-unit)) solid #494a46;
  border-radius:calc(43 * var(--phone-unit));
  color:#1d1d1f;
  box-shadow:0 24px 50px #0005;
  overflow:hidden
}
.phone-back {
  /* Follow the detail phone, but keep clear of the copy on narrow desktops. */
  left:max(20px,calc(100% - var(--detail-inset) - var(--detail-width) * .85 - var(--phone-width)));
  bottom:36px;
  z-index:1;
  transform:rotate(calc(-8deg * var(--preview-tilt,1))) scale(var(--preview-phones,1));
  --phone-width:calc(var(--detail-width) * 261 / 286);
  border-color:#676963
}
.journal-preview {
  /* Reserve the bottom capture area, like a clipped app viewport. */
  height:calc(100% - 116 * var(--phone-unit));
  overflow:hidden;
  padding:calc(15 * var(--phone-unit)) calc(14 * var(--phone-unit)) calc(50 * var(--phone-unit));
}
.journal-preview h2 {
  font-size:calc(25 * var(--phone-unit));
  line-height:1.15;
  letter-spacing:calc(-.9 * var(--phone-unit));
  font-weight:700;
}
.journal-filters {
  display:flex;
  gap:calc(4 * var(--phone-unit));
  margin-top:calc(14 * var(--phone-unit));
  white-space:nowrap;
}
.journal-filters span {
  padding:calc(4 * var(--phone-unit)) calc(7 * var(--phone-unit));
  background:#f0f0ee;
  border-radius:calc(12 * var(--phone-unit));
  color:#676861;
  font-size:calc(8 * var(--phone-unit));
}
.journal-filters .is-active {
  background:#20211f;
  color:#fff;
}
.journal-count {
  margin:calc(19 * var(--phone-unit)) 0 calc(9 * var(--phone-unit));
  color:#777870;
  font-size:calc(9 * var(--phone-unit));
}
.journal-row {
  padding:calc(10 * var(--phone-unit)) calc(4 * var(--phone-unit));
  border-bottom:calc(1 * var(--phone-unit)) solid #e8e8e4;
}
.journal-row.is-selected {
  background:#f8e9e7;
  border:0;
  border-radius:calc(9 * var(--phone-unit));
  padding-inline:calc(8 * var(--phone-unit));
  margin-inline:calc(-4 * var(--phone-unit));
}
.journal-date {
  color:#777870;
  font-size:calc(7 * var(--phone-unit));
}
.journal-row h3 {
  font-size:calc(11 * var(--phone-unit));
  line-height:1.4;
  margin-top:calc(3 * var(--phone-unit));
  letter-spacing:calc(-.15 * var(--phone-unit));
  white-space:nowrap;
}
.journal-excerpt {
  font-size:calc(8 * var(--phone-unit));
  line-height:1.5;
  color:#70716b;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  margin-top:calc(3 * var(--phone-unit));
}
.journal-row-meta {
  display:flex;
  justify-content:space-between;
  margin-top:calc(5 * var(--phone-unit));
  font-size:calc(7 * var(--phone-unit));
  color:#73746e;
  font-variant-numeric:tabular-nums;
}
.journal-row-meta span:first-child {
  background:#ecece7;
  border-radius:calc(7 * var(--phone-unit));
  padding:calc(2 * var(--phone-unit)) calc(5 * var(--phone-unit));
}
.journal-capture {
  position:absolute;
  bottom:calc(20 * var(--phone-unit));
  right:calc(12 * var(--phone-unit));
  width:calc(39 * var(--phone-unit));
  height:calc(39 * var(--phone-unit));
  padding:calc(4 * var(--phone-unit));
  border:calc(1 * var(--phone-unit)) solid #d9d9d3;
  border-radius:50%;
  background:#fff;
  box-shadow:0 calc(2 * var(--phone-unit)) calc(8 * var(--phone-unit)) #0002;
}
.journal-capture span {
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--red);
}
.phone-front {
  --phone-width:var(--detail-width);
  right:var(--detail-inset);
  top:36px;
  transform:rotate(calc(7deg * var(--preview-tilt,1))) scale(var(--preview-phones,1))
}
.phone-status {
  height:calc(44 * var(--phone-unit));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(20 * var(--phone-unit));
  font-size:calc(11 * var(--phone-unit));
  font-weight:650
}
.phone-island {
  width:calc(77 * var(--phone-unit));
  height:calc(21 * var(--phone-unit));
  border-radius:calc(30 * var(--phone-unit));
  background:#171816
}
.entry-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(7 * var(--phone-unit)) calc(19 * var(--phone-unit));
  color:#5e5f5a;
  font-size:calc(20 * var(--phone-unit))
}
.entry-top span:first-child {
  font-size:calc(32 * var(--phone-unit));
  line-height:1
}
.entry-content {
  padding:calc(24 * var(--phone-unit)) calc(20 * var(--phone-unit)) calc(43 * var(--phone-unit))
}
.entry-date {
  font-size:calc(10 * var(--phone-unit));
  color:#72736c
}
.entry-content h2 {
  font-size:calc(30 * var(--phone-unit));
  line-height:1.05;
  letter-spacing:calc(-1.15 * var(--phone-unit));
  margin-top:calc(13 * var(--phone-unit));
  font-weight:650
}
.entry-tag {
  display:inline-block;
  margin-top:calc(15 * var(--phone-unit));
  padding:calc(5 * var(--phone-unit)) calc(10 * var(--phone-unit));
  border-radius:calc(15 * var(--phone-unit));
  font-size:calc(10 * var(--phone-unit));
  background:#f1f0ed;
  color:#70716b
}
.entry-distance { margin-left:calc(4 * var(--phone-unit)) }
.entry-distance svg {
  display:inline-block;
  width:calc(9 * var(--phone-unit));
  height:calc(12 * var(--phone-unit));
  margin-right:calc(4 * var(--phone-unit));
  vertical-align:calc(-2 * var(--phone-unit));
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.audio-preview {
  display:flex;
  align-items:center;
  gap:calc(9 * var(--phone-unit));
  margin:calc(26 * var(--phone-unit)) calc(-6 * var(--phone-unit)) calc(28 * var(--phone-unit));
  padding:calc(15 * var(--phone-unit)) calc(10 * var(--phone-unit));
  background:#f2f2f0;
  border-radius:calc(15 * var(--phone-unit))
}
.play-symbol {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:calc(29 * var(--phone-unit));
  height:calc(29 * var(--phone-unit));
  border-radius:50%;
  background:#20211f;
  color:white;
  font-size:calc(10 * var(--phone-unit));
  padding-left:calc(2 * var(--phone-unit))
}
.waveform {
  width:calc(125 * var(--phone-unit));
  height:calc(35 * var(--phone-unit));
  fill:none;
  stroke:var(--red);
  stroke-width:2.5;
  stroke-linecap:round
}
.audio-time {
  font-size:calc(9 * var(--phone-unit));
  color:#666;
  font-variant-numeric:tabular-nums
}
.transcript-label {
  font-size:calc(10 * var(--phone-unit));
  font-weight:600;
  color:#75766f;
  margin-bottom:calc(14 * var(--phone-unit))
}
.transcript {
  font-size:calc(12 * var(--phone-unit));
  line-height:1.7;
  margin-top:calc(12 * var(--phone-unit));
  color:#54554f
}
.transcript span {
  color:#22231f;
  background:#f7e5e2;
  box-shadow:calc(3 * var(--phone-unit)) 0 #f7e5e2,calc(-3 * var(--phone-unit)) 0 #f7e5e2
}
.home-indicator {
  position:absolute;
  bottom:calc(8 * var(--phone-unit));
  left:50%;
  transform:translateX(-50%);
  height:calc(4 * var(--phone-unit));
  width:calc(90 * var(--phone-unit));
  border-radius:calc(10 * var(--phone-unit));
  background:#20211f
}
/* Polar reference: quiet cards, short copy, white geometric outlines. */
.story { padding:104px 0 76px }
.story-intro { padding:0 36px; margin-bottom:48px }
.story h2 {
  font-size:clamp(34px,3.7vw,48px);
  letter-spacing:-1.7px;
  line-height:1.12;
  font-weight:550;
  margin:0;
  text-wrap:initial;
}
.story h2 span { color:var(--muted) }
.story-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;
  padding:0;
  margin:0;
  gap:10px;
}
.story-step {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#191a18;
  color:#f2f2ed;
  border:1px solid #30322d;
  border-radius:4px;
  overflow:hidden;
}
.step-copy { flex:1; padding:28px 28px 0 }
.story h3 { font-size:19px; line-height:1.3; font-weight:550; letter-spacing:-.3px }
.story h3::after { content:""; display:block; width:24px; height:1px; background:#55574f; margin-top:17px }
.step-copy > p { font-size:14px; line-height:1.6; color:#b4b5ad; margin-top:16px; text-wrap:wrap; min-height:45px }
.step-copy strong { font-weight:700 }
.workflow-visual {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  margin-top:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  overflow:visible;
}
.capture-lid { transform-origin:112px 72px }
.capture-ball,.pong-ball { fill:currentColor; stroke:none }
.organize-tile { transform-box:fill-box; transform-origin:center }
.pong-net { stroke:#4b4d45; stroke-dasharray:2 7 }
.pong-left,.pong-right { stroke-width:2; stroke-linecap:round }
.story-controls { display:flex; justify-content:flex-end; min-height:52px; padding-top:8px }
.motion-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 10px;
  border:0;
  border-radius:4px;
  font:inherit;
  font-size:12px;
  color:var(--muted);
  background:transparent;
  cursor:pointer;
}
.motion-toggle[hidden] { display:none }
.motion-toggle:hover { color:var(--ink) }
.motion-toggle svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5 }
.motion-toggle .resume-icon { display:none }
.motion-toggle[aria-pressed="true"] .pause-icon { display:none }
.motion-toggle[aria-pressed="true"] .resume-icon { display:block }
.closing {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  border-radius:26px;
  background:var(--panel);
  color:var(--panel-ink);
  padding:46px 58px
}
.closing>div:first-child {
  display:flex;
  gap:25px;
  align-items:center
}
.closing-record {
  width:50px;
  height:50px;
  background:var(--red);
  border:7px solid var(--panel);
  outline:1px solid #696b64;
  border-radius:50%;
  flex-shrink:0
}
.closing h2 {
  font-size:27px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.8px
}
.closing h2 strong {
  font-weight:750
}
.closing .download {
  max-width:310px
}
.footer {
  display:flex;
  align-items:center;
  gap:22px;
  padding:36px 8px 74px;
  font-size:12px;
  color:var(--muted)
}
.footer .brand {
  font-size:16px;
  color:var(--ink);
  letter-spacing:-.4px
}
.footer nav {
  display:flex;
  margin-left:auto;
  gap:20px
}
.footer nav a {
  display:flex;
  align-items:center;
  min-height:44px;
  text-decoration:none
}
.footer nav a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
@media(prefers-color-scheme:dark) {
  :root {
    --page:#141513;
    --ink:#eeeee8;
    --muted:#b4b5ad;
    --line:#353730;
    --panel:#222420
  }
  .brand img {
    background:white
  }
  .hero,.closing {
    box-shadow:inset 0 0 0 1px #3d4037
  }
}
/* Expand only beyond the approved laptop/tablet layouts. Fluid values meet
   the original 1360px composition, then stop growing on ultrawide displays. */
@media(min-width:1361px) {
  .wrap {
    width:min(var(--preview-desktop-width,1920px),calc(100% - clamp(80px,5.8824vw,160px)))
  }
  .hero { min-height:clamp(690px,calc(25vw + 350px),840px) }
  .hero-copy {
    padding-top:clamp(66px,calc(5vw - 2px),102px);
    padding-left:clamp(58px,4.265vw,88px)
  }
  h1 {
    font-size:calc(clamp(64px,4.706vw,88px) * var(--preview-type,1));
    letter-spacing:-.048em
  }
  .lede { font-size:clamp(18px,1.324vw,21px); max-width:34ch }
  .hero .download { margin-top:calc(clamp(38px,2.795vw,48px) * var(--preview-spacing,1)) }
  .hero .download-button { font-size:clamp(15px,1.103vw,18px) }
  .product-stage {
    --detail-inset:clamp(45px,calc(3.393vw - 1.14px),64px);
    --detail-width:clamp(286px,calc(6.0714vw + 203.43px),320px);
    width:100%; max-width:850px; justify-self:end
  }
  .phone-front {
    top:clamp(36px,calc(4.286vw - 22.29px),60px)
  }
  .story h2 { font-size:clamp(48px,3.53vw,56px) }
  .story-steps { gap:clamp(10px,.736vw,16px) }
  .step-copy { padding:clamp(28px,2.06vw,40px) clamp(28px,2.06vw,40px) 0 }
  .story h3 { font-size:clamp(19px,1.398vw,24px) }
  .step-copy > p { font-size:clamp(14px,1.03vw,18px) }
  .workflow-visual { max-width:480px; margin-inline:auto }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 48px)
  }
  .hero {
    min-height:650px
  }
  .hero-copy {
    padding:48px 0 36px 36px
  }
  h1 {
    letter-spacing:-2px;
    font-size:calc(48px * var(--preview-type,1))
  }
  .lede {
    font-size:16px;
    max-width:30ch
  }
  .product-stage {
    --detail-width:254px;
    --detail-inset:40px
  }
  .phone-front { top:55px }
  .story { padding-block:80px }
  .story-intro { padding-inline:20px }
  .step-copy { padding:24px 22px 0 }
  .closing {
    padding:38px 36px
  }
  .closing h2 {
    font-size:23px
  }
  .closing>div:first-child {
    gap:17px
  }
}
@media(max-width:900px) {
  .wrap {
    width:calc(100% - 32px)
  }
  .site-header {
    min-height:82px;
    padding-inline:4px
  }
  .brand {
    font-size:19px
  }
  .brand img {
    width:34px;
    height:34px
  }
  .hero {
    display:block;
    border-radius:calc(24px * var(--preview-radius,1));
    min-height:0
  }
  .hero-copy {
    padding:38px 28px 0
  }
  h1 {
    font-size:calc(clamp(35px,7.8vw,54px) * var(--preview-type,1));
    letter-spacing:-1.8px;
    line-height:1.08;
    margin-top:0
  }
  .lede {
    font-size:16px;
    line-height:1.6;
    max-width:36ch;
    margin-top:19px
  }
  .hero .download {
    margin-top:calc(26px * var(--preview-spacing,1))
  }
  .download-button {
    min-height:56px;
    font-size:14px;
    padding:15px 18px;
    gap:10px
  }
  .download-note {
    font-size:11px
  }
  .product-stage {
    --detail-width:235px;
    --detail-inset:36px;
    height:600px;
    max-width:460px;
    margin:10px auto 0
  }
  .phone-front {
    top:38px;
    transform:rotate(calc(7deg * var(--preview-tilt,1))) scale(var(--preview-phones,1))
  }
  .phone-back {
    right:auto;
    left:36px;
    transform:rotate(calc(-9deg * var(--preview-tilt,1))) scale(var(--preview-phones,1))
  }
  .story { padding:66px 0 46px }
  .story-intro { padding:0; margin-bottom:34px }
  .story h2 { font-size:34px; letter-spacing:-1.3px }
  .step-copy { padding:22px 18px 0 }
  .closing {
    display:block;
    padding:32px 26px;
    border-radius:24px
  }
  .closing>div:first-child {
    display:block
  }
  .closing-record {
    display:block;
    width:42px;
    height:42px;
    margin-bottom:25px
  }
  .closing h2 {
    font-size:27px;
    letter-spacing:-.8px
  }
  .closing .download {
    margin-top:27px;
    max-width:none
  }
  .footer {
    flex-wrap:wrap;
    gap:6px 18px;
    padding:27px 4px 92px
  }
  .footer .brand {
    font-size:16px
  }
  .footer .brand img {
    height:26px;
    width:26px
  }
  .footer p {
    margin-left:auto;
    font-size:10px
  }
  .footer nav {
    margin-left:0;
    width:100%;
    gap:23px
  }
  .footer nav a {
    font-size:12px
  }
}
@media(max-width:600px) {
  .story-steps { grid-template-columns:1fr; gap:12px }
  .story-step { width:100% }
  .workflow-visual { max-width:360px; margin:6px auto 0 }
  .step-copy { padding:26px 26px 0 }
  .story h2 { font-size:32px }
  .step-copy > p { min-height:0 }
}
@media(max-width:370px) {
  .hero-copy {
    padding-inline:22px
  }
  .download-button {
    font-size:12px;
    gap:8px;
    padding-inline:14px
  }
  .product-stage {
    --detail-width:220px;
    --detail-inset:32px
  }
  .closing {
    padding-inline:22px
  }
  .closing h2 {
    font-size:24px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    scroll-behavior:auto!important
  }
  .download-button:hover {
    transform:none
  }
}