/* ============================================================
   PDF-OPS design tokens
   ============================================================ */
:root{
  --ink:#0A1B33;        /* primary text, darkest navy            */
  --navy:#0E2A4F;       /* dark panels                            */
  --navy-2:#153A69;     /* dark panel gradient partner            */
  --blue:#1B5FD9;       /* primary action                         */
  --blue-dk:#134AAE;
  --sky:#7BAEF5;        /* accent line-art, icons on dark         */
  --ice:#E4EFFD;        /* tinted card fill                       */
  --mist:#F4F8FE;       /* page ground                            */
  --paper:#FFFFFF;
  --line:#D6E4F7;
  --muted:#5B7391;
  --ok:#12855B;
  --warn:#B4531A;
  --danger:#C2323C;

  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --r-sm:10px; --r-md:16px; --r-lg:26px; --r-xl:36px;
  --shadow-sm:0 1px 2px rgba(10,27,51,.06),0 4px 14px rgba(10,27,51,.06);
  --shadow-md:0 2px 6px rgba(10,27,51,.08),0 18px 40px rgba(10,27,51,.10);
  --shadow-lg:0 30px 70px rgba(10,27,51,.18);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--mist);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.022em;margin:0}
h1{font-size:clamp(2.5rem,6.2vw,4.35rem)}
h2{font-size:clamp(1.9rem,3.9vw,2.85rem)}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-.012em;line-height:1.25}
p{margin:0}
.eyebrow{
  font-family:var(--mono);font-size:.705rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;font-weight:500;
}
.eyebrow.on-dark{color:var(--sky)}
.lede{font-size:1.06rem;color:var(--muted);max-width:60ch}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;border-radius:999px;padding:13px 26px;
  font-weight:600;font-size:.95rem;cursor:pointer;background:var(--blue);color:#fff;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  box-shadow:0 2px 0 var(--blue-dk),0 10px 24px rgba(27,95,217,.26);
  text-decoration:none;line-height:1.2;
}
.btn:hover{background:var(--blue-dk);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 var(--blue-dk)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--paper);border-color:var(--blue);color:var(--blue)}
.btn.on-dark{background:#fff;color:var(--navy);box-shadow:0 2px 0 #b9d2f2,0 12px 30px rgba(0,0,0,.28)}
.btn.on-dark:hover{background:#eaf2fe}
.btn.sm{padding:8px 16px;font-size:.86rem;box-shadow:none;border-radius:999px}
.btn.sm.ghost{border-color:var(--line)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.danger{background:var(--danger);box-shadow:0 2px 0 #8f232b}
.btn.danger:hover{background:#a52a33}

/* ============================================================
   Header
   ============================================================ */
.site-head{position:sticky;top:0;z-index:60;background:rgba(244,248,254,.9);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.stuck{border-bottom-color:var(--line)}
.head-in{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;flex:none}
.brand:hover{text-decoration:none}
.brand .mark{width:31px;height:31px;border-radius:9px;background:var(--navy);display:grid;place-items:center;flex:none}
.brand .mark svg{width:18px;height:18px}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:nowrap;min-width:0}
.nav a{
  padding:8px 11px;border-radius:999px;color:var(--muted);font-size:.9rem;font-weight:500;white-space:nowrap;
}
.head-cta{flex:none;white-space:nowrap}
/* Nine links plus the account link, the brand and the button must fit the
   1180px wrap with room to spare - Privacy moved to the footer, where it
   already was, when Compress joined the row. Below the wrap the row
   tightens in two steps instead of wrapping a link onto three lines. */
@media(max-width:1240px){.head-in{gap:16px}.nav a{padding:8px 8px;font-size:.86rem}.nav-account{padding:8px 8px !important}}
@media(max-width:1100px){.head-in{gap:12px}.nav a{padding:8px 6px;font-size:.82rem}.brand{font-size:1.05rem}}
.nav a:hover{color:var(--ink);background:var(--paper);text-decoration:none}
.nav a.active{color:var(--navy);background:var(--ice)}
.head-cta{flex:none}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:12px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--ink)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
@media(max-width:1020px){
  .nav{position:fixed;inset:70px 0 auto;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:14px 22px 20px;gap:2px;margin:0;transform:translateY(-130%);transition:transform .28s ease;box-shadow:var(--shadow-md)}
  .nav.open{transform:none}
  .nav a{padding:12px 14px;font-size:.95rem}
  .burger{display:flex}
  .head-cta{display:none}
}

/* ============================================================
   Hero - the signature panel
   ============================================================ */
.hero{padding:26px 0 0}
.hero-panel{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:
    radial-gradient(120% 90% at 82% 8%,#20507f 0%,rgba(32,80,127,0) 62%),
    linear-gradient(148deg,var(--navy) 0%,var(--navy-2) 58%,#1a4478 100%);
  box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  min-height:520px;
}
.hero-panel::after{ /* faint paper-grain wash */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:5px 5px;
}
.hero-copy{padding:62px 20px 62px 60px;position:relative;z-index:2;color:#fff}
.hero-copy h1{color:#fff}
.hero-copy h1 em{font-style:normal;color:var(--sky);display:block}
.hero-copy .lede{color:#c6dcf7;margin:22px 0 30px;font-size:1.045rem;max-width:41ch}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:26px;font-family:var(--mono);font-size:.735rem;letter-spacing:.055em;color:#8fb6e4;display:flex;align-items:center;gap:9px}
.hero-note .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18);flex:none}
.hero-art{position:relative;height:100%;min-height:460px}
.hero-art svg{position:absolute;inset:0;width:100%;height:100%}
@media(prefers-reduced-motion:no-preference){
  .sheet-float{animation:bob 7s ease-in-out infinite}
  .sheet-float.b{animation-duration:8.6s;animation-delay:-2.2s}
  .sheet-float.c{animation-duration:9.8s;animation-delay:-4.4s}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
  .ink-draw{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 2.6s .5s ease forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}
@media(max-width:980px){
  .hero-panel{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:46px 30px 10px}
  .hero-art{min-height:330px}
}

/* ============================================================
   Capability strip (dark rounded band, 4 columns)
   ============================================================ */
.strip{margin-top:-46px;position:relative;z-index:5;padding-bottom:0}
.strip-in{
  background:linear-gradient(160deg,#12406f 0%,#0f3159 100%);
  border-radius:var(--r-lg);padding:44px 20px 40px;box-shadow:var(--shadow-md);
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative;overflow:hidden;
  width:calc(100% - 76px);margin-inline:auto;
}
.strip-in::before{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 42px,rgba(255,255,255,.5) 42px 43px);
}
.strip-col{padding:0 26px;position:relative;color:#d5e6fa}
.strip-col + .strip-col::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.16)}
.strip-col svg{width:36px;height:36px;stroke:#fff;fill:none;stroke-width:1.5;margin-bottom:18px}
.strip-col h3{color:#fff;font-family:var(--display);font-weight:600;font-size:1.03rem;margin-bottom:8px}
.strip-col p{font-size:.875rem;line-height:1.55;color:#a9c7e9}
@media(max-width:880px){
  .strip-in{grid-template-columns:repeat(2,1fr);gap:30px 8px;width:calc(100% - 30px)}
  .strip-col:nth-child(3)::before{display:none}
}
@media(max-width:520px){
  .strip-in{grid-template-columns:1fr}
  .strip-col + .strip-col::before{display:none}
  .strip-col{padding:0 20px}
}

/* ============================================================
   Sections + tool cards
   ============================================================ */
.section{padding:92px 0}
.section.tight{padding:64px 0}
.section-head{max-width:62ch;margin-bottom:44px}
.section-head p:not(.eyebrow){margin-top:16px}

.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tool-grid{grid-template-columns:1fr}}
.tool-card{
  border-radius:var(--r-lg);padding:30px 28px 26px;position:relative;overflow:hidden;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;min-height:214px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  text-decoration:none;
}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#bcd6f5;text-decoration:none}
.tool-card .badge{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--ice);flex:none;
}
.tool-card .badge svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.6}
.tool-card h3{margin-bottom:9px}
.tool-card p{font-size:.9rem;color:var(--muted);line-height:1.55}
.tool-card .go{
  margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:.735rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:7px;
}
.tool-card .go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
.tool-card:hover .go svg{transform:translateX(4px)}
/* tinted variants - echo the reference grid's alternating fills */
.tool-card.t-deep{background:linear-gradient(160deg,#173f70,#102e55);border-color:transparent;color:#fff}
.tool-card.t-deep h3{color:#fff}
.tool-card.t-deep p{color:#a9c7e9}
.tool-card.t-deep .badge{background:rgba(255,255,255,.13)}
.tool-card.t-deep .badge svg{stroke:#fff}
.tool-card.t-deep .go{color:var(--sky)}
.tool-card.t-ice{background:linear-gradient(160deg,#e8f2ff,#d5e6fb);border-color:transparent}
.tool-card.t-sky{background:linear-gradient(160deg,#2f6fd0,#1b57b8);border-color:transparent;color:#fff}
.tool-card.t-sky h3{color:#fff}
.tool-card.t-sky p{color:#d3e5ff}
.tool-card.t-sky .badge{background:rgba(255,255,255,.17)}
.tool-card.t-sky .badge svg{stroke:#fff}
.tool-card.t-sky .go{color:#fff}

/* Steps - a real sequence, so numbering earns its place */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 26px 26px}
.step::before{
  counter-increment:s;content:"0" counter(s);
  font-family:var(--mono);font-size:.79rem;color:var(--blue);letter-spacing:.1em;display:block;margin-bottom:14px;
}
.step h3{margin-bottom:9px}
.step p{font-size:.9rem;color:var(--muted)}

/* Privacy band */
.band{
  border-radius:var(--r-lg);background:linear-gradient(150deg,#0e2a4f,#17457c);
  color:#fff;padding:56px 54px;display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;
  box-shadow:var(--shadow-md);
}
.band h2{color:#fff}
.band p:not(.eyebrow){color:#b7d2f0;margin-top:16px}
.band-facts{display:grid;gap:12px}
.fact{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:#d7e8fc}
.fact svg{width:19px;height:19px;stroke:#6ee7b7;fill:none;stroke-width:2.2;flex:none;margin-top:2px}
@media(max-width:860px){.band{grid-template-columns:1fr;padding:38px 26px}}

/* Plans */
.plans{
  border-radius:var(--r-xl);padding:60px 34px 54px;position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%,#2b6bb5 0%,rgba(43,107,181,0) 60%),
             linear-gradient(160deg,#123f77 0%,#0d2a52 55%,#0a1f3f 100%);
  box-shadow:var(--shadow-lg);
}
.plans::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:5px 5px}
.plans-head{text-align:center;position:relative;z-index:2;max-width:60ch;margin:0 auto 46px}
.plans-head h1{color:#fff;font-size:clamp(2.4rem,6vw,3.9rem);letter-spacing:-.03em}
.plans-head p:not(.eyebrow){color:#b7d2f0;margin-top:16px}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start;position:relative;z-index:2}
@media(max-width:920px){.plan-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.plan{
  border-radius:22px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(2px);display:flex;flex-direction:column;overflow:hidden;color:#fff;
}
.plan.featured{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);box-shadow:0 24px 60px rgba(0,0,0,.3)}
@media(min-width:921px){.plan.featured{margin-top:-26px}}
.plan-top{background:rgba(255,255,255,.16);border-radius:20px;margin:8px;padding:16px 18px;text-align:center}
.plan.featured .plan-top{background:rgba(255,255,255,.22)}
.plan-top b{display:block;font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:.01em;text-transform:uppercase}
.plan-top span{display:block;color:#cfe3fa;font-size:.95rem;margin-top:2px}
.plan-price{text-align:center;padding:22px 18px 6px}
.plan-price .amt{font-family:var(--display);font-weight:800;font-size:3.5rem;line-height:1;letter-spacing:-.03em}
.plan-price .per{display:block;font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#cfe3fa;margin-top:8px}
.plan hr{border:0;border-top:1px solid rgba(255,255,255,.25);margin:18px 26px 4px}
.plan ul{list-style:none;margin:0;padding:18px 26px 8px;display:grid;gap:11px}
.plan li{position:relative;padding-left:17px;font-size:.925rem;line-height:1.45;color:#e4effd}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:#8fbdf3}
.plan li b{color:#fff}
.plan .cta{margin:22px 26px 26px;text-align:center}
.plan .cta a{
  display:inline-block;background:#c8202f;color:#fff;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:.85rem;padding:13px 30px;border-radius:4px;box-shadow:0 2px 0 #91161f;
}
.plan .cta a:hover{background:#a91a27;text-decoration:none}
.plan .cta small{display:block;color:#a9c7e9;font-size:.76rem;margin-top:10px}
.plans-foot{position:relative;z-index:2;text-align:center;color:#a9c7e9;font-size:.86rem;margin-top:34px}

/* FAQ */
.faq{display:grid;gap:12px;max-width:860px}
.qa{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.qa summary{
  cursor:pointer;padding:19px 22px;font-weight:600;font-family:var(--display);font-size:1.02rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--blue);font-size:1.25rem;flex:none}
.qa[open] summary::after{content:"-"}
.qa .a{padding:0 22px 20px;color:var(--muted);font-size:.93rem}

/* Footer */
.site-foot{background:var(--navy);color:#a9c7e9;margin-top:80px;padding:56px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
.site-foot h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:#6f9ccb;font-weight:500;margin-bottom:14px}
.site-foot a{color:#cfe3fa;font-size:.9rem;display:block;padding:4px 0}
.site-foot a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;color:#fff;font-size:1.1rem;margin-bottom:14px}
.foot-brand .mark{width:29px;height:29px;border-radius:9px;background:#fff;display:grid;place-items:center}
.foot-brand .mark svg{width:17px;height:17px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;font-family:var(--mono);color:#6f9ccb}

/* ============================================================
   Ad slots
   ============================================================ */
.ad-slot{margin:0 auto;display:flex;justify-content:center}
.ad-slot.spaced{margin:44px auto}
.ad-test{
  width:100%;max-width:728px;min-height:92px;border:1.5px dashed #b5cdea;border-radius:var(--r-md);
  background:repeating-linear-gradient(135deg,#eef5ff 0 10px,#e6f0fd 10px 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:#5b7391;font-family:var(--mono);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;text-align:center;padding:14px;
}
.ad-test b{font-size:.82rem;color:var(--navy);letter-spacing:.06em}
.ad-test i{font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.78rem;color:#7b93b1}
.ad-slot{max-width:100%;overflow:hidden}
.ad-own{display:block;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  padding:16px 20px;text-align:center;text-decoration:none;color:var(--ink);max-width:728px;width:100%}
.ad-own:hover{border-color:var(--blue);text-decoration:none}
.ad-own img{max-width:100%;height:auto;border-radius:8px;margin:0 auto 10px}
.ad-own span{font-size:.92rem;color:var(--muted);display:block}
.ad-slot.rail .ad-own{max-width:100%}
.ad-slot.rail .ad-test{max-width:100%;min-height:210px}

/* ============================================================
   Studio (the working application)
   ============================================================ */
.studio{padding:26px 0 0}
.studio-shell{display:grid;grid-template-columns:264px minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:1000px){.studio-shell{grid-template-columns:1fr}}

.rail{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;position:sticky;top:88px;display:grid;gap:20px;
  grid-template-columns:minmax(0,1fr);   /* a child must never widen the rail */
  min-width:0;
}
.rail > *{min-width:0}
@media(max-width:1000px){.rail{position:static}}
.rail h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 11px}
.rail-list{display:grid;gap:4px}
.rail-btn{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;
  background:none;border:1px solid transparent;cursor:pointer;font-size:.91rem;font-weight:500;color:var(--ink);
}
.rail-btn svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.7;flex:none}
.rail-btn:hover{background:var(--mist)}
.rail-btn.active{background:var(--ice);border-color:#bcd6f5;color:var(--navy);font-weight:600}
.rail-btn.active svg{stroke:var(--blue)}
.rail-btn small{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--muted)}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.panel + .panel{margin-top:20px}
.panel-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.panel-head h2{font-size:1.5rem}
.panel-head p{color:var(--muted);font-size:.9rem;margin-top:6px}
.panel-head .spacer{margin-left:auto}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* Dropzone */
.drop{
  /* display:block matters: on the Lock and Convert pages this element is a
     label, which is inline by default. The border then wrapped around each
     line box instead of the panel, drawing two broken fragments over the
     heading. */
  display:block;width:100%;
  border:2px dashed #b9d3f2;border-radius:var(--r-lg);background:linear-gradient(160deg,#f7fbff,#eaf3ff);
  padding:52px 26px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s,transform .18s;
}
.drop:hover,.drop.over{border-color:var(--blue);background:#e6f0ff}
.drop.over{transform:scale(1.006)}
.drop svg{width:52px;height:52px;stroke:var(--blue);fill:none;stroke-width:1.4;margin:0 auto 16px}
.drop h3{font-size:1.28rem;margin-bottom:8px}
.drop p{color:var(--muted);font-size:.9rem}
.drop .or{margin-top:18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* File chips */
.files{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:18px}
.file-chip{display:flex;align-items:center;gap:12px;background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:10px 13px;min-width:0}
.file-chip svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.7;flex:none}
.file-chip .nm{font-weight:500;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.file-chip .meta{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--muted);flex:none}
.icon-btn{background:none;border:1px solid var(--line);border-radius:9px;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;flex:none;background:#fff}
.icon-btn svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.9}
.icon-btn:hover{border-color:var(--blue)}
.icon-btn:hover svg{stroke:var(--blue)}
.icon-btn.danger:hover{border-color:var(--danger);background:#fff2f3}
.icon-btn.danger:hover svg{stroke:var(--danger)}
.icon-btn.on{background:var(--blue);border-color:var(--blue)}
.icon-btn.on svg{stroke:#fff}

/* Page thumbnails */
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(182px,1fr));gap:16px}
.pg{
  position:relative;border:1px solid var(--line);border-radius:14px;background:var(--mist);
  padding:10px;transition:border-color .16s,box-shadow .16s;
  display:flex;flex-direction:column;gap:9px;
}
.pg.sel{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,95,217,.16)}
.pg.gone{opacity:.34}
.pg.gone .thumb{filter:grayscale(1)}
.thumb{
  width:100%;aspect-ratio:1/1.32;background:#fff;border:1px solid var(--line);border-radius:8px;
  display:grid;place-items:center;overflow:hidden;cursor:pointer;position:relative;
}
.thumb canvas{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 1px 5px rgba(10,27,51,.12)}
.thumb .ph{font-family:var(--mono);font-size:.7rem;color:#9ab}
.pg .foot{display:grid;gap:7px;justify-items:center}
.pg .num{font-family:var(--mono);font-size:.73rem;color:var(--muted);text-align:center}
.pg .tags{position:absolute;left:10px;top:10px;display:flex;gap:4px;max-width:calc(100% - 56px);pointer-events:none}
.pg .src{background:rgba(14,42,79,.82);color:#fff;font-family:var(--mono);font-size:.62rem;padding:2px 6px;border-radius:5px;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pg .ann{background:var(--blue);color:#fff;font-family:var(--mono);font-size:.6rem;padding:2px 6px;border-radius:5px;flex:none}
.pg .tools{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.pg .tools button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.pg .tools button svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2}
.pg .tools button:hover{border-color:var(--blue)}
.pg .tools button:hover svg{stroke:var(--blue)}
.pg .pick{position:absolute;right:9px;top:9px;width:22px;height:22px;accent-color:var(--blue);cursor:pointer;margin:0;z-index:2}

/* Editor */
.ed-wrap{display:grid;grid-template-columns:1fr;gap:16px}
.ed-toolbar{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--mist);
  border:1px solid var(--line);border-radius:14px;padding:9px;position:sticky;top:82px;z-index:20;
}
.tool-btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;border:1px solid transparent;
  background:#fff;cursor:pointer;font-size:.855rem;font-weight:500;border-color:var(--line);
}
.tool-btn svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.8}
.tool-btn:hover{border-color:#a9c9ef}
.tool-btn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.tool-btn.on svg{stroke:#fff}
.tool-btn[disabled]{opacity:.4;pointer-events:none}
.tool-btn.save:not([disabled]){border-color:var(--ok);color:var(--ok);background:#f1fbf7}
.tool-btn.save:not([disabled]) svg{stroke:var(--ok)}
.tool-btn.save:not([disabled]):hover{background:var(--ok);color:#fff}
.tool-btn.save:not([disabled]):hover svg{stroke:#fff}
.icon-btn.fmt{width:28px;height:26px;font-size:.82rem;line-height:1}
.tb-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.tb-group{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px 9px;font-size:.82rem}
.tb-group label{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tb-group input[type=color]{width:30px;height:26px;border:1px solid var(--line);border-radius:6px;padding:1px;background:#fff;cursor:pointer}
.tb-group input[type=number]{width:56px;border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-family:var(--mono);font-size:.8rem}
.tb-group input[type=range]{width:92px;accent-color:var(--blue)}
.tb-group select{border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:.82rem;background:#fff}

/* Centered when it fits, fully reachable when it does not: justify-content
   :center pushes half of any overflow into unreachable space on the LEFT -
   auto margins centre the same way but collapse to zero under overflow, so
   a zoomed page can be dragged to every edge. The scrollbar gutter is
   reserved so bars appearing never shift the layout (the "blink"). */
.stage-scroll{overflow:auto;background:#dde8f6;border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;justify-content:flex-start;align-items:flex-start;scrollbar-gutter:stable;max-height:78vh}
.stage{position:relative;box-shadow:var(--shadow-md);background:#fff;flex:none;margin:auto}
.stage canvas.base{display:block}
.layer{position:absolute;inset:0;overflow:hidden;-webkit-user-select:none;user-select:none}
.layer .tx[contenteditable=true]{-webkit-user-select:text;user-select:text}
.an-img img{-webkit-user-drag:none;user-drag:none}
.layer.crosshair{cursor:crosshair}

.an{position:absolute;box-sizing:border-box}
.an.movable{cursor:move}
.an.selected{outline:2px solid var(--blue);outline-offset:1px}
.an .grip{
  position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#fff;border:2px solid var(--blue);
  border-radius:50%;cursor:nwse-resize;display:none;
}
.an.selected .grip{display:block}
.an .kill{
  position:absolute;right:-9px;top:-9px;width:19px;height:19px;border-radius:50%;background:var(--danger);color:#fff;
  border:none;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:12px;line-height:1;padding:0;
}
.an.selected .kill{display:flex}
.an-text{line-height:1.2;padding:0;color:#000;font-family:Helvetica,Arial,sans-serif;min-width:8px}
.an-text .tx{display:block;white-space:pre;line-height:1.2;outline:none;min-width:10px;min-height:1em}
.an-text .tx[contenteditable=true]{
  outline:2px dashed var(--blue);background:rgba(255,255,255,.62);cursor:text;min-width:1.2em;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;
}
.an-rect{border-radius:0}
.an-img img{width:100%;height:100%;display:block;pointer-events:none}
.an svg{overflow:visible;pointer-events:none}

.marquee{position:absolute;border:1.5px dashed var(--blue);background:rgba(27,95,217,.11);pointer-events:none}

.ed-pagebar{display:flex;align-items:center;gap:10px;justify-content:center;font-family:var(--mono);font-size:.83rem;color:var(--muted)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(10,27,51,.55);backdrop-filter:blur(3px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:var(--r-lg);padding:28px;max-width:620px;width:100%;box-shadow:var(--shadow-lg);max-height:90vh;overflow:auto}
.modal h3{font-size:1.32rem;margin-bottom:8px}
.modal p.sub{color:var(--muted);font-size:.89rem;margin-bottom:20px}
.sig-tabs{display:flex;gap:6px;margin-bottom:14px}
.sig-pad{border:2px dashed #b9d3f2;border-radius:14px;background:#fbfdff;touch-action:none;width:100%;cursor:crosshair;display:block}
.sig-type{width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:2rem;font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}

/* Notices + toast */
.notice{border-radius:14px;padding:15px 18px;font-size:.885rem;display:flex;gap:12px;align-items:flex-start;line-height:1.55}
.notice svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke-width:2}
.notice.info{background:var(--ice);border:1px solid #bcd6f5;color:#1b3a63}
.notice.info svg{stroke:var(--blue)}
.notice.warn{background:#fff4ea;border:1px solid #f2d3b3;color:#6b3d13}
.notice.warn svg{stroke:var(--warn)}
.notice + .notice{margin-top:11px}
/* always on screen and always the same height, so switching tool never
   shifts the page underneath it */
.ed-hint{min-height:58px;align-items:center}
@media(max-width:640px){.ed-hint{min-height:76px}}
.toast-host{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:400;display:grid;gap:9px;pointer-events:none}
.toast{background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;font-size:.875rem;box-shadow:var(--shadow-md);animation:pop .25s ease}
.toast.bad{background:var(--danger)}
.toast.good{background:var(--ok)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}

.busy{position:fixed;inset:0;background:rgba(244,248,254,.86);z-index:250;display:grid;place-items:center;text-align:center}
.busy .ring{width:44px;height:44px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.busy p{font-family:var(--mono);font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* Content pages */
.prose{max-width:74ch}
.prose h2{margin-top:44px;margin-bottom:14px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:26px;margin-bottom:8px}
.prose p,.prose li{color:#33465e;font-size:.985rem}
.prose p + p{margin-top:14px}
.prose ul{padding-left:20px;margin:12px 0}
.prose li{margin:7px 0}
.prose code{font-family:var(--mono);font-size:.85em;background:var(--ice);padding:2px 6px;border-radius:5px}
.page-head{background:linear-gradient(150deg,var(--navy),#17457c);border-radius:var(--r-xl);padding:56px 54px;color:#fff;margin-bottom:44px}
.page-head h1{font-size:clamp(2.1rem,4.6vw,3.15rem);color:#fff}
.page-head p:not(.eyebrow){color:#b7d2f0;margin-top:16px;max-width:60ch}
@media(max-width:700px){.page-head{padding:36px 26px}}
@media print{.site-head,.site-foot,.ad-slot,.rail{display:none}}

/* the key and its copy button */
.keyrow{display:flex;gap:8px;align-items:stretch}
.keyrow input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:var(--mono);font-size:.95rem;letter-spacing:.06em;background:var(--mist);color:var(--ink);
}
.keyrow input:focus{outline:3px solid var(--blue);outline-offset:2px}
.keyrow .btn{flex:none;white-space:nowrap}
.keyrow .icon-btn{flex:none;width:42px;height:auto}
@media(max-width:560px){.keyrow{flex-wrap:wrap}.keyrow input{flex-basis:100%}}
.tool-card.locked,.btn.locked{opacity:.55}

/* the held-job bar: what you set up survives a trip to the sign-in page */
.hold-bar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:280;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:var(--navy);color:#fff;border-radius:999px;padding:10px 14px 10px 20px;
  box-shadow:var(--shadow-md);font-size:.88rem;max-width:calc(100vw - 32px);
}
.hold-bar b{font-family:var(--mono);color:#ffd9b8}
.hold-bar .btn.ghost{background:transparent;color:#cfe3fa;border-color:rgba(255,255,255,.3)}
.hold-bar .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}

/* comment pins: small on the page, readable on hover */
.an-note{cursor:pointer}
.an-note svg{display:block;filter:drop-shadow(0 1px 2px rgba(10,27,51,.35))}
.an-note-tip{
  position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  background:var(--navy);color:#fff;border-radius:10px;padding:9px 13px;
  font-size:.84rem;line-height:1.45;max-width:260px;width:max-content;
  box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity .14s;
  white-space:pre-wrap;z-index:40;
}
.an-note-tip::before{content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:var(--navy);border-radius:2px}
.an-note:hover .an-note-tip,.an-note:focus-within .an-note-tip{opacity:1}
.an-note.tip-up .an-note-tip{top:auto;bottom:calc(100% + 8px)}
.an-note.tip-up .an-note-tip::before{top:auto;bottom:-5px}
.an-note.tip-left .an-note-tip{left:0;transform:none}
.an-note.tip-left .an-note-tip::before{left:11px;transform:rotate(45deg)}
.an-note.tip-right .an-note-tip{left:auto;right:0;transform:none}
.an-note.tip-right .an-note-tip::before{left:auto;right:11px;transform:rotate(45deg)}

/* ---------- compress page ---------- */
.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.preset{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:#fff}
.preset:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px rgba(27,95,217,.18)}
.preset input{position:absolute;opacity:0;pointer-events:none}
.preset b{font-size:.95rem}
.preset span{font-size:.82rem;color:var(--muted);line-height:1.45}
.cz-figures{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-family:var(--mono);font-size:.9rem;margin:6px 0 14px}
.cz-figures b{font-size:1.4rem;color:var(--navy)}
.cz-figures .arrow{color:var(--muted)}
.plus-tag{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:rgba(27,95,217,.1);border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:6px}
/* on the tinted carts the tag wears white in a translucent white pill,
   so it can actually be seen against the blue */
.tool-card[class*="t-"] .plus-tag{color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4)}
.plus-tag.biz{margin-left:4px}
/* ---------- where new pages go ---------- */
.ins-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.92rem}
.ins-opt:has(input:checked){border-color:var(--blue);background:rgba(27,95,217,.05)}

/* ---------- shared sessions ---------- */
.an.theirs{cursor:default}
.an.theirs.selected{outline:none}
.an.theirs .grip,.an.theirs .kill{display:none !important}
.share-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:30}
.share-cursor{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;transition:left .06s linear,top .06s linear}
.share-cursor .dot{width:24px;height:24px;border-radius:50%;color:#fff;font:600 .68rem/24px system-ui,sans-serif;text-align:center;box-shadow:0 1px 3px rgba(10,27,51,.4);border:2px solid #fff}
.share-lock{position:absolute;border:2px dashed;border-radius:4px;opacity:.85}
.share-lock .tag{position:absolute;left:-2px;top:-20px;color:#fff;font:600 .66rem/18px system-ui,sans-serif;padding:0 7px;border-radius:9px 9px 9px 0;white-space:nowrap}
.an-by{position:absolute;left:-4px;top:-14px;color:#fff;font:600 .6rem/14px system-ui,sans-serif;padding:0 5px;border-radius:7px;pointer-events:none;letter-spacing:.03em}
.an-by-name{font-weight:700;margin-right:4px}
.share-box{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.share-head{font-size:.86rem}
.share-head span{color:var(--muted)}
.share-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.share-avatar{width:28px;height:28px;border-radius:50%;color:#fff;font:600 .7rem/28px system-ui,sans-serif;text-align:center;border:2px solid #fff;box-shadow:0 0 0 1px rgba(10,27,51,.15)}
.share-avatar.off{opacity:.35}
.share-avatar.you{box-shadow:0 0 0 2px var(--navy)}
.share-note{font-size:.76rem;color:var(--muted);margin-top:6px;line-height:1.5}
.pg .who{position:absolute;left:6px;top:6px;display:flex;gap:3px}
.pg .who i{display:block;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(10,27,51,.2)}

/* ---------- the account page: profile ---------- */
/* two true columns: cards stack with one even rhythm inside each, so a
   tall card on one side never opens a gap on the other */
.prof-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.prof-col{display:flex;flex-direction:column;gap:20px;min-width:0}
@media(max-width:880px){.prof-grid{grid-template-columns:1fr}}
.prof-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 26px;box-shadow:var(--shadow-sm)}
.prof-h{font-size:1.05rem;margin:0 0 14px}
.prof-h.on-purple{color:#fff;font-size:1.25rem}
.prof-cap{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.prof-dim{color:var(--muted);font-size:.9rem}
.prof-id{display:flex;gap:24px;align-items:flex-start}
.prof-avatar{width:112px;height:112px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:2.2rem;letter-spacing:-.02em;box-shadow:inset 0 0 0 6px rgba(255,255,255,.35)}
.prof-who{flex:1;min-width:0}
.prof-name-row{display:flex;align-items:center;gap:10px}
.prof-name-row h2{margin:0;font-size:1.35rem}
.prof-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 0;font-size:.92rem}
.prof-facts dt{color:var(--muted)}
.prof-facts dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.prof-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{display:inline-block;background:var(--ice);color:var(--navy);border-radius:999px;padding:4px 11px;font-size:.78rem;font-weight:500}
.prof-planline{display:flex;align-items:center;gap:10px}
.plan-pill{display:inline-block;color:#fff;border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:600}
.prof-card-no{font-family:var(--mono);background:var(--paper);border-radius:10px;padding:10px 14px;font-size:.9rem;color:var(--muted)}
.prof-paylogos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.prof-paylogos span{border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.prof-stats{display:flex;gap:10px;margin-bottom:14px}
.prof-stats .stat{flex:1;background:var(--paper);border-radius:12px;padding:10px 12px}
.prof-stats .stat b{display:block;font-size:1.35rem;letter-spacing:-.02em;color:var(--navy)}
.prof-stats .stat span{font-size:.76rem;color:var(--muted)}
.prof-timeline{position:relative;padding-left:26px}
.prof-timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--ice)}
.tl{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;margin-bottom:6px;font-size:.88rem}
.tl i{position:absolute;left:-24px;top:50%;width:12px;height:12px;border-radius:50%;transform:translateY(-50%);border:2px solid #fff;box-shadow:0 0 0 2px var(--ice)}
.tl div{flex:1;min-width:0}.tl div b{display:block;font-weight:600}.tl div span{color:var(--muted);font-size:.8rem;text-transform:capitalize}
.tl time{color:var(--muted);font-size:.78rem;white-space:nowrap}
.tl.blue{background:#EEF2FD}.tl.blue i{background:var(--blue)}
.tl.green{background:#EAF7F0}.tl.green i{background:#2E9E62}
.tl.gold{background:#FFF6E5}.tl.gold i{background:#D9A21B}
.tl.red{background:#FDECEC}.tl.red i{background:var(--danger)}
.prof-shares{display:flex;flex-direction:column;gap:6px}
.share-row{display:flex;justify-content:space-between;gap:10px;background:#F3F0FE;border-radius:12px;padding:9px 12px;font-size:.88rem;color:var(--ink)}
.share-row:hover{text-decoration:none;background:#E9E4FC}
.share-row span{color:var(--muted);font-size:.78rem;white-space:nowrap}
.prof-purple{background:linear-gradient(160deg,#4A3FB5,#3A2F9E);color:#fff;border:none}
.prof-list{margin:0;padding-left:18px;line-height:1.7;font-size:.92rem;color:#EAE7FF}
.prof-list b{color:#fff}
.btn.prof-white{background:#fff;color:#3A2F9E;box-shadow:none}
.btn.prof-white:hover{background:#F1EEFF}
.btn.prof-ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.btn.prof-ghost:hover{background:rgba(255,255,255,.12)}
.prof-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:28px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.link-danger{background:none;border:none;color:#FFD3D3;font:inherit;font-size:.82rem;cursor:pointer;text-decoration:underline}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:14px 0 6px}
.f-row{display:block;font-size:.85rem;font-weight:500}
.f-row input{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit}
.f-grid .f-row:first-child{grid-column:1/-1}
/* ---------- the plan step after signing up ---------- */
.modal.modal-wide{max-width:960px;width:calc(100% - 32px)}
.modal .eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 4px}
.pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
@media(max-width:820px){.pick-grid{grid-template-columns:1fr}}
.pick{border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px;background:#fff}
.pick.featured{border-color:var(--blue);box-shadow:0 0 0 2px rgba(27,95,217,.2);background:#F5F8FF;transform:translateY(-6px)}
.pick.pro{background:#FBF9FF}
.pick-top{display:flex;justify-content:space-between;align-items:baseline}
.pick-top b{font-size:1.05rem}.pick-top span{font-size:.76rem;color:var(--muted)}
.pick-price .amt{font-family:var(--display);font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
.pick-price .per{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.pick-why{font-size:.84rem;color:var(--blue);font-weight:500;margin:0}
.pick-miss{font-size:.8rem;color:var(--danger);margin:0}
.pick ul{margin:0;padding-left:18px;font-size:.86rem;line-height:1.5;flex:1}
.pick ul li{margin-bottom:5px}
.pick .btn{align-self:stretch;justify-content:center}

/* ---------- segmented on/off, the DEV/PROD pill in blue and white ---------- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff;gap:2px}
.seg button{border:none;background:none;border-radius:999px;padding:5px 14px;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--muted);cursor:pointer;font-family:inherit}
.seg button.on{background:var(--blue);color:#fff}
.seg button:not(.on):hover{color:var(--ink)}
.share-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
.share-opt b{font-size:.92rem}
.share-opt-rail{margin:10px 0 4px}
.share-opt-rail span{font-size:.8rem;color:var(--muted)}
.share-opt-rail .seg button{padding:3px 10px;font-size:.68rem}
.share-range{display:flex;align-items:center;gap:8px;font-size:.9rem;margin:-2px 0 12px}
.share-range input{width:74px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit}
.tiny-note{display:block;font-size:.78rem;color:var(--muted);line-height:1.5}
/* ---------- capture ---------- */
.marquee.capture{border-color:#12855B;background:rgba(18,133,91,.08)}

/* ---------- the owner's room controls ---------- */
.share-owner{display:flex;flex-direction:column;gap:8px;margin:10px 0 2px}
.sop-row{display:flex;align-items:center;gap:8px}
.sop-row .seg button{padding:3px 9px;font-size:.66rem}
.sop-eye{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font-size:.66rem;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
.sop-eye.off{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- the participant table ---------- */
.manage-modal{width:min(860px,94vw);height:560px;max-width:none;display:flex;flex-direction:column;position:relative}
.mng-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mng-head h3{margin:0 8px 0 0}
.mng-head input[type=search]{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;min-width:120px}
.mng-actions{position:relative}
.mng-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(10,20,40,.14);padding:6px;z-index:30;display:flex;flex-direction:column;min-width:220px}
.mng-menu button{border:none;background:none;text-align:left;padding:8px 12px;border-radius:8px;font:inherit;font-size:.86rem;cursor:pointer}
.mng-menu button:hover{background:var(--wash)}
.mng-menu button.danger{color:#B4231F;font-weight:600}
.mng-close{border:none;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px}
.mng-table{flex:1;overflow:auto;border:1px solid var(--line);border-radius:12px}
.mng-table table{width:100%;border-collapse:collapse;font-size:.85rem}
.mng-table th{position:sticky;top:0;background:var(--wash);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:5}
.mng-table td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.mng-table tr.dirty td{background:#FFF9E8}
.mng-col{border:none;background:none;font:inherit;font-weight:700;cursor:pointer;padding:0}
.mng-email{color:var(--muted);max-width:180px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mng-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#0FA47A;margin-left:4px}
.mng-seg button{padding:3px 10px;font-size:.68rem}
.mng-filter{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(10,20,40,.16);padding:10px;z-index:40;display:flex;flex-direction:column;gap:6px;min-width:220px;margin-top:4px}
.mng-filter>button{border:none;background:none;text-align:left;font:inherit;font-size:.84rem;padding:6px 8px;border-radius:8px;cursor:pointer}
.mng-filter>button:hover{background:var(--wash)}
.mng-fsearch{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:.82rem}
.mng-fvals{max-height:150px;overflow:auto;display:flex;flex-direction:column;gap:4px;font-size:.84rem}
.mng-fvals label{display:flex;gap:6px;align-items:center}
.mng-fbtns{display:flex;gap:8px;justify-content:flex-end}
.mng-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:16px}
.mng-count{font-size:.82rem;color:var(--muted)}
/* the pager: a slider between pages, the current page riding on the thumb */
.mng-pager{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--muted);min-width:200px;justify-content:flex-end}
.mng-slide{position:relative;flex:1;max-width:220px;padding-top:6px}
.mng-slide input[type=range]{width:100%;appearance:none;height:26px;border:1px solid var(--line);border-radius:999px;background:var(--wash);padding:0 6px}
.mng-slide input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:grab;border:none}
.mng-slide input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:grab;border:none}
.mng-slide output{position:absolute;top:-16px;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:.7rem;padding:2px 8px;border-radius:999px}
.mng-slide output::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--blue)}
.mng-guard{position:absolute;inset:0;background:rgba(250,251,253,.9);display:flex;align-items:center;justify-content:center;border-radius:inherit;z-index:60}
.mng-guard-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(10,20,40,.16);padding:20px;max-width:380px}
.mng-guard-card p{color:var(--muted);font-size:.9rem;margin:8px 0 14px}
.mng-who b{font-weight:600}
.mng-status{display:flex;gap:5px}
.mchip{display:inline-block;border-radius:999px;padding:2px 8px;font-size:.66rem;font-weight:700;background:#E7F3EC;color:#12855B}
.mchip.off{background:#FBEAE9;color:#B4231F}
.mng-menu-note{display:block;padding:10px 12px;font-size:.82rem;color:var(--muted);max-width:230px}

.prof-renew{font-size:.8rem;color:var(--muted);margin:10px 0 0}
/* A quiet way out: white, outlined, red lettering - never the solid red
   fill of .btn.danger, whose dark-red text on a red ground reads as an
   empty capsule. Background and shadow are stated so the earlier
   .btn.danger fill cannot win by source order. */
.btn.ghost.danger{color:#B4231F;border:1px solid #EAC7C5;background:#fff;box-shadow:none}
.btn.ghost.danger:hover{background:#FBEAE9;border-color:#B4231F;color:#8f232b}

/* ---------- the welcome, by tier ---------- */
.welcome-card{position:relative;text-align:center;max-width:440px;border-top:6px solid var(--blue)}
.welcome-card h3{margin:10px 0 8px;font-size:1.25rem}
.welcome-x{position:absolute;top:10px;right:12px;border:none;background:none;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.welcome-free{border-top-color:#5B6B84}
.welcome-plus{border-top-color:#3453D8;background:linear-gradient(180deg,#F4F6FF, #fff 46%)}
.welcome-pro{border-top-color:#8E1BD9;background:linear-gradient(180deg,#FAF3FF, #fff 46%)}
.welcome-pro h3{color:#5E1291}
.pw-label{display:block;margin:6px 0 2px;font-weight:600;font-size:.86rem}
.pw-label input{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit}

/* ---------- send to sign ---------- */
.ss-card{margin-top:22px}
.ss-box{border:2px dashed var(--line);border-radius:16px;padding:16px;min-height:64px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--wash);transition:border-color .15s}
.ss-box:hover{border-color:var(--blue)}
.ss-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.86rem;font-weight:600;box-shadow:0 1px 2px rgba(15,27,56,.06)}
.ss-pill button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1.05rem;line-height:1;padding:0}
.ss-pill button:hover{color:#B4231F}
.ss-pill.locked{border-style:dashed;background:var(--wash)}
.ss-empty{color:var(--muted);font-size:.88rem}
.ss-actions{display:flex;gap:10px;margin-top:12px}
.ss-addrow{margin-top:12px;max-width:460px}
.ss-cosign{display:flex;gap:12px;margin-top:26px;font-size:.92rem;align-items:flex-start;line-height:1.55}
.ss-cosign input{margin-top:4px;accent-color:var(--blue);width:17px;height:17px}
.ss-quota{font-size:.84rem;color:var(--muted);margin:14px 0 0}
.ss-send-row{display:flex;gap:12px;justify-content:flex-end;margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.ss-links{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;font-size:.85rem}
.ss-links code{display:block;background:var(--wash);border-radius:10px;padding:8px 12px;margin:8px 0;word-break:break-all}
/* the popup keeps the same face, smaller */
.modal.ss-card{max-width:640px;width:min(640px,94vw);max-height:88vh;overflow:auto;text-align:left;margin-top:0}
.modal.ss-card .panel-head h2{font-size:1.02rem}
.modal.ss-card .panel-head{margin-top:14px}
/* the public signing page: the logo and the paper, nothing else */
.sign-view{background:#eef2f9;min-height:100vh}
.sign-top{padding:16px 24px;background:#fff;border-bottom:1px solid var(--line)}
.sign-doc{background:#fff;box-shadow:var(--shadow-md);margin:26px auto;position:relative;max-width:900px}
.sign-doc canvas{display:block;width:100%}
.sign-mark{position:absolute;font-family:'Segoe Script','Brush Script MT',cursive;color:#14235c;display:flex;align-items:center;font-weight:600;pointer-events:none;white-space:nowrap}
.sign-here{position:absolute;background:var(--blue);color:#fff;border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(27,63,217,.35);transform:translate(-4px,-120%);z-index:5}
.sign-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 24px;display:flex;gap:12px;justify-content:center;z-index:10}

/* while signing, the page is the logo and the paper - nothing else */
body.sign-mode .site-head, body.sign-mode .site-foot, body.sign-mode .adbar{display:none}

/* ---------- the documents-to-sign island ---------- */
.env-bar{margin:4px 0 12px}
.env-bar input{width:min(340px,100%);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit}
.env-tablewrap{min-height:520px}
.env-table{width:100%;border-collapse:collapse;font-size:.88rem}
.env-table th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.env-table th.sortable{cursor:pointer;user-select:none}
.env-table th.sortable:hover{color:var(--ink)}
.env-arrow{font-size:.72rem}
.env-filters th{padding:4px 10px 10px}
.env-filters input{width:100%;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;font-size:.8rem}
.env-table td{padding:10px;border-bottom:1px solid var(--wash);vertical-align:top}
.env-table td a{font-weight:700}
/* every sub-line is the same fixed height in every column, so signer,
   date and pills sit on one shared baseline; long e-mails ellipsize
   instead of wrapping the grid out of alignment */
.env-sub{display:block;height:36px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0}
.env-sub.dim, .env-dim{color:var(--muted)}
.env-pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:.84rem;color:var(--muted)}
.env-pager button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;cursor:pointer;font:inherit}
.env-pager button:disabled{opacity:.4;cursor:default}
/* ---------- all signed, in the middle of the page ---------- */
.sign-done{min-height:70vh;display:flex;align-items:center;justify-content:center}
.sign-done-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);padding:46px 56px;text-align:center;max-width:460px}
.sign-done-card h1{margin:18px 0 8px}
.sign-check{width:76px;height:76px;border-radius:50%;background:#E7F6EC;display:inline-flex;align-items:center;justify-content:center;animation:signpop .45s cubic-bezier(.2,1.6,.4,1)}
.sign-check svg{width:40px;height:40px;stroke:#1F9D55;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes signpop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

.env-open{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:2px 12px;font-size:.76rem;font-weight:700}
.env-open:hover{text-decoration:none;filter:brightness(1.08)}

/* a small round × beside Open - the pair sits on one line per signer */
.env-bin{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#fff;color:#B4231F;border:1px solid #EAC7C5;border-radius:50%;font-size:.9rem;font-weight:700;line-height:1;cursor:pointer;font-family:inherit;padding:0;vertical-align:middle}
.env-bin:hover{background:#D9534F;border-color:#D9534F;color:#fff}
/* the pill row inherits the 36px line-height meant for text; on a flex
   row that inflates the pill itself into a fat oval - reset it so the
   pill stays a small capsule centred inside the 36px line */
.env-table td:last-child .env-sub{display:flex;align-items:center;gap:8px;overflow:visible;line-height:1}
.env-open{line-height:1.35;padding:3px 12px;font-size:.76rem;flex:none}
.env-bin{flex:none}

.an-sealed{pointer-events:none}
.an-sealed:hover{outline:none}

/* ---------- folding cards ---------- */
.prof-card.foldable > .prof-h{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.fold-x{border:1px solid var(--line);background:#fff;border-radius:8px;width:26px;height:26px;font-size:1rem;line-height:1;cursor:pointer;color:var(--muted)}
.prof-card.foldable.folded .fold-body{display:none}

/* ---------- the column menu, one kit for every table ---------- */
.colmenu-tri{border:none;background:none;cursor:pointer;color:var(--muted);font-size:.9rem;padding:0 2px;margin-left:4px}
.colmenu-tri:hover{color:var(--ink)}
.colmenu{position:absolute;top:100%;left:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:12px;min-width:240px;text-align:left;text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:500;color:var(--ink)}
.colmenu-sort{display:flex;gap:8px;align-items:center;width:100%;border:none;background:none;padding:7px 6px;cursor:pointer;font:inherit;border-radius:8px;text-align:left}
.colmenu-sort:hover{background:var(--wash)}
.colmenu-ico{color:var(--blue)}
.colmenu-line{border-top:1px solid var(--line);margin:8px 0}
.colmenu-search{width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;margin-bottom:8px}
.colmenu-vals{max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.colmenu-vals label{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:6px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.colmenu-vals label:hover{background:var(--wash)}
.colmenu-foot{display:flex;gap:8px;margin-top:10px}
.env-tablewrap{min-height:308px}

.pick-grid.two{grid-template-columns:1fr 1fr}
.pick-close{position:absolute;top:14px;right:16px;border:none;background:none;font-size:1.2rem;color:var(--muted);cursor:pointer}
.pick-close:hover{color:var(--ink)}

/* tools above your plan: dimmed, cursor says no, the title says which plan */
.tier-locked{opacity:.42;filter:saturate(.4);cursor:not-allowed}
.tier-locked:hover{opacity:.6}

/* ---------- the done card: one finish for every big transformation ---------- */
.done-card{text-align:center;padding:26px 18px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#F3FBF6,#fff 60%)}
.done-card .sign-check{margin:0 auto 12px}
.done-card h3{margin:0 0 6px;font-size:1.25rem}
.done-card .done-sub{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.done-card .cz-figures{display:inline-flex;gap:10px;align-items:center;justify-content:center}
.done-card .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* ---------- the importer: one dashed zone, four sources, one promise ---------- */
.drop.importer{padding:44px 24px 40px;text-align:center;border:2px dashed #C9D6F2;border-radius:22px;background:linear-gradient(180deg,#F8FAFF,#F3F6FC)}
.drop.importer .imp-ico{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:#EEF3FD;border:1px solid #DCE6FA;margin-bottom:18px}
.drop.importer .imp-ico svg{width:34px;height:34px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.9}
.drop.importer h3{font-size:1.6rem;margin:0 0 8px;color:var(--ink)}
.drop.importer p{color:var(--muted);font-size:1.02rem;margin:0 0 18px}
.imp-pill{display:inline-flex;gap:8px;align-items:center;background:#EEF3FD;border:1px solid #DCE6FA;border-radius:12px;padding:10px 18px;color:#3F5C9A;font-weight:500;font-size:.92rem}
.src-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.dest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 14px}
.dest-cap{font-size:.9rem;font-weight:600;margin:6px 0 0}
.src-tile{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #DFE7F6;border-radius:16px;background:#fff;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink);box-shadow:0 1px 2px rgba(20,35,92,.04);transition:box-shadow .15s,transform .15s}
.src-tile:hover{box-shadow:0 6px 18px rgba(20,35,92,.10);transform:translateY(-1px)}
.src-tile .src-ico{width:56px;height:56px;flex:none;border-radius:14px;background:#F3F6FC;border:1px solid #DFE7F6;object-fit:contain;padding:8px;box-sizing:border-box}
.src-tile .src-ico-mail{display:inline-flex;align-items:center;justify-content:center}
.src-tile .src-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.src-tile .src-txt b{font-size:1rem;font-weight:700}
.src-tile .src-txt small{color:var(--muted);font-size:.86rem;line-height:1.35;margin-top:2px}
.src-tile .src-arrow{color:#6B7A99;font-size:1.5rem;line-height:1;flex:none}
.imp-note{margin-top:20px;border-radius:16px;background:#EEF3FD;border:1px solid #DCE6FA;padding:16px 18px}
.imp-note svg{color:var(--blue)}
.imp-note b{color:#2F55B5}
@media (max-width:900px){.src-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.src-grid,.dest-grid{grid-template-columns:1fr}}

.src-tile.src-off .src-ico{filter:grayscale(.6);opacity:.75}
.src-tile.src-off small{color:#B4231F}
/* the same four sources under every drop zone, in miniature */
.src-row{display:flex;gap:8px;justify-content:center;margin-top:12px}
.src-mini{width:42px;height:42px;border-radius:12px;border:1px solid #DFE7F6;background:#F3F6FC;padding:6px;cursor:pointer;transition:box-shadow .15s}
.src-mini:hover{box-shadow:0 4px 12px rgba(20,35,92,.12)}
.src-mini img{width:100%;height:100%;object-fit:contain}
.src-mini.src-off{opacity:.5;filter:grayscale(.6)}

/* ---------- contact: words left, the form right ---------- */
.contact-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.contact-form{padding:22px}
.contact-form h2{margin-top:0}
.contact-form .pw-label{display:block;margin-bottom:12px}
.contact-form select,.contact-form textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.contact-form textarea{resize:vertical}
@media (max-width:860px){.contact-cols{grid-template-columns:1fr}}

/* ---------- the progress tube ----------
   A glass tube that fills with blue as a job moves. When the worker can
   measure (translation counts its pages) the fill is the real percentage and
   the number is printed; when it cannot, the tube crawls - a slow, honest
   "something is happening" that never claims a number it does not have. */
.tube{position:relative;height:16px;border-radius:999px;overflow:hidden;margin:12px 0 6px;
  background:linear-gradient(180deg,rgba(27,95,217,.05),rgba(27,95,217,.10));
  border:1px solid rgba(27,95,217,.25);
  box-shadow:inset 0 2px 5px rgba(15,30,60,.14),inset 0 -1px 0 rgba(255,255,255,.5),0 1px 0 rgba(255,255,255,.65)}
.tube .fill{position:absolute;top:0;bottom:0;left:0;width:0%;border-radius:inherit;
  background:linear-gradient(180deg,#4D8BF0 0%,var(--blue) 55%,var(--blue-dk) 100%);
  box-shadow:0 0 12px rgba(27,95,217,.5),inset 0 1px 0 rgba(255,255,255,.35);
  transition:width .6s cubic-bezier(.25,.6,.3,1)}
.tube .gleam{position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.4) 30%,rgba(255,255,255,.4) 70%,rgba(255,255,255,.0));
  pointer-events:none}
.tube .pct{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;color:var(--blue-dk);
  text-shadow:0 1px 0 rgba(255,255,255,.7)}
.tube.crawl .fill{animation:tube-crawl 18s cubic-bezier(.12,.55,.25,1) forwards}
@keyframes tube-crawl{0%{width:6%}15%{width:40%}45%{width:68%}75%{width:82%}100%{width:91%}}
@media (prefers-reduced-motion: reduce){.tube .fill{transition:none}.tube.crawl .fill{animation-duration:36s}}
/* the tube's wrapper: a full row of its own, whatever container it lands in.
   The state spans live inside display:flex .actions rows, and a contentless
   div dropped into a flex row collapses to width zero - which is exactly how
   the tube shipped invisible twice. Never again: full flex-basis, full
   width, and a floor. */
.tube-wrap{flex:1 1 100%;width:100%;min-width:240px;display:block}
/* the destination grid under a finished job: the same tiles as the studio's save panel */
.done-card .dest-lead{margin:16px 0 8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.done-card .dest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;text-align:left}