@font-face{font-family:Inter;src:url('/fonts/Inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/Inter-latin-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
:root{font-family:var(--font);-webkit-font-smoothing:antialiased;color:#272c24;background:#f4f2ec;font-synthesis:none;--red:#cc402b;--red-deep:#ac3320;--line:#d7dbce;--paper:#f4f2ec;--ink:#272c24;--muted:#676f60}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}header{position:sticky;top:0;z-index:20;height:80px;padding:0 5vw;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;background:rgba(244,242,236,.88);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px)}.brand{font-weight:850;font-size:32px;letter-spacing:-1.8px;text-decoration:none;color:inherit}.brand span{font-size:12px;color:var(--red);margin-left:4px}.environment{font-size:13px;color:#555}.environment+button{margin-left:auto}main{max-width:1400px;margin:auto;padding:60px 5vw}h1{font-size:clamp(36px,4.5vw,64px);letter-spacing:-.045em;line-height:1.04;margin:14px 0 22px}h2{font-size:26px;letter-spacing:-.03em;margin:12px 0 24px}p{line-height:1.65}button,input,a{font:inherit}button,.primary{min-height:44px;border:1px solid var(--line);border-radius:7px;background:white;color:#23272b;padding:11px 18px;cursor:pointer;text-decoration:none;font-weight:600;display:inline-flex;justify-content:center;align-items:center;gap:20px}button:hover{background:#f0f1ee}button:disabled{opacity:.55;cursor:default}.primary{background:var(--red);border-color:var(--red);color:white}.primary:hover{background:var(--red-deep)}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #3675bb;outline-offset:3px}.auth-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:center;min-height:58vh}.intro p{max-width:420px;color:#555}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.1em}.card{border:1px solid var(--line);border-radius:12px;padding:30px;background:#fff}.rule{width:60px;height:4px;background:var(--red);margin-top:40px}.small{font-size:13px;color:#5b5e61}.switcher{display:flex;border-bottom:1px solid var(--line);margin-bottom:30px;gap:20px}.switcher button{border:0;border-radius:0;padding:8px 0;background:none}.switcher [aria-pressed=true]{border-bottom:3px solid var(--red)}label{display:block;font-size:14px;font-weight:600;margin:20px 0}input{width:100%;padding:13px;border:1px solid #afb4b8;border-radius:6px;margin-top:8px;font-size:16px}.check{display:flex;align-items:center;gap:12px}.check input{width:auto;margin:0}form>button{width:100%;margin:5px 0}.text{padding:8px 0;border:0;font-size:14px;color:#555}.workspace-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:40px}.workspace-heading h1{font-size:48px}.workspace-heading p{margin:8px 0}.workspace-grid{display:grid;grid-template-columns:1fr 320px;gap:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-heading h2{margin:0}.drawing{padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:20px;align-items:center}.drawing div{min-width:0;flex:1}.drawing strong{display:block;overflow-wrap:anywhere}.drawing small{display:block;color:#5b5e61;margin-top:6px}.drawing button{font-size:13px;padding:8px 12px}.empty{padding:60px 10px;text-align:center;color:#5b5e61}.billing{background:#22282e;color:white;margin-bottom:20px}.billing p{color:#c4cbd1}.billing button{width:100%;margin:6px 0}.price{display:flex;align-items:baseline;gap:10px;margin:25px 0}.price strong{font-size:46px;letter-spacing:-2px}.price span{font-size:13px;color:#c4cbd1}summary{cursor:pointer;font-size:14px;font-weight:600}.recovery{max-width:650px;margin:auto}.recovery h1{font-size:38px}code{display:block;padding:20px;background:#f0f1ee;overflow-wrap:anywhere;line-height:1.7;margin:25px 0}.recovery>button{margin-bottom:10px}#notice:not(:empty){border-left:4px solid var(--red);padding:16px;background:white;margin-top:24px;overflow-wrap:anywhere}footer{padding:30px 5vw;border-top:1px solid var(--line);font-size:13px;color:#555;display:flex;justify-content:space-between;gap:20px}footer a{color:inherit}@media(max-width:850px){main{padding:30px 5vw}.auth-layout,.workspace-grid{grid-template-columns:1fr}.intro{margin-bottom:20px}.intro h1{font-size:42px}.workspace-heading{align-items:flex-start;flex-direction:column}.workspace-heading h1{font-size:38px}.card{padding:22px}.environment{display:none}.drawing{flex-wrap:wrap}footer{flex-direction:column}}
:root{color-scheme:light}
@media(max-width:600px){.drawing div{flex-basis:100%;width:100%}.drawing button{flex:1}.drawing{gap:12px}.drawing small{line-height:1.5}}

/* ---- Polish ---- */
.environment{color:var(--muted)}
.site-link{font-size:13px;color:var(--muted);text-decoration:none;position:relative;padding:4px 0}
.site-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.site-link:hover{color:var(--ink)}.site-link:hover::after{transform:scaleX(1)}
.site-link+button{margin-left:auto}.environment+button{margin-left:auto}
.eyebrow{color:var(--red)}
.intro h1{letter-spacing:-.045em}
.intro p{color:var(--muted)}
.small{color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.intro,.card,.workspace-heading,.recovery{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.card{animation-delay:.12s}
.auth-layout .card{box-shadow:0 30px 60px -40px rgba(39,44,36,.45)}
button,.primary{transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
button:not(:disabled):hover,.primary:hover{transform:translateY(-1px)}
.primary:hover{box-shadow:0 14px 28px -16px rgba(204,64,43,.7)}
.primary span{transition:transform .25s}
.primary:hover span{transform:translateX(3px)}
.switcher{gap:24px}
.switcher button{position:relative;color:var(--muted);transition:color .2s}
.switcher button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.switcher [aria-pressed=true]{border-bottom:0;color:var(--ink)}
.switcher [aria-pressed=true]::after{transform:scaleX(1)}
.switcher button:not(:disabled):hover{transform:none;background:none;color:var(--ink)}
input{border-color:#c3c9bb;background:#fff;transition:border-color .2s,box-shadow .2s}
input:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px rgba(204,64,43,.14)}
input:focus-visible{outline:0}
#auth-title,#password-help,#recovery-field{animation:fade .3s ease both}
#notice:not(:empty){animation:rise .35s cubic-bezier(.2,.7,.2,1) both;border-radius:0 8px 8px 0}
.drawing{animation:rise .4s cubic-bezier(.2,.7,.2,1) both;transition:background .2s}
.drawing:hover{background:rgba(255,255,255,.55)}
.empty{animation:fade .5s ease both}
.billing{background:#252d24;border-color:#252d24}
.billing .eyebrow{color:#e0b4aa}
.billing p{color:#c5cdb9}
.billing button:not(.primary){background:transparent;color:#eef0e8;border-color:#586f49}
.billing button:not(.primary):hover{background:#33402f}
code{border-radius:8px;animation:fade .6s ease both;letter-spacing:.04em}
.check input{accent-color:var(--red)}
details.card summary{padding:4px 0}
details[open] summary{margin-bottom:8px}
details.card form{animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
footer{color:var(--muted)}
footer a{text-decoration:none;position:relative;transition:color .2s}
footer a:hover{color:var(--red)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.consent{margin:14px 0 0;line-height:1.6}.consent a,footer a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b8c2ab}.consent a:hover{color:var(--red)}
.danger summary{color:var(--muted)}.danger button{color:var(--red);border-color:#e3b5ae}.danger button:hover{background:#fbe9e6}
footer span{display:flex;flex-wrap:wrap;gap:6px 8px}
.code-label{display:block;font-size:.9em;margin-bottom:8px;color:#3c4236}
.code-boxes{display:flex;gap:10px;margin-bottom:8px}
.code-box{width:100%;max-width:54px;height:62px;text-align:center;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;border:2px solid #c3c9bb;border-radius:12px;background:#fff;color:#272c24;transition:border-color .18s,box-shadow .18s,transform .1s}
.code-box:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px rgba(204,64,43,.14)}
.code-boxes.correct .code-box{border-color:#2e8b57;box-shadow:0 0 0 4px rgba(46,139,87,.16)}
.code-boxes.wrong .code-box{border-color:#cc402b;box-shadow:0 0 0 4px rgba(204,64,43,.18);animation:otp-shake .32s}
@keyframes otp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (max-width:420px){.code-box{max-width:46px;height:54px;font-size:22px}.code-boxes{gap:7px}}
/* Plan status: the band, the badge, the plan line and the included list. */
.band{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 18px;border-radius:12px;margin-bottom:22px;font-size:14px;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.band a{font-weight:600;white-space:nowrap;text-decoration:none;padding:7px 12px;border-radius:8px}
.band.trial{background:#fff3d6;color:#5a4300;border:1px solid #f0d58a}
.band.trial a{background:#272c24;color:#fff}
.band.expired{background:#fbe3df;color:#7a2417;border:1px solid #f0b8ae}
.band.expired a{background:var(--red);color:#fff}
.band strong{font-variant-numeric:tabular-nums}
.badge{display:inline-block;vertical-align:middle;font-size:10.5px;font-weight:700;letter-spacing:.12em;padding:3px 8px;border-radius:999px;line-height:1.3}
.badge.pro{background:#272c24;color:#f4f2ec}
.badge.trial{background:#fff3d6;color:#5a4300;border:1px solid #f0d58a}
.badge.free{background:#f1f0ea;color:#4c5348;border:1px solid #dcdad0}
.band.free{background:#f1f0ea;color:#3c4238;border:1px solid #dcdad0}
.band.free a{background:var(--red);color:#fff}
.plan-line{font-size:15px;font-weight:600;color:#eef0e8;margin:0 0 14px}
.plan-line small{display:block;font-weight:400;color:#c5cdb9;margin-top:4px}
.included-title{margin:18px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#e0b4aa}
.included{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.included li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.45;color:#dfe4d6}
.included li::before{content:'';position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid #8fd19e;border-bottom:2px solid #8fd19e;transform:rotate(-45deg)}
/* Verify and recovery: one centred card at the sign-in card's width, the code boxes as the focal point. */
#verify,#recovery{max-width:560px;margin:0 auto}
#verify h2{text-align:center;margin-top:0}
#verify-note{text-align:center;color:var(--muted)}
.code-label{text-align:center;margin-top:18px}
.code-boxes{justify-content:center;gap:12px;margin:12px 0 20px}
.code-box{max-width:60px;height:68px;font-size:28px}
.verify-actions{display:flex;justify-content:center;gap:22px;margin-top:14px}
.verify-actions .link{background:none;border:0;padding:6px 2px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font:inherit;cursor:pointer}
.verify-actions .link:hover{color:var(--ink);transform:none;box-shadow:none}
#verify-notice{text-align:center}
.workspace-grid{grid-template-columns:minmax(0,1fr)}.account-settings>summary{padding:18px;border:1px solid var(--line);border-radius:8px}.account-settings aside{margin-top:16px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;align-items:start}.resume-drawing{display:block;margin:-16px 0 24px;font-size:19px;font-weight:650;color:var(--red);overflow-wrap:anywhere}.drawing-drop{margin:24px 0 16px;border:2px dashed var(--line);border-radius:10px;padding:24px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}.drawing-drop.dragging{border-color:var(--red);background:#fff4ef}.drawing-drop p:empty{display:none}.drawing-drop p{flex-basis:100%;margin:0}.drawing-filters{display:flex;gap:20px;align-items:end;flex-wrap:wrap}.drawing-filters label{margin:8px 0;flex:1}.drawing-filters select,.feedback-entry select{display:block;padding:12px;border:1px solid var(--line);border-radius:6px;font:inherit;width:100%;margin-top:8px;background:white}.drawing-filters>span{padding:20px 0;color:var(--muted)}.feedback-entry{padding:20px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.feedback-entry p{white-space:pre-wrap}.feedback-entry label{max-width:240px}@media(max-width:850px){.account-settings aside{grid-template-columns:1fr}.drawing-filters label{flex-basis:100%}}

#workspace .workspace-heading{margin-bottom:26px}.resume-drawing{margin:0 0 22px}

.drawing-drop .button{min-height:44px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);padding:11px 18px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;justify-content:center}.drawing-drop .button:hover{background:#f0f1ee}

/* Phones. The sign-in form comes up on the first screen: the introduction keeps its heading and the free-trial line,
   and the paragraph the home page already says is dropped. Links in the header, footer, trial band and the drawing
   to continue are at least 44 px tall to tap, and checkboxes at least 24 px. */
@media(max-width:600px){
  header{height:60px;gap:14px}
  header .brand{font-size:28px;padding:10px 0}
  .site-link{min-height:44px;display:inline-flex;align-items:center;padding:0}
  main{padding:20px 5vw 30px}
  .auth-layout{min-height:0;gap:0}
  .intro{margin-bottom:18px}
  .intro .eyebrow{margin:0}
  .intro h1{font-size:32px;margin:8px 0 10px}
  .intro h1+p,.intro .rule{display:none}
  .intro .small{margin:0}
  .auth-layout .card{padding:20px}
  .switcher{margin-bottom:18px}
  .switcher button{min-height:44px}
  #auth-title{margin:0 0 4px}
  #auth-form label{margin:14px 0}
  #recover-mode{min-height:44px;margin-top:4px}
  footer{padding:20px 5vw 28px;gap:10px}
  footer span{gap:0 10px;align-items:center}
  footer a{display:inline-flex;align-items:center;min-height:44px}
  .band a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px}
  .badge{font-size:12px}
  .resume-drawing{display:flex;align-items:center;min-height:44px}
  .select-drawings{min-height:44px}
  .drawings .select-drawings input,.drawings .drawing input.drawing-checkbox{width:24px;height:24px}
  .drawings .drawing div{flex-basis:calc(100% - 36px)}
}

.email-login{margin:18px 0}.email-login [role="status"]{overflow-wrap:anywhere}.email-login button{white-space:normal}.first-drawing{margin-bottom:24px}.first-drawing ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-left:22px;margin-top:24px}.first-drawing li{line-height:1.6;padding-right:12px}.first-drawing strong{display:block}@media(max-width:700px){.first-drawing ol{grid-template-columns:1fr;gap:12px}}

/* The invitation's confirm step: the start button with a quiet way out; focus rings and links in the brand's colours. */
.invite-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-bottom:14px}
.invite-actions button.text{padding:10px 4px}
.email-login a{color:var(--ink);text-decoration-color:var(--red)}
.email-login button:focus-visible,.email-login a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* Plans: Plus beside Pro in the chooser, the change-plan buttons for a subscriber. */
.badge.plus{background:#272c24;color:#f4f2ec}
.tier{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid #3b4a37}
.tier .price{margin:10px 0 14px}.tier .price strong{font-size:38px;letter-spacing:-1.5px}
.tier-name{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#e0b4aa}
.switch-options{display:grid;gap:8px}.switch-options button{margin:0;text-align:left}
#plan-switch .small,#plus-included .small{font-size:12.5px;margin:10px 0 0}