@import url('/tokens.css');
@import url('/components.css');

.legal-layout {
  max-width: var(--settings-max-width);
  padding-block: var(--space-48) var(--space-64);
  overflow-wrap: anywhere;
}
.legal-layout h1 {
  font-size: var(--text-section);
  margin-block: var(--space-16);
}
.legal-layout h1 span {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
}
.legal-meta {
  color: var(--color-muted);
  font-size: var(--text-label);
}
.legal-notice {
  margin-block: var(--space-24);
  padding: var(--space-24);
  background: var(--color-panel);
  border-inline-start: var(--focus-width) solid var(--color-ink);
  font-size: var(--text-label);
}
.legal-notice p + p {
  margin-top: var(--space-8);
}
.legal-layout article {
  border-top: var(--border-thin) solid var(--color-rule);
  padding-top: var(--space-32);
  margin-top: var(--space-32);
  scroll-margin-top: var(--space-24);
}
.legal-layout section + section {
  margin-top: var(--space-32);
}
.legal-layout section h2, .legal-layout section h3 {
  font-size: var(--text-21);
  margin-bottom: var(--space-16);
}
.legal-language-title {
  font-size: var(--text-card-title);
  margin-bottom: var(--space-32);
}
.legal-layout p + p, .legal-layout li + li {
  margin-top: var(--space-12);
}
.legal-layout ul {
  padding-inline-start: var(--space-24);
  margin-block: var(--space-16);
}
.legal-layout article a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/cormorant-400.woff2') format('woff2');
}
@font-face {
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/instrument-400.woff2') format('woff2');
}
@font-face {
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/instrument-500.woff2') format('woff2');
}
@font-face {
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/instrument-600.woff2') format('woff2');
}
@font-face {
  font-family:'Noto Sans SC';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/fonts/noto-ui.woff2') format('woff2');
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-30);
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font: var(--text-body)/var(--line-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,h2,h3,p {
  margin: 0;
}
h1,h2,h3 {
  font-weight: var(--weight-medium);
  line-height: var(--line-heading);
  overflow-wrap: anywhere;
  min-width: 0;
}
h2 {
  font-size: var(--text-section);
  letter-spacing: var(--tracking-display);
}
h3 {
  font-size: var(--text-card-title);
}
p {
  overflow-wrap: anywhere;
}
[hidden] {
  display: none!important;
}
svg {
  display: block;
}
main {
  min-height: 50vh;
}
.container {
  width: var(--layout-page-width);
  margin-inline: auto;
}
.serif {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display);
  line-height: var(--line-display);
}
.eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  letter-spacing: var(--tracking-label);
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: var(--layer-skip-link);
  background: var(--color-accent);
  color: var(--color-ink);
  padding: var(--space-12);
}
.skip-link:focus {
  top: 12px;
}

/* Landing page */
.hero-shell {
  background: var(--color-ink);
  color: var(--color-paper);
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0 7%;
  padding-top: var(--space-44);
  padding-bottom: var(--space-60);
}
.hero .eyebrow {
  color: var(--color-accent);
}
.hero h1 {
  font-size: var(--text-hero);
  margin: var(--space-38) 0 var(--space-43);
}
.hero h2 {
  position: relative;
  font-size: var(--text-hero-subtitle);
}
.hero-description {
  margin-top: var(--space-18);
  color: var(--color-light-muted);
  font-size: var(--text-18);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-44);
}
.hero-actions>span {
  color: var(--color-light-muted);
  font-size: var(--text-label);
}
.hero-caption {
  grid-column: 1/-1;
  margin-top: var(--space-56);
  font-size: var(--text-18);
}
.hero-caption .eyebrow {
  color: var(--color-light-muted);
  margin-bottom: var(--space-16);
}
.hero-caption small {
  display: block;
  margin-top: var(--space-15);
  color: var(--color-light-muted);
  font-size: var(--text-11);
}
.mail-scene {
  position: relative;
  min-width: 0;
  height: var(--mail-scene-height);
  margin-top: var(--space-32);
}
.mail-shadow {
  position: absolute;
  top: 0;
  left: 9%;
  right: 8%;
  height: 80%;
  background: var(--color-card-back);
}
.mail-note {
  position: absolute;
  top: 28px;
  left: 2%;
  width: 83%;
  height: 80%;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-36);
}
.mail-note .eyebrow {
  color: var(--color-muted);
  font-size: var(--text-11);
}
.mail-request {
  font-size: var(--text-mail-request);
  line-height: var(--line-mail);
  margin: var(--space-40) 0 var(--space-48);
}
.mail-signoff {
  border-top: var(--border-thin) solid var(--color-rule);
  padding-top: var(--space-24);
  color: var(--color-muted);
  font-size: var(--text-label);
  display: flex;
  justify-content: space-between;
}
.mail-signoff span {
  font-size: var(--text-26);
  color: var(--color-ink);
}
.mail-reply {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 81%;
  padding: var(--space-28) var(--space-32) var(--space-38);
  background: var(--color-accent);
  color: var(--color-ink);
}
.mini-brand {
  font-size: var(--text-26);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-mini-brand);
}
.mail-reply h3 {
  font-size: var(--text-18);
  margin: var(--space-12) 0 var(--space-16);
}
.mail-reply p {
  font-size: var(--text-15);
  line-height: var(--line-compact);
}
.doodle {
  position: absolute;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-doodle);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark {
  width: 60px;
  top: -65px;
  left: -90px;
  color: var(--color-accent);
}
.delivery-trail {
  width: 165px;
  left: -190px;
  bottom: 20px;
  color: var(--color-accent);
}
.manifesto {
  padding-block: var(--space-72) var(--space-90);
  border-bottom: var(--border-thin) solid var(--color-rule);
}
.manifesto-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 7%;
  align-items: center;
  margin-top: var(--space-36);
}
.manifesto-content p {
  color: var(--color-muted);
  font-size: var(--text-18);
  line-height: var(--line-relaxed);
}
.how {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 8%;
  padding-block: var(--space-60) var(--space-110);
}
.how h2 {
  font-size: var(--text-38);
  margin-top: var(--space-28);
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-24);
  padding: var(--space-26) 0;
  border-bottom: var(--border-thin) solid var(--color-rule);
}
.steps li:first-child {
  padding-top: 0;
}
.steps li:last-child {
  border: 0;
}
.step-no {
  color: var(--color-muted);
  padding-top: var(--space-6);
}
.steps p {
  color: var(--color-muted);
  margin-top: var(--space-12);
}
.closing {
  background: var(--color-accent);
}
.closing-inner {
  padding-block: var(--space-64) var(--space-92);
  position: relative;
}
.closing .eyebrow {
  color: var(--color-muted);
}
.closing h2 {
  font-size: var(--text-closing);
  margin: var(--space-42) 0;
}
.closing-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-30);
}
.closing-action p {
  font-size: var(--text-19);
}
.wave {
  width: 110px;
  right: 5%;
  top: 110px;
  color: var(--color-ink);
}
/* Authentication */
.login-layout {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 46% 54%;
}
.login-story {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-48) var(--layout-story-gutter);
  display: flex;
  flex-direction: column;
  min-height: var(--login-story-min-height);
}
.login-story-copy {
  position: relative;
  margin: auto 0;
  padding: var(--space-90) 0 var(--space-130);
}
.login-story .eyebrow {
  color: var(--color-accent);
}
.login-slogan {
  font-size: var(--text-login-slogan);
  margin: var(--space-46) 0 var(--space-50);
}
.login-story h2 {
  font-size: var(--text-28);
  margin-bottom: var(--space-22);
}
.login-story-copy>p:last-of-type {
  color: var(--color-light-muted);
  font-size: var(--text-16);
}
.login-story .spark {
  left: auto;
  right: 5%;
  top: 65%;
  width: 38px;
}
.story-foot {
  border-top: var(--border-thin) solid var(--color-dark-rule);
  padding-top: var(--space-24)!important;
  color: var(--color-light-muted)!important;
  font-size: var(--text-11);
}
.login-content {
  padding: var(--space-48) var(--layout-form-gutter) var(--space-60);
  min-width: 0;
}

.login-form-wrap {
  max-width: var(--form-max-width);
  margin: var(--space-90) auto 0;
}
.login-form-wrap h1 {
  font-size: var(--text-39);
  margin: var(--space-25) 0 var(--space-12);
}
.subtle {
  color: var(--color-muted);
}
.login-form-wrap form {
  margin-top: var(--space-52);
}
.login-form-wrap form .button {
  width: 100%;
  margin-top: var(--space-30);
}

.destination {
  margin-bottom: var(--space-30);
  color: var(--color-muted);
}
.captcha-picture {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-block: var(--space-16);
}
.captcha-picture img {
  max-width: 100%;
  height: auto;
  border: var(--border-thin) solid var(--color-rule);
}
.destination strong {
  display: block;
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  font-size: var(--text-label);
}
.fine-print {
  font-size: var(--text-13);
  color: var(--color-muted);
  line-height: var(--line-fine);
  margin-top: var(--space-22);
}
.login-footnote {
  border-top: var(--border-thin) solid var(--color-rule);
  margin-top: var(--space-60);
  padding-top: var(--space-22);
  font-size: var(--text-label);
  color: var(--color-muted);
}
.status {
  font-size: var(--text-label);
  min-height: var(--status-min-height);
  margin-top: var(--space-22);
  overflow-wrap: anywhere;
}
.status:empty {
  margin: 0;
  min-height: 0;
}
.status[data-state=error] {
  color: var(--color-error);
}
.status[data-state=success] {
  color: var(--color-success);
}
/* Account and sender management */

.account-layout {
  padding-block: var(--space-50) var(--space-72);
}
.account-layout h1 {
  font-size: var(--text-42);
  margin: var(--space-22) 0 var(--space-12);
}
.intro-copy {
  color: var(--color-muted);
  font-size: var(--text-17);
}
.account-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: var(--space-30);
  margin-top: var(--space-62);
}
.inbox-panel {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-34) var(--space-36) var(--space-36);
  position: relative;
  min-width: 0;
  min-height: var(--inbox-min-height);
}
.inbox-panel .eyebrow {
  color: var(--color-accent);
}
.inbox-panel h2 {
  font-size: var(--text-26);
  margin: var(--space-30) 0 var(--space-20);
}
.inbox-panel>p:not(.eyebrow):not(.assistant-address) {
  color: var(--color-light-muted);
}
.assistant-address {
  font-size: var(--text-assistant-address);
  line-height: var(--line-address);
  overflow-wrap: anywhere;
}
.mailbox-actions {
  display: flex;
  gap: var(--space-24);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-34);
}

.inbox-panel .spark {
  left: auto;
  right: 25px;
  top: 28px;
  width: 35px;
}
.account-summary {
  background: var(--color-panel);
  padding: var(--space-34);
  min-width: 0;
}
.account-summary h2 {
  font-size: var(--text-21);
  margin: var(--space-30) 0 var(--space-20);
}
.account-email {
  font-size: var(--text-18);
  overflow-wrap: anywhere;
}
.account-tier-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  border-top: var(--border-thin) solid var(--color-rule);
  margin-top: var(--space-34);
  padding-top: var(--space-20);
  font-size: var(--text-label);
}
.account-tier-row>span:first-child {
  color: var(--color-muted);
}
#next-step p {
  margin-top: var(--space-12);
  font-size: var(--text-label);
  color: var(--color-muted);
}
.account-details {
  max-width: var(--settings-max-width);
  border-top: var(--border-thin) solid var(--color-rule);
  margin-top: var(--space-48);
  padding-top: var(--space-16);
}
.account-details summary { cursor: pointer; font-size: var(--text-label); min-height: var(--control-touch-min); }
.account-details summary:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-offset); }
.account-details h2 { font-size: var(--text-20); margin-block: var(--space-16); }
.sender-panel {
  max-width: var(--settings-max-width);
  margin-top: var(--space-78);
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin: var(--space-22) 0 var(--space-14);
}
.section-heading h2 {
  font-size: var(--text-30);
}
.section-heading .subtle {
  font-size: var(--text-13);
  white-space: nowrap;
}
.settings-copy {
  color: var(--color-muted);
  font-size: var(--text-16);
}
.empty-state {
  background: var(--color-panel);
  margin-top: var(--space-38);
  padding: var(--space-28);
  color: var(--color-muted);
  font-size: var(--text-15);
}
.sender-list {
  list-style: none;
  padding: 0;
  margin: var(--space-40) 0 var(--space-28);
}
.sender-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-16) 0;
  border-bottom: var(--border-thin) solid var(--color-rule);
  min-height: var(--sender-row-min-height);
}
.sender-list li:first-child {
  border-top: var(--border-thin) solid var(--color-rule);
}
.sender-address {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  min-width: 0;
}
.sender-address>span:first-child {
  overflow-wrap: anywhere;
  min-width: 0;
}
.sender-tag {
  font-size: var(--text-caption);
  color: var(--color-muted);
  background: var(--color-panel);
  padding: var(--space-4) var(--space-12);
  white-space: nowrap;
}
.sender-remove-confirm {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-10);
  flex-wrap: wrap;
  font-size: var(--text-13);
  flex-shrink: 0;
  max-width: 50%;
}
.sender-remove-confirm span {
  flex-basis: 100%;
  text-align: right;
}
.sender-input-row {
  display: flex;
  gap: var(--space-14);
}
.sender-input-row input {
  flex: 1;
}
.sender-input-row .button {
  min-width: var(--control-add-min-width);
}
#sender-form {
  margin-top: var(--space-26);
}
#sender-settings>.fine-print {
  margin-top: var(--space-15);
}

/* Motion is decorative and ends without hiding any content. */
@keyframes note-in {
  from {
    transform: var(--transform-note-enter);
    opacity: var(--opacity-enter);
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes reply-in {
  from {
    transform: var(--transform-reply-enter);
    opacity: 0;
  }
  to {
    transform: translate(0,0);
    opacity: 1;
  }
}
@keyframes spark-breathe {
  0%,100% {
    transform: var(--transform-breathe-start);
  }
  50% {
    transform: var(--transform-breathe-peak);
  }
}
@keyframes trail-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.mail-note {
  animation: var(--animation-note);
}
.mail-reply {
  animation: var(--animation-reply);
}
.spark {
  animation: var(--animation-spark);
}
.delivery-trail path {
  stroke-dasharray: 1;
  animation: var(--animation-trail);
}
.wave {
  animation: var(--animation-wave);
}
.inbox-panel[data-busy=true] .spark {
  animation: var(--animation-busy);
}
@media(min-width: 1600px /* --breakpoint-wide */) {
  .hero {
    padding-top: var(--space-64);
  }
  .mail-scene {
    height: var(--mail-scene-height);
  }
}
@media(max-width: 1000px /* --breakpoint-tablet */) {
  .container {
    width: var(--layout-page-tablet-width);
  }

  .hero {
    gap: 0 var(--space-35);
  }
  .hero h1 {
    font-size: var(--text-hero-tablet);
  }
  .mail-scene {
    height: var(--mail-scene-tablet-height);
  }
  .mail-note {
    padding: var(--space-25);
  }
  .mail-request {
    font-size: var(--text-20);
  }
  .mail-reply {
    padding: var(--space-24);
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-16);
  }
  .delivery-trail {
    width: 120px;
    left: -120px;
    bottom: 0;
  }
  .manifesto-content {
    gap: var(--space-35);
  }
  .manifesto h2 {
    font-size: var(--text-34);
  }
  .how {
    gap: var(--space-45);
  }
  .how h2 {
    font-size: var(--text-32);
  }
  .login-content {
    padding-inline: var(--space-40);
  }
  .login-story {
    padding-inline: var(--space-36);
  }
  .login-slogan {
    font-size: var(--text-65);
  }
  .login-story .spark {
    top: auto;
    bottom: 55px;
  }
  .account-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-20);
  }
  .account-summary,.inbox-panel {
    padding: var(--space-28);
  }
  .mailbox-actions {
    gap: var(--space-14);
  }
}
@media(max-width: 700px /* --breakpoint-mobile */) {
  .container {
    width: var(--layout-page-mobile-width);
  }

  .hero {
    grid-template-columns: minmax(0,1fr);
    padding-top: var(--space-28);
    padding-bottom: var(--space-65);
  }
  .hero h1 {
    font-size: var(--text-hero-mobile);
    margin: var(--space-24) 0 var(--space-30);
  }
  .hero h2 {
    font-size: var(--text-25);
    letter-spacing: var(--tracking-mobile-title);
  }
  .hero-description {
    font-size: var(--text-16);
    margin-top: var(--space-20);
    max-width: none;
  }
  .hero-description span {
    display: block;
  }
  .hero-actions {
    margin-top: var(--space-30);
    gap: var(--space-12);
  }
  .hero-actions>span {
    font-size: var(--text-caption);
  }

  .mail-scene {
    height: var(--mail-scene-mobile-height);
    width: 100%;
    max-width: var(--mail-scene-mobile-max);
    justify-self: center;
    margin-top: var(--space-70);
  }
  .mail-note {
    top: 22px;
    left: 3%;
    width: 85%;
    padding: var(--space-25);
    height: 78%;
  }
  .mail-shadow {
    left: 10%;
    height: 76%;
    right: 2%;
  }
  .mail-request {
    font-size: var(--text-22);
    margin-block: var(--space-32) var(--space-38);
  }
  .mail-reply {
    width: 80%;
    padding: var(--space-20) var(--space-22) var(--space-26);
    bottom: 0;
    right: 0;
  }
  .mail-reply h3 {
    font-size: var(--text-15);
    margin: var(--space-9) 0 var(--space-14);
  }
  .mail-reply p {
    font-size: var(--text-13);
  }
  .mini-brand {
    font-size: var(--text-card-title);
  }
  .spark {
    left: auto;
    right: 0;
    top: -60px;
    width: 36px;
  }
  .delivery-trail {
    width: 100px;
    left: auto;
    right: 0;
    top: -65px;
    bottom: auto;
  }
  .mail-scene>.spark {
    top: -446px;
    right: 0;
  }
  .hero-caption {
    margin-top: var(--space-48);
    font-size: var(--text-16);
  }
  .hero-caption .eyebrow {
    font-size: var(--text-10);
  }
  .manifesto {
    padding-block: var(--space-48) var(--space-50);
  }
  .manifesto-content {
    display: block;
    margin-top: var(--space-28);
  }
  .manifesto h2 {
    font-size: var(--text-manifesto-mobile);
  }
  .manifesto-content p {
    font-size: var(--text-label);
    margin-top: var(--space-28);
  }
  .eyebrow {
    font-size: var(--text-10);
  }
  .how {
    grid-template-columns: minmax(0,1fr);
    padding-block: var(--space-38) var(--space-55);
    gap: var(--space-38);
  }
  .how h2 {
    font-size: var(--text-30);
    margin-top: var(--space-24);
  }
  .steps li {
    grid-template-columns: 25px minmax(0,1fr);
    gap: var(--space-20);
    padding-block: var(--space-24);
  }
  .steps h3 {
    font-size: var(--text-20);
  }
  .steps p {
    font-size: var(--text-label);
    margin-top: var(--space-12);
  }
  .step-no {
    font-size: var(--text-13);
    padding-top: var(--space-4);
  }
  .closing-inner {
    padding-block: var(--space-40) var(--space-46);
  }
  .closing h2 {
    font-size: var(--text-closing-mobile);
    margin-block: var(--space-38) var(--space-28);
    max-width: var(--closing-title-max-width);
  }
  .closing-action {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-24);
  }
  .closing-action p {
    font-size: var(--text-16);
  }
  .wave {
    width: 80px;
    right: 5px;
    top: 50px;
  }

  .login-layout {
    grid-template-columns: minmax(0,1fr);
  }
  .login-story {
    min-height: 0;
    padding: var(--space-24);
    background: var(--color-paper);
    color: var(--color-ink);
    padding: var(--space-40) var(--space-24) 0;
  }
  .login-story > .brand { display: none; }
  .login-story-copy {
    margin: 0;
    padding: 0 0 var(--space-28);
    border-bottom: var(--border-thin) solid var(--color-rule);
  }
  .login-story-copy .eyebrow {
    display: none;
  }
  .login-slogan {
    font-size: var(--text-hero-mobile);
    margin: 0 0 var(--space-24);
  }
  .login-story h2 {
    font-size: var(--text-21);
    margin-bottom: 0;
  }
  .login-story-copy>p:last-of-type,.story-foot {
    display: none;
  }
  .login-story .spark {
    right: 8px;
    bottom: 32px;
    width: 30px;
  }
  .login-content {
    padding: var(--space-40) var(--space-24) var(--space-50);
  }
  .login-form-wrap {
    margin-top: 0;
    max-width: none;
  }
  .login-form-wrap h1 {
    font-size: var(--text-36);
    margin-top: var(--space-25);
  }
  .login-content > .back-link { display: none; }
  .login-layout { min-height: 0; }
  .login-form-wrap form {
    margin-top: var(--space-48);
  }
  .login-footnote {
    margin-top: var(--space-34);
  }
  .login-form-wrap .subtle {
    font-size: var(--text-15);
  }

  .account-layout {
    padding-block: var(--space-36) var(--space-45);
  }
  .account-layout h1 {
    font-size: var(--text-32);
    margin-top: var(--space-18);
  }
  .intro-copy {
    font-size: var(--text-15);
  }
  .account-grid {
    grid-template-columns: minmax(0,1fr);
    gap: var(--space-22);
    margin-top: var(--space-36);
  }
  .inbox-panel {
    padding: var(--space-25);
    min-height: var(--inbox-mobile-min-height);
  }
  .inbox-panel h2 {
    font-size: var(--text-22);
    margin-top: var(--space-30);
  }
  .assistant-address {
    font-size: var(--text-21);
  }
  .inbox-panel .spark {
    width: 29px;
    right: 18px;
    top: 18px;
  }
  .mailbox-actions {
    gap: var(--space-14);
    margin-top: var(--space-26);
  }
  .account-summary {
    padding: var(--space-25);
  }
  .account-summary h2 {
    font-size: var(--text-20);
    margin-top: var(--space-22);
  }
  .account-email {
    font-size: var(--text-17);
  }
  .sender-panel {
    margin-top: var(--space-48);
  }
  .section-heading h2 {
    font-size: var(--text-25);
  }
  .section-heading {
    align-items: flex-start;
  }
  .settings-copy {
    font-size: var(--text-label);
  }
  .sender-list {
    margin-top: var(--space-28);
  }
  .sender-list li {
    gap: var(--space-12);
    align-items: flex-start;
  }
  .sender-address {
    font-size: var(--text-label);
    padding-top: var(--space-10);
    gap: var(--space-8);
  }
  .sender-list .text-button {
    font-size: var(--text-13);
  }
  .sender-remove-confirm {
    max-width: 46%;
  }
  .sender-input-row {
    flex-direction: column;
    gap: var(--space-14);
  }
  .sender-input-row .button {
    width: 100%;
  }
  .empty-state {
    padding: var(--space-22);
    font-size: var(--text-label);
  }
  .fine-print {
    font-size: var(--text-caption);
  }
  .inbox-panel .fine-print {
    font-size: var(--text-13);
  }
  .section-heading .subtle {
    font-size: var(--text-caption);
    margin-top: var(--space-9);
  }
}
@media(max-width: 360px /* --breakpoint-narrow */) {
  .container {
    width: var(--layout-page-narrow-width);
  }

  .hero h2 {
    font-size: var(--text-22);
  }
  .hero h1 {
    font-size: var(--text-60);
  }
  .mail-note {
    padding: var(--space-22);
  }
  .mail-request {
    font-size: var(--text-19);
  }
  .mail-reply {
    padding: var(--space-20);
  }
  .mail-reply p {
    font-size: var(--text-caption);
  }
  .hero-actions>span {
    display: none;
  }
  .mail-scene>.spark {
    top: -414px;
  }
  .login-content,.login-story {
    padding-inline: var(--space-20);
  }
  .login-slogan {
    font-size: var(--text-56);
  }
  .inbox-panel,.account-summary {
    padding: var(--space-22);
  }
  .assistant-address {
    font-size: var(--text-19);
  }
  .section-heading {
    flex-wrap: wrap;
    gap: 0;
  }
  .section-heading .subtle {
    margin-top: 0;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
  }
  .delivery-trail path {
    stroke-dashoffset: 0;
  }
}
.skip-link:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
@media(max-width: 700px /* --breakpoint-mobile */) {
  .sender-list li.confirming {
    flex-wrap: wrap;
  }
  .confirming .sender-address {
    width: 100%;
  }
  .sender-remove-confirm {
    width: 100%;
    max-width: 100%;
  }
  .sender-remove-confirm span {
    text-align: left;
  }
  .sender-remove-confirm {
    justify-content: flex-start;
  }
}

/* Billing reuses the account-page controls and layout tokens. */
#billing-market {
  display: block;
  max-width: 100%;
  min-height: var(--control-input-height);
  padding: var(--space-12);
  margin-top: var(--space-12);
  border: var(--border-thin) solid var(--color-rule);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}
#billing-orders li { flex-wrap: wrap; }
#billing-orders small { overflow-wrap: anywhere; color: var(--color-muted); }
#billing-orders .mailbox-actions { margin-top: 0; }

.hero-underline { width: 28%; right: 0; bottom: calc(-1 * var(--space-24)); color: var(--color-accent); }
.hero-underline path { stroke-dasharray: 1; animation: var(--animation-trail); }
@media (prefers-reduced-motion: reduce) { .hero-underline path { animation: none; } }

@media(width > 1000px /* --breakpoint-tablet */) {
  .hero { grid-template-columns: 1fr 1fr; padding-bottom: var(--space-12); }
  .hero h1 { margin-top: var(--space-20); margin-bottom: var(--space-32); }
  .hero-caption { margin-top: var(--space-44); }
  .mail-scene { height: calc(var(--mail-scene-height) - var(--space-8)); }
  .mail-note { left: 4%; width: 75.4%; }
  .mail-shadow { left: 9.5%; width: 75.4%; }
  .mail-reply { right: var(--space-48); width: 72%; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer nav { grid-column: 2; grid-row: 1 / 3; }
}

/* Letter-inspired brand details: static fallbacks, short motion and clear form states. */
.ink-drawing {
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-doodle);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ink-trail { stroke-dasharray: 1; animation: var(--animation-trail); }
.letter-flight { position: absolute; width: 75%; max-width: 420px; height: 110px; left: 0; bottom: 0; color: var(--color-accent); }
.floating-letter { transform-origin: 335px 50px; animation: var(--animation-wave); }
.postmark { width: var(--space-96); height: var(--space-96); color: var(--color-muted); }
.postmark-ring { stroke-dasharray: 1 5; }
.postmark text { fill: currentColor; stroke: none; font: var(--text-10) var(--font-body); letter-spacing: var(--tracking-label); }
.login-form-heading { position: relative; }
.login-form-heading .postmark { position: absolute; right: 0; top: calc(-1 * var(--space-40)); transform: rotate(12deg); }
.login-progress { list-style: none; display: flex; gap: var(--space-24); padding: 0; margin: var(--space-32) 0 0; font-size: var(--text-caption); color: var(--color-muted); }
.login-progress li { display: flex; align-items: center; gap: var(--space-8); }
.login-progress span { display: inline-grid; place-items: center; width: var(--space-26); height: var(--space-26); border: var(--border-thin) solid var(--color-rule); border-radius: 50%; transition: background var(--dur-ui), border-color var(--dur-ui); }
.login-progress [aria-current=step] { color: var(--color-ink); }
.login-progress [aria-current=step] span { background: var(--color-accent); border-color: var(--color-accent); }
.login-form-wrap form:not([hidden]) { animation: var(--animation-note); }
.account-heading { position: relative; padding-right: var(--space-130); }
.account-heading > .postmark { position: absolute; right: var(--space-8); top: var(--space-8); transform: rotate(12deg); }
.handwritten-heading { position: relative; display: inline-block; padding-bottom: var(--space-8); }
.hand-underline { position: absolute; width: 100%; height: var(--space-16); bottom: 0; left: 0; color: var(--color-muted); }
.account-grid { animation: var(--animation-note); }
.inbox-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12) var(--space-24); padding-right: var(--space-32); }
.inbox-ready { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--text-10); color: var(--color-light-muted); }
.inbox-ready::before { content: ''; width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--color-accent); }
.next-step-drawing { width: 75%; max-width: 250px; height: 90px; margin-top: var(--space-24); color: var(--color-muted); }
#next-step .next-step-signature { font-size: var(--text-26); color: var(--color-ink); margin-top: var(--space-8); }
.status[data-state=success]:not(:empty) { animation: var(--animation-note); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .account-summary:hover .next-step-drawing { transform: var(--transform-hover); }
  .next-step-drawing { transition: transform var(--dur-ui) var(--ease-out); }
}
@media(max-width: 1000px /* --breakpoint-tablet */) {
  .login-form-heading .postmark { width: var(--space-72); height: var(--space-72); top: calc(-1 * var(--space-28)); }
  .login-progress { gap: var(--space-16); }
}
@media(max-width: 700px /* --breakpoint-mobile */) {
  .letter-flight { display: none; }
  .account-heading { padding-right: 0; }
  .account-heading > .postmark { width: var(--space-48); height: var(--space-48); top: calc(-1 * var(--space-20)); right: 0; }
  .account-heading > .postmark text { display: none; }
  .next-step-drawing { width: 48%; height: var(--space-64); margin-top: var(--space-16); }
  #next-step .next-step-signature { font-size: var(--text-23); }
  .login-progress { margin-top: var(--space-28); }
}
@media(prefers-reduced-motion:reduce) {
  .ink-trail { stroke-dashoffset: 0; }
}

/* Homepage stationery: warm stock, fine grain, tape and ink. */
body[data-page=home] { background: var(--color-stationery); }
.stationery { isolation: isolate; box-shadow: var(--shadow-stationery); }
.stationery::after, body[data-page=home] .closing::after {
  content: ''; position: absolute; inset: 0; background: url('/paper-grain.svg') repeat;
  opacity: var(--opacity-paper-grain); mix-blend-mode: multiply; pointer-events: none; z-index: -1;
}
body[data-page=home] .mail-note { background: var(--color-stationery); }
body[data-page=home] .mail-signoff { border-color: var(--color-stationery-rule); }
.paper-tape { position: absolute; width: var(--space-96); height: var(--space-28); top: calc(-1 * var(--space-12)); left: 38%; background: color-mix(in srgb, var(--color-stationery) 60%, transparent); transform: rotate(-6deg); clip-path: polygon(2% 0, 100% 4%, 96% 96%, 0 100%, 3% 70%, 0 44%); pointer-events: none; }
.postage-stamp { position: absolute; width: var(--space-60); height: var(--space-72); right: var(--space-26); top: var(--space-24); color: var(--color-muted); transform: rotate(8deg); }
.stamp-paper { fill: var(--color-accent); stroke-dasharray: 1 5; }
.postage-stamp text { fill: currentColor; stroke: none; font: var(--text-10) var(--font-body); letter-spacing: var(--tracking-label); }
.paper-signature { font-family: var(--font-display); font-size: var(--text-26); font-style: italic; color: var(--color-muted); margin-top: var(--space-24); transform: rotate(-4deg); }
.reply-with-care { position: absolute; right: var(--space-28); top: var(--space-36); display: flex; gap: var(--space-8); align-items: center; font-size: var(--text-10); letter-spacing: var(--tracking-label); color: var(--color-muted); }
.reply-with-care svg { width: var(--space-18); height: var(--space-18); }
body[data-page=home] .manifesto { position: relative; border-color: var(--color-stationery-rule); }
.margin-note { display: flex; align-items: center; gap: var(--space-16); justify-content: flex-end; margin-bottom: var(--space-24); color: var(--color-muted); pointer-events: none; }
.margin-note .postmark { width: var(--space-64); height: var(--space-64); transform: rotate(-12deg); }
.margin-note > span { font: italic var(--text-24)/var(--line-solid) var(--font-display); transform: rotate(-5deg); }
.little-note { position: relative; width: 85%; max-width: 320px; margin: var(--space-48) 0 0 var(--space-8); padding: var(--space-32) var(--space-28); background: var(--color-paper); transform: rotate(-3deg); }
.little-note > .serif { display: block; font-size: var(--text-34); line-height: var(--line-display); padding-bottom: var(--space-28); }
.little-note .paper-tape { background: color-mix(in srgb, var(--color-accent) 65%, transparent); }
.flower-doodle { color: var(--color-muted); width: 110px; height: 140px; }
.little-note .flower-doodle { position: absolute; width: var(--space-76); height: var(--space-96); right: var(--space-18); bottom: var(--space-12); }
body[data-page=home] .step-no { position: relative; width: var(--space-36); height: var(--space-36); display: grid; place-items: center; padding: 0; }
body[data-page=home] .step-no::before { content: ''; position: absolute; inset: 0; border: var(--border-thin) solid var(--color-stationery-rule); border-radius: 47% 53% 44% 56%; transform: rotate(-10deg); }
body[data-page=home] .closing { position: relative; isolation: isolate; }
.closing-flower { position: absolute; top: var(--space-110); right: var(--space-40); width: 160px; height: 200px; color: var(--color-ink); }
.home-ink .ink-trail { animation: none; }
.home-ink[data-drawn=true] .ink-trail { animation: var(--animation-trail); }
.home-ink[data-drawn=true] .flower-head { transform-origin: 82px 65px; animation: var(--animation-wave); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .little-note { transition: transform var(--dur-reply) var(--ease-out); }
  .little-note:hover { transform: rotate(0); }
  body[data-page=home] .steps li:hover .step-no::before { background: var(--color-accent); }
  body[data-page=home] .step-no::before { z-index: -1; transition: background var(--dur-ui); }
  body[data-page=home] .step-no { isolation: isolate; }
}
@media(max-width: 1000px /* --breakpoint-tablet */) {
  .postage-stamp { width: var(--space-44); height: var(--space-55); right: var(--space-18); top: var(--space-18); }
  .paper-signature { display: none; }
  .reply-with-care { right: var(--space-20); top: var(--space-32); }
  .reply-with-care svg { display: none; }
  .little-note { width: 95%; padding: var(--space-24); }
  .little-note > .serif { font-size: var(--text-30); }
  .closing-flower { width: 110px; height: 140px; right: 0; }
}
@media(max-width: 700px /* --breakpoint-mobile */) {
  .paper-signature { margin-top: var(--space-26); font-size: var(--text-21); }
  .reply-with-care { top: var(--space-28); font-size: var(--text-10); }
  .margin-note { margin-bottom: var(--space-30); gap: var(--space-8); }
  .margin-note > span { font-size: var(--text-22); }
  .margin-note .postmark { width: var(--space-55); height: var(--space-55); }
  .little-note { max-width: 280px; margin-top: var(--space-36); }
  body[data-page=home] .step-no { width: var(--space-26); height: var(--space-26); }
  .closing-flower { width: var(--space-64); height: var(--space-78); right: 0; top: var(--space-28); }
  body[data-page=home] .closing .eyebrow { padding-right: var(--space-72); }
}

/* Everyday use cases share the stationery palette and spacing tokens. */
.hero h1.everyday-title { font-family: var(--font-body); font-size: var(--text-65); line-height: var(--line-heading); }
.everyday { padding-block: var(--space-72); border-bottom: var(--border-thin) solid var(--color-stationery-rule); }
.everyday h2 { margin-top: var(--space-24); }
.everyday-intro { color: var(--color-muted); margin-top: var(--space-16); }
.everyday-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-48) var(--space-64); margin-top: var(--space-48); }
.everyday-grid article { border-top: var(--border-thin) solid var(--color-stationery-rule); padding-top: var(--space-24); }
.everyday-grid h3 { margin-top: var(--space-16); font-size: var(--text-26); }
.everyday-example { margin-top: var(--space-20); font-size: var(--text-20); }
.everyday-detail { margin-top: var(--space-12); color: var(--color-muted); font-size: var(--text-16); }
@media(max-width: 700px /* --breakpoint-mobile */) {
  .hero h1.everyday-title { font-size: var(--text-42); }
  .everyday { padding-block: var(--space-48); }
  .everyday-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); margin-top: var(--space-32); }
}