/* Object Cinema workspace — same identity as the landing page, tuned for work:
   readable controls, obvious state, no decoration that costs a click. */
:root{
  --ink:#14110E; --ink-2:#1A1714; --ink-3:#221E1A; --ink-4:#2C2723;
  --ivory:#EFE9DF; --dim:#A29A8E; --faint:#6B635A;
  --amber:#C98B3A; --amber-soft:#E0AC63;
  --ok:#7FA663; --warn:#C98B3A; --bad:#C0654B;
  --rule:#2E2823;
  --display:'Fraunces',Georgia,serif;
  --ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --side:216px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--ui);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.015em;margin:0}
h1{font-size:29px}h2{font-size:22px}h3{font-size:18px}

/* demo banner */
.demo{background:#2A211A;border-bottom:1px solid #4A3823;padding:8px 16px;text-align:center;
  font-size:12.5px;color:#E5C79A;position:sticky;top:0;z-index:60}
.demo b{color:var(--amber-soft);font-weight:600}

/* shell */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{border-right:1px solid var(--rule);padding:18px 12px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow:auto}
.mark{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em;padding:6px 10px 16px;text-decoration:none;color:var(--ivory)}
.mark em{font-style:italic;color:var(--amber)}
.side nav{display:flex;flex-direction:column;gap:2px}
.side a.item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:3px;
  text-decoration:none;color:var(--dim);font-size:14px}
.side a.item:hover{background:var(--ink-2);color:var(--ivory)}
.side a.item[aria-current="page"]{background:var(--ink-3);color:var(--ivory)}
.side a.item .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);margin-left:auto}
.side .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
.bal{background:var(--ink-2);border:1px solid var(--rule);border-radius:3px;padding:12px;margin:10px 2px}
.bal .n{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.02em}
.main{padding:26px clamp(16px,3vw,40px) 80px;max-width:1180px}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.head p{margin:6px 0 0;color:var(--dim);font-size:14px;max-width:56ch}

@media (max-width:840px){
  .shell{grid-template-columns:1fr}
  .side{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;gap:8px;
    overflow-x:auto;padding:10px 12px;border-right:0;border-bottom:1px solid var(--rule);background:var(--ink)}
  .mark{padding:0 8px 0 2px;font-size:15px}
  .side nav{flex-direction:row;gap:2px}
  .side a.item{white-space:nowrap;padding:7px 10px}
  .side .foot,.side .bal{display:none}
  .main{padding:18px 16px 80px}
}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600;
  padding:10px 16px;border-radius:3px;border:1px solid var(--amber);background:var(--amber);color:#181309;
  cursor:pointer;text-decoration:none}
.btn:hover:not(:disabled){background:var(--amber-soft);border-color:var(--amber-soft)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ivory);border-color:var(--rule)}
.btn.ghost:hover:not(:disabled){border-color:var(--dim);background:var(--ink-2)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn .cost{font-family:var(--mono);font-size:11px;opacity:.75;letter-spacing:.06em}
input[type=text],textarea,select{width:100%;background:var(--ink-2);border:1px solid var(--rule);
  border-radius:3px;padding:10px 12px;font-size:14px}
textarea{min-height:92px;resize:vertical;line-height:1.5}
label.f{display:block;margin-bottom:16px}
label.f span{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
label.f .hint{font-size:12.5px;color:var(--faint);margin-top:5px}

/* cards + grid */
.card{background:var(--ink-2);border:1px solid var(--rule);border-radius:3px;padding:18px}
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.g3,.g4{grid-template-columns:1fr}}
.stat{display:flex;flex-direction:column;gap:3px}
.stat .n{font-family:var(--display);font-size:30px;line-height:1.05;letter-spacing:-.02em}
.stat .n.sm{font-size:20px}

/* status */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:2px;
  border:1px solid var(--rule);color:var(--dim);background:var(--ink-3)}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.pill.go{color:var(--ok);border-color:#33452A}
.pill.busy{color:var(--amber);border-color:#4A3823}
.pill.stop{color:var(--bad);border-color:#4A2A22}

/* product / film tiles */
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
a:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}
.note a{text-decoration:underline}

.tile{border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--ink-2);
  text-align:left;cursor:pointer;padding:0;width:100%;display:block}
.tile:hover{border-color:var(--dim)}
.tile[aria-pressed="true"]{border-color:var(--amber)}
.tile .ph{aspect-ratio:3/4;background:var(--ink-3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile .ph img{width:100%;height:100%;object-fit:cover}
.tile .ph span{font-family:var(--mono);font-size:10px;color:var(--faint)}
.tile .b{padding:10px 12px}
.tile .b b{display:block;font-weight:500;font-size:14px}
.tile .b em{font-style:normal;font-size:12px;color:var(--faint)}

/* image slots */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.slot{border:1px dashed var(--rule);border-radius:3px;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:var(--faint);position:relative;overflow:hidden}
.slot.has{border-style:solid}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .ctl{position:absolute;inset:auto 0 0 0;background:rgba(10,8,6,.86);padding:6px;display:flex;gap:4px}
.slot select{padding:4px 6px;font-size:11px;background:var(--ink);border-color:var(--rule)}
.slot .x{border:1px solid var(--rule);background:var(--ink);border-radius:2px;padding:0 8px;cursor:pointer;font-size:14px}
.drop{border:1px dashed var(--rule);border-radius:3px;padding:26px;text-align:center;color:var(--dim);cursor:pointer}
.drop.over{border-color:var(--amber);background:var(--ink-2)}

/* stepper */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.steps div{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--rule);border-radius:2px;color:var(--faint)}
.steps div[data-on="1"]{border-color:var(--amber);color:var(--amber)}
.steps div[data-done="1"]{color:var(--ivory)}

/* cost box */
.cost-box{border:1px solid var(--rule);border-radius:3px;background:var(--ink-2);padding:16px}
.cost-box .ln{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.cost-box .ln:last-of-type{border-bottom:0}
.cost-box .ln em{font-style:normal;color:var(--faint);font-size:12px}
.cost-box b{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.cost-box .now{color:var(--amber)}

/* table */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:400;padding:9px 10px;border-bottom:1px solid var(--rule)}
td{padding:11px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
td.num.pos{color:var(--ok)}
.scroll{overflow-x:auto}

/* notes */
.note{border:1px solid var(--rule);border-left:2px solid var(--amber);background:var(--ink-2);
  padding:12px 14px;border-radius:2px;font-size:13.5px;color:var(--dim)}
.note.bad{border-left-color:var(--bad)}
.note.good{border-left-color:var(--ok)}
.note b{color:var(--ivory);font-weight:600}
.empty{border:1px dashed var(--rule);border-radius:3px;padding:40px 24px;text-align:center;color:var(--dim)}
.empty h3{margin-bottom:6px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--ink-4);border-top-color:var(--amber);
  border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
video{width:100%;background:#000;border-radius:2px}

/* lead-with-the-action quote */
.cost-box .lead { font-size: 17px; font-weight: 500; margin-top: 10px; letter-spacing: -.01em; }
.cost-box .lead-sub { color: var(--dim); font-size: 13.5px; margin-top: 3px; }
.cost-box details summary::-webkit-details-marker { display: none; }
.cost-box details summary { list-style: none; }
.cost-box details summary::after { content: ' ▾'; }
.cost-box details[open] summary::after { content: ' ▴'; }

/* direction cards */
.dircard[data-chosen] { border-color: var(--amber); }
.tile.use[aria-pressed="true"] { border-color: var(--amber); }

/* revision panel */
.adj { display: flex; flex-wrap: wrap; gap: 8px; }
.adj button { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 12px; border: 1px solid var(--rule); background: transparent; color: var(--dim);
  cursor: pointer; border-radius: 2px; }
.adj button[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.vers { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ─── format tiles ───────────────────────────────────────────────────────────
   Each tile draws its own shape at its true proportions from --rw/--rh, so a
   square tile is square and a 16:9 tile is wide. Nothing here is decorative:
   the picture IS the information. Targets are ≥44px on every axis for touch. */
.ratios{display:flex;flex-wrap:wrap;gap:12px}
.ratio{flex:1 1 150px;min-width:140px;min-height:44px;background:var(--ink-2);
  border:1px solid var(--rule);border-radius:3px;padding:18px 14px 14px;cursor:pointer;
  text-align:center;color:inherit;font:inherit;transition:border-color .12s,background .12s}
.ratio:hover{border-color:var(--dim)}
.ratio:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ratio[aria-pressed="true"]{border-color:var(--amber);background:var(--ink-3)}
.ratio .shape{display:block;margin:0 auto 14px;height:104px;
  width:calc(104px * var(--rw) / var(--rh));max-width:100%;
  border:1.5px solid var(--dim);border-radius:2px;background:var(--ink-3)}
.ratio[aria-pressed="true"] .shape{border-color:var(--amber);background:rgba(255,255,255,.04)}
.ratio b{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.04em}
.ratio em{display:block;font-style:normal;font-size:13px;color:var(--ivory);margin-top:3px}
.ratio i{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:6px;line-height:1.4}
@media (max-width:520px){
  .ratio{flex:1 1 calc(50% - 12px)}
  .ratio .shape{height:76px;width:calc(76px * var(--rw) / var(--rh))}
}

/* ─── visual direction gallery ───────────────────────────────────────────────
   Square thumbnails, because a square is the one shape that crops honestly from
   both masters. Every tile carries a "Style reference" mark: these are stills of
   demonstration products and must never read as the customer's own. */
.styles{gap:16px}
.style{display:block;text-align:left;background:var(--ink-2);border:1px solid var(--rule);
  border-radius:3px;overflow:hidden;cursor:pointer;color:inherit;font:inherit;padding:0;
  transition:border-color .12s}
.style:hover{border-color:var(--dim)}
.style:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.style[aria-pressed="true"]{border-color:var(--amber)}
.style .ph{display:block;position:relative;aspect-ratio:1/1;background:var(--ink-3);overflow:hidden}
.style .ph img{width:100%;height:100%;object-fit:cover;display:block}
.style .ref{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.62);
  padding:3px 7px;border-radius:2px;backdrop-filter:blur(2px)}
.style[aria-pressed="true"] .ph::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 3px var(--amber)}
.style .b{display:block;padding:13px 14px 15px}
.style .b b{display:block;font-weight:500;font-size:15px}
.style .b em{display:block;font-style:normal;font-size:13px;color:var(--dim);margin-top:4px;line-height:1.45}
.style .b .fit{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--amber);margin-top:8px}

/* ─── the three other ways in ─────────────────────────────────────────────── */
.alt-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.alt-row .btn{min-height:40px}
.alt-panel{margin-top:14px;padding:16px;border:1px solid var(--rule);border-radius:3px;background:var(--ink-2)}
.drop.sm{padding:22px;font-size:13.5px}
.inspo-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.inspo{width:88px;height:88px;padding:0;border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;background:var(--ink-3);cursor:pointer}
.inspo img{width:100%;height:100%;object-fit:cover;display:block}
.inspo[aria-pressed="true"]{border-color:var(--amber);box-shadow:inset 0 0 0 2px var(--amber)}

/* ─── the gate ───────────────────────────────────────────────────────────────
   No shell, no navigation, no balance until there is a session. A workspace
   chrome around an empty state invites the question "whose workspace?". */
body.auth-mode{display:block;background:var(--ink)}
.authwrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.authcard{width:100%;max-width:380px}
.authcard h1{font-family:var(--display);font-size:30px;letter-spacing:-.02em;margin:0 0 6px}
.authcard p{color:var(--dim);font-size:14px;margin:0 0 22px}
.authcard .mark{font-family:var(--display);font-size:19px;letter-spacing:-.01em;display:block}
.authcard .mark em{font-style:normal;color:var(--amber)}
.authswap{margin-top:20px;font-size:13.5px;color:var(--dim);text-align:center}
.authswap a{color:var(--amber)}

/* ─── the plan quote ─────────────────────────────────────────────────────────
   Six facts, one per cell, in the order the policy states them. A customer about
   to be charged should not have to hunt for the number. */
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.qgrid > div{background:var(--ink-3);border-radius:3px;padding:12px 13px}
.qgrid .mono{display:block;font-size:10px;letter-spacing:.09em;margin-bottom:6px}
.qgrid b{font-weight:500;font-size:17px;font-family:var(--display);letter-spacing:-.01em}
@media (max-width:760px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.qgrid{grid-template-columns:1fr}}
.card.plan[data-current="1"]{border-color:var(--amber)}

/* ---------- signup consents ----------
   Two checkboxes that mean different things and must never look like one block
   of boilerplate: agreeing to the Terms is required and is recorded against the
   account; marketing is optional, off by default, and unrelated to the account.
   The Privacy Policy sits between them as a NOTICE — no checkbox, because it is
   not a consent and pretending otherwise would misdescribe what happens. */
.consents{margin:16px 0 4px;display:flex;flex-direction:column;gap:12px}
.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:13px;line-height:1.5;color:var(--ivory-dim)}
.chk input{margin:2px 0 0;width:15px;height:15px;flex:0 0 auto;accent-color:var(--amber);cursor:pointer}
.chk a{color:var(--amber)}
.consent-note{margin:0;font-size:12px;line-height:1.55;color:var(--ivory-faint);
  padding-left:25px;border-left:1px solid var(--rule);margin-left:0}
/* The Privacy Policy link has to LOOK like a link. It is the only pointer to it
   at the moment a customer hands over their photographs. */
.consent-note a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.consent-note a:hover{color:var(--amber-soft)}

.authlegal{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivory-faint);text-align:center}
.authlegal a{color:var(--ivory-faint);text-decoration:none}
.authlegal a:hover{color:var(--amber)}

/* Legal links in the workspace chrome, so they are reachable from inside the
   product and not only from the marketing site. */
.ws-legal{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ivory-faint);padding:24px 0 32px;text-align:center;
  border-top:1px solid var(--rule);margin-top:40px}
.ws-legal a{color:var(--ivory-faint);text-decoration:none}
.ws-legal a:hover{color:var(--amber)}

/* The line under the plan cards. Renewal, expiry and the two links, immediately
   next to the button that starts a recurring charge — not only in the footer. */
.plan-legal{margin:16px 0 0;font-size:12px;line-height:1.6;color:var(--faint);max-width:70ch}
.plan-legal a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.plan-legal a:hover{color:var(--amber)}