/* components part 8 of 16 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

/* SELF-SERVE PLAN CARDS (/tools/ai-render/ #price, 3 Nov 2026): the app's /pricing cards on the site.
   Adds to .cardgrid.plans: who it is for, a big allowance number, price + per-unit line, icon rows,
   an "Everything in X, plus" header and a "Most popular" badge on the .guide-card. Numbers are swapped
   in the browser from app.3dstudio.co/api/prices, so every number sits in its own element. */
.pl-card .pl-for{font-size:14px;color:var(--muted);margin:4px 0 0;min-height:2.8em;line-height:1.4}
.pl-card .pl-price{margin:22px 0 0;font-size:15px;color:var(--muted);line-height:1}
.pl-card .pl-price b{font-family:var(--disp);font-size:clamp(42px,3.6vw,54px);font-weight:650;color:var(--ink);letter-spacing:-.035em}
.pl-card .pl-big{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--hair);font-size:15px;color:var(--ink);line-height:1.35}
.pl-card .pl-big b{font-weight:650}
.pl-card .pl-per{margin:6px 0 20px;font-size:13px;color:var(--faint);line-height:1.5;display:flex;flex-direction:column}
.cardgrid.plans.pl-grid>.pl-card.pl-card .guide-form{margin-top:0}
.cardgrid.plans .pl-card .guide-form .btn{width:100%;justify-content:center}
.pl-card .pl-cap{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.pl-card .pl-cap li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.35}
.pl-card .pl-cap svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--ink)}
.pl-card .pl-plus{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cardgrid.plans .pl-card .checks{margin:12px 0 0}
.cardgrid.plans .pl-card .checks li{font-size:14.5px}
.ci.ci-neg svg{color:var(--muted)}
.cardgrid.plans>.guide-card.pl-pop{background:#fff;border:2px solid var(--ink);overflow:visible}
.pl-pop .pl-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap}
.pl-grid{margin-top:8px}
/* PLAN CARDS, 4 Nov 2026 (Siim, via the AI Render session): white cards on the grey section, like app.3dstudio.co/pricing,
   with the price as the largest thing on the card. From 901px every card is a subgrid over the same 9 rows (name, for,
   price, allowance, per-render line, button, seats, "plus" header, list), so price, button and lists line up across the
   cards whatever the copy length, in every language. Phones keep the plain stacked card. */
.plans-sec.bg-grey .cardgrid.plans.pl-grid>.pl-card{background:#fff;border:1px solid var(--hair)}
.plans-sec.bg-grey .cardgrid.plans.pl-grid>.pl-card.pl-pop{border:2px solid var(--ink);box-shadow:0 18px 40px -24px rgba(20,19,16,.35)}
.plans-sec.bg-grey .pl-pack{background:#fff;border:1px solid var(--hair)}
.cardgrid.plans.pl-grid>.pl-card .pl-per{font-size:13px;line-height:1.5;color:var(--faint);margin:6px 0 20px}
.cardgrid.plans.pl-grid>.pl-card .pl-for{color:var(--muted);font-size:14px}
.cardgrid.plans.pl-grid>.pl-card .pl-big{font-size:15px;color:var(--ink)}@media(min-width:901px){
  .cardgrid.plans.pl-grid{align-items:stretch}
  .cardgrid.plans.pl-grid>.pl-card.pl-card{display:grid;grid-row:span 9;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .cardgrid.plans.pl-grid>.pl-card.pl-card .guide-form{margin-top:0;align-self:start}
  .cardgrid.plans.pl-grid>.pl-card.pl-card .checks{margin-bottom:0}}
.pl-vat{text-align:center;font-size:13.5px;color:var(--muted);margin:26px 0 0}
.pl-student{margin-top:14px}
.pl-top{max-width:1100px;margin:clamp(40px,4vw,60px) auto 0}
.pt-h{font-size:clamp(20px,1.9vw,24px);margin:0 0 16px}
.pl-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pl-pack{background:var(--grey);border-radius:14px;padding:20px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start}
.pl-pack .pl-pack-n{margin:0;font-size:14px;color:var(--muted)}
.pl-pack .pl-pack-n b{font-family:var(--disp);font-size:30px;font-weight:650;color:var(--ink);margin-right:4px}
.pl-pack .pl-pack-p{margin:0;font-family:var(--disp);font-size:26px;font-weight:650;grid-row:span 2;align-self:center}
.pl-pack .pl-pack-s{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.pl-pack .btn{grid-column:1/-1;margin-top:12px;justify-content:center}
.pt-note{font-size:14px;color:var(--muted);margin:14px 0 0}
.pt-wrap{max-width:1100px;margin:clamp(44px,4.4vw,64px) auto 0}
.pt-wrap .pt-note{margin:0 0 16px}
.pt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hair);border-radius:14px;background:#fff}
.ptable{width:100%;min-width:620px;border-collapse:collapse;font-size:14px}
.ptable th,.ptable td{padding:11px 14px;border-bottom:1px solid var(--hair);text-align:center;font-weight:400}
.ptable thead th{font-family:var(--disp);font-weight:650;font-size:15px;background:var(--grey)}
.ptable th[scope=row],.ptable thead th:first-child{text-align:left}
.ptable tr.pt-g th{text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--grey);font-weight:600}
.ptable td .ci{display:inline-flex;margin:0;vertical-align:middle}
.ptable td .ci svg{width:18px;height:18px;color:var(--ink)}
.ptable td .ci.ci-neg svg{color:var(--faint,#b9b4aa);width:14px;height:14px}
.ptable tbody tr:last-child>*{border-bottom:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:900px){.pl-packs{grid-template-columns:1fr}}
.guide-card{background:var(--ink);color:#fff;border-radius:14px;padding:clamp(30px,3.6vw,44px);position:sticky;top:110px}
.guide-card .guide-logo{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.9;margin-bottom:18px;display:block}
.guide-card .gcover{width:100%;border-radius:10px;aspect-ratio:4/3;object-fit:cover;margin:-4px 0 22px}
.guide-card .ph{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b6b2a9;margin-bottom:16px}   /* was var(--ink) on the --ink card: invisible (blog session, 30 Oct) */
.guide-card h3{color:#fff;font-size:clamp(23px,2.6vw,29px);font-weight:800;letter-spacing:-0.03em;line-height:1.06;margin-bottom:10px}
.guide-card .gsub{color:#c8c7c2;font-size:15px;font-weight:500;margin-bottom:14px;line-height:1.45}
/* Tick lists on the dark card: white text and ticks (the light cards use ink; Siim, 26 Sep). */
.guide-card .checks li{color:#fff}
.guide-card .checks .ci svg,body.chk-bold .guide-card .checks .ci svg{color:#fff}
.guide-card>p{color:#c8c7c2;font-size:15px;line-height:1.6;margin-bottom:22px}
.guide-list{list-style:none;margin-bottom:22px}
.guide-list li{position:relative;padding-left:24px;margin-bottom:11px;color:#d4d3ce;font-size:14.5px;line-height:1.45}
.guide-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:#fff}
.guide-form{display:flex;flex-direction:column;gap:11px}
.guide-form input{font-family:var(--sans);font-size:15px;padding:15px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff}
.guide-form input::placeholder{color:#b6b2a9}
.guide-form input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.14)}
.guide-form .btn{width:100%;justify-content:center}
/* Free PDF guide form (30 Oct 2026): email, role, an UNTICKED opt-in for the 2 follow-up emails. */
.mg-form select{font-family:var(--sans);font-size:15px;padding:15px 44px 15px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;
  background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6b2a9' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center/14px;-webkit-appearance:none;appearance:none}
.mg-form select:invalid{color:#b6b2a9}
.mg-form select option{color:var(--ink)}
.mg-form select:focus{outline:none;border-color:var(--accent)}
.mg-opt{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:#cfcbc2;cursor:pointer;padding:2px 4px}
.mg-opt input{flex:0 0 auto;width:17px;height:17px;margin:2px 0 0;accent-color:var(--accent)}
.mg-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.mg-err{margin:0;font-size:13.5px;color:#ffb4b4}
.mg-form.busy .btn{opacity:.6;pointer-events:none}
.mg-ok b{display:block;color:#fff;font-size:18px;margin-bottom:6px}
.mg-ok p{margin:0 0 16px;font-size:14.5px;color:#cfcbc2;line-height:1.55}
.mg-ok .btn{width:100%;justify-content:center}
.guide-note{font-size:12.5px;color:#9a9992;margin-top:16px;line-height:1.5}@media(max-width:820px){.price-grid{grid-template-columns:1fr;gap:34px}.guide-card{position:static}}

/* WORKFLOW spec */
/* The two images are lifted out of the columns into one edge-to-edge strip of 2,
   butted together with no gap; the spec tables stay inside .wrap. */
.flow-strip{display:grid;grid-template-columns:1fr 1fr;gap:0;width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2);margin-bottom:clamp(30px,4vw,52px)}
.flow-strip img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:0}
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px)}
.flow-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:24px}
.flow-block h4{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.flow-row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.flow-row .fk{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-0.01em}
.flow-row .fv{color:var(--body);font-size:15px;line-height:1.5}
.flow-row .fv b{color:var(--ink);font-weight:700}
.flow-foot{margin-top:30px;font-size:16px;color:var(--body);line-height:1.6}@media(max-width:820px){.flow-grid{grid-template-columns:1fr;gap:30px}.flow-row{grid-template-columns:130px 1fr}}@media(max-width:560px){.flow-strip img{aspect-ratio:1/1}}@media(max-width:480px){.flow-row{grid-template-columns:1fr;gap:4px}}