/* Form to PDF: what this site adds on top of the shared site.css (Choice Limit's system). */

[hidden]{display:none!important}

/* mark: a page with a folded corner; the last line is the filled-in answer */
.mark-pdf{width:22px;height:22px;flex:none;display:block}
.site-foot .mark-pdf .pg{fill:#fff}
.site-foot .mark-pdf .ln{stroke:var(--ink)}
.site-foot .mark-pdf .ans{stroke:#7fb0ff}

/* hero: the demo sits where Choice Limit's story picture sits */
.hero h1{max-width:20ch}
.try{margin:0 auto;max-width:1060px;background:var(--ground);color:var(--ink);border-radius:22px 22px 0 0;padding:22px 22px 18px;text-align:left}
.try-say{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:600;font-size:.9375rem;color:var(--ink-2);min-height:28px;margin-bottom:14px;text-align:center}
.try-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:start}
.try-col{min-width:0}
.try-lbl{font-size:.8125rem;font-weight:600;color:var(--ink-2);margin:0 0 8px 4px}
.try-arrow{display:none}

/* the respondent's form */
.f-card{background:#fff;border-radius:14px;border:1px solid var(--line);overflow:hidden}
.f-card .bar{display:block;height:8px;background:#673ab7}
.f-in{padding:16px 18px 18px}
.f-title{font-weight:700;font-size:1.0625rem;margin-bottom:12px}
.f-q{display:block;font-size:.875rem;font-weight:600;margin:12px 0 6px}
.f-card input,.f-card select{width:100%;min-height:40px;border:0;border-bottom:1px solid var(--line);background:var(--ground);border-radius:6px 6px 0 0;padding:0 10px;font:400 .9375rem var(--font);color:var(--ink)}
.f-card input:focus,.f-card select:focus{outline:none;border-bottom:2px solid #673ab7}
.f-send{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.btn-gform{min-height:38px;padding:0 20px;border-radius:6px;background:#673ab7;border-color:#673ab7;color:#fff;font-size:.9375rem}
.btn-gform:hover{background:#5a2fa3;border-color:#5a2fa3;color:#fff}
.f-note{font-size:.75rem;color:var(--ink-2)}

/* the filled PDF, as a page in a Drive folder */
.drive-path{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--ink-2);margin:0 0 8px 4px;min-width:0}
.drive-path svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
.drive-path b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page{position:relative;background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(11,31,58,.08),var(--float);padding:22px 22px 30px;min-height:300px;font-size:.8125rem;line-height:1.55;overflow:hidden}
.page::after{content:"";position:absolute;top:0;right:0;width:26px;height:26px;background:linear-gradient(225deg,var(--ground) 50%,#e4e8ef 50%);border-bottom-left-radius:4px}
.page-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.875rem;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:12px}
.page-logo i{width:18px;height:18px;border-radius:50%;background:var(--accent);display:block}
.page h4{font-size:1rem;margin:0 0 8px;letter-spacing:-.01em}
.page p{margin:0 0 8px;color:#2b3a52}
.page dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0}
.page dt{color:var(--ink-2)}
.page dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.page .sign{margin-top:14px;display:flex;justify-content:space-between;color:var(--ink-2);font-size:.75rem;border-top:1px solid var(--line);padding-top:8px}
/* a placeholder before the answer arrives, then the answer */
.ph{display:inline;font-family:inherit;font-weight:600;color:var(--accent-deep);background:var(--accent-pale);border-radius:4px;padding:0 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ph.filled{color:var(--ink);background:transparent;padding:0;animation:fillIn .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes fillIn{from{opacity:0;filter:blur(4px);transform:translateY(3px)}to{opacity:1;filter:none;transform:none}}
.pdf-stamp{position:absolute;right:14px;bottom:12px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;color:var(--coral);border:1.5px solid currentColor;border-radius:4px;padding:1px 6px;opacity:0;transform:scale(1.4)}
.page.made .pdf-stamp{opacity:1;transform:none;transition:opacity .3s ease-out .5s,transform .45s cubic-bezier(.16,1,.3,1) .5s}

/* the inbox */
.inbox{background:#fff;border-radius:14px;border:1px solid var(--line);min-height:100%;padding:14px}
.inbox-top{display:flex;justify-content:space-between;font-size:.8125rem;font-weight:600;color:var(--ink-2);margin-bottom:10px}
.inbox-empty{display:grid;place-items:center;gap:8px;text-align:center;color:var(--ink-2);font-size:.875rem;padding:36px 8px}
.inbox-empty svg{width:28px;height:28px}
.mail{border-radius:10px;background:var(--ground);padding:12px;animation:mailIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes mailIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mail-from{font-size:.8125rem;color:var(--ink-2)}
.mail-subj{font-weight:700;font-size:.9375rem;margin:2px 0 6px;overflow-wrap:anywhere}
.mail-text{font-size:.875rem;color:#2b3a52}
.attach{display:flex;align-items:center;gap:8px;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.8125rem;font-weight:600;min-width:0}
.attach .pdf-ic{flex:none;font-size:.625rem;font-weight:800;color:#fff;background:var(--coral);border-radius:3px;padding:2px 4px;letter-spacing:.03em}
.attach span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.try-foot{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px;min-height:44px}
.try-again{all:unset;cursor:pointer;color:var(--accent);font-weight:600;font-size:.9375rem;padding:10px 6px;border-radius:6px}
.try-again:hover{text-decoration:underline}
.try-again:focus-visible{outline:2px solid var(--accent)}

/* how it works: three steps beside a replica of the side panel */
.howto{list-style:none;margin:32px 0 0;padding:0;counter-reset:s}
.howto li{display:grid;grid-template-columns:36px 1fr;gap:4px 14px;padding:20px 0;border-top:1px solid var(--line)}
.howto li:last-child{border-bottom:1px solid var(--line)}
.howto li::before{counter-increment:s;content:counter(s);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.875rem;font-variant-numeric:tabular-nums}
.howto b{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.howto p{color:var(--ink-2)}
.panel{width:min(340px,100%);background:var(--ground);border-radius:14px;box-shadow:var(--float);overflow:hidden;font-size:.875rem}
.panel-top{background:#5b4fd9;color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.04em;padding:10px 14px}
.panel-in{padding:14px}
.panel-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1rem}
.on-pill{font-size:.75rem;font-weight:600;color:var(--accent-deep);background:var(--accent-pale);border-radius:999px;padding:2px 10px}
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin:10px 0 12px;font-weight:600;color:var(--ink-2);font-size:.8125rem}
.tabs span{padding:6px 0}
.tabs .cur{color:var(--ink);box-shadow:inset 0 -2px var(--ink)}
.p-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.p-card h5{margin:0 0 6px;font-size:.9375rem;font-weight:600}
.p-muted{color:var(--ink-2);font-size:.8125rem}
.p-field{margin-top:10px}
.p-field span{display:block;font-weight:600;font-size:.75rem;margin-bottom:4px}
.p-field i{display:block;font-style:normal;background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-field small{display:block;color:var(--ink-2);font-size:.75rem;margin-top:4px}
.p-btn{display:block;text-align:center;margin-top:12px;background:var(--ink);color:#fff;border-radius:999px;padding:9px;font-weight:600;font-size:.8125rem}

/* the run log */
.log{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.log li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.log li.bad{border-color:var(--coral)}
.log b{font-weight:600;font-variant-numeric:tabular-nums}
.log .why{display:block;color:var(--ink-2);font-size:.8125rem;margin-top:2px}
.log .act{display:block;color:var(--accent);font-weight:600;font-size:.8125rem;margin-top:4px}
.log .st{font-weight:600}
.log .st.ok{color:#17663a}
.log .st.no{color:var(--coral)}

/* permissions: what Google's consent screen says, side by side */
.perm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.perm-col{border-radius:20px;padding:28px;background:#fff;border:1px solid var(--line)}
.perm-col.ours{background:color-mix(in srgb,var(--sky) 35%,#fff);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.perm-col h3{font-size:1.0625rem;margin-bottom:6px}
.perm-col>p{color:var(--ink-2);font-size:.9375rem}
.consent{margin-top:18px;background:#fff;border-radius:12px;border:1px solid var(--line);padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.consent svg{width:22px;height:22px;flex:none;margin-top:1px}
.consent q{quotes:none;font-weight:600;line-height:1.45}
.perm-col.theirs .consent svg{color:var(--coral)}
.perm-col.ours .consent svg{color:var(--accent)}
.perm-note{text-align:center;color:var(--ink-2);font-size:.9375rem;margin-top:20px}

/* comparison table */
.cmp-wrap{margin-top:40px;overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:#fff}
.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:.9375rem}
.cmp th,.cmp td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-size:.875rem;color:var(--ink-2);font-weight:600;background:var(--ground)}
.cmp thead th.us{color:var(--ink);background:var(--accent-pale)}
.cmp tbody th{font-weight:600;width:22%}
.cmp td.us{background:color-mix(in srgb,var(--accent-pale) 55%,#fff);font-weight:600}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp-note{margin-top:14px;color:var(--ink-2);font-size:.875rem;text-align:center}

/* honest limits */
.not-yet{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.not-yet li{padding:16px 0;border-top:1px solid var(--line)}
.not-yet b{display:block;font-weight:600}
.not-yet span{color:var(--ink-2);font-size:.9375rem}

@media (max-width:960px){
  .try-grid{grid-template-columns:1fr;gap:12px;max-width:440px;margin:0 auto}
  .page{aspect-ratio:auto}
  .perm,.not-yet{grid-template-columns:1fr}
}
@media (max-width:600px){
  .try{padding:16px 12px 14px;border-radius:18px 18px 0 0}
  .perm-col{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .ph.filled,.mail{animation:none}
  .page.made .pdf-stamp{transition:none}
}

/* ------------------------------------------------------------------
   Inner pages (help, guides, templates, start): added with those pages
   ------------------------------------------------------------------ */
/* the homepage's .howto steps are a grid; numbered lists inside .prose keep site.css's look */
.prose ol.howto>li{display:block;padding:0 0 0 44px;border:0}
.prose ol.howto>li::before{grid-row:auto}

/* a whole template shown as a document: no fixed page shape, so every line shows */
.page.page-doc{aspect-ratio:auto;overflow:visible;max-width:680px;margin:40px auto 0;padding:44px 48px 48px;font-size:.9375rem;line-height:1.65}
.page-doc h3,.page-doc h4{font-size:1.25rem;margin:4px 0 14px}
.page-doc p{margin:0 0 12px}
.page-doc dl{gap:8px 16px;margin:16px 0}
.page-doc .ph{white-space:normal}
.page-doc .small{font-size:.8125rem;color:var(--ink-2)}
.page-note{max-width:680px;margin:14px auto 0;text-align:center;color:var(--ink-2);font-size:.9375rem}

/* the comparison table inside a guide's prose column */
.prose .cmp-wrap{margin:8px 0 12px}
.prose .cmp{min-width:560px;font-size:.9375rem}
.prose .cmp-note{text-align:left;margin:0 0 16px}

/* sources at the end of a guide */
.sources{font-size:.9375rem;color:var(--ink-2)}
.sources li{overflow-wrap:anywhere}

@media (max-width:600px){
  .page.page-doc{padding:28px 20px 32px}
}
/* placeholders written out in help and guide text */
.prose code{font-family:inherit;font-size:.95em;font-weight:600;color:var(--accent-deep);background:var(--accent-pale);border-radius:4px;padding:0 4px;overflow-wrap:anywhere}
/* the question list on a template page */
.q-table{max-width:960px;margin:32px auto 0}

/* Letterhead on the hero PDF, and the three branded example PDFs: they show the owner's own design comes through. */
.lh{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:3px solid #1f6f4a;margin-bottom:12px}
.lh-mark{width:30px;height:30px;flex:none;fill:#1f6f4a}
.lh b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1rem;letter-spacing:.01em;color:#16301f}
.lh span{display:block;font-size:.6875rem;color:var(--ink-2)}
.sig{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:.6875rem;color:var(--ink-2)}
.sig-ink{width:128px;height:30px;fill:none;stroke:#1d3d8f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;border-bottom:1px solid var(--line)}
.lh-foot{margin:10px 0 0!important;padding:6px 40px 0 0;border-top:1px solid #1f6f4a33;font-size:.6875rem;color:var(--ink-2)!important}
.letterheads{padding:72px 0}
.brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:36px auto 0;max-width:980px}
.brands figure{margin:0}
.brands figcaption{margin-top:12px;text-align:center;font-size:.9375rem;color:var(--ink-2)}
.mini{background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(11,31,58,.08),var(--float);padding:20px 20px 16px;font-size:.8125rem;line-height:1.5;border-top:5px solid var(--b);min-height:250px;display:flex;flex-direction:column}
.mini header{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.mini header svg{width:28px;height:28px;flex:none;fill:var(--b)}
.mini header b{font-size:1rem;color:var(--b)}
.mini .serif{font-family:Georgia,"Times New Roman",serif;font-style:italic}
.mini .caps{letter-spacing:.14em;text-transform:uppercase;font-size:.875rem}
.mini.mono{border-top-color:#b08d3c}
.mini h5{font-size:.9375rem;margin:0 0 8px;color:var(--ink)}
.mini dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
.mini dt{color:var(--ink-2)}
.mini dd{margin:0;font-weight:600}
.mini-foot{margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:.6875rem;color:var(--ink-2)}
@media (max-width:820px){.brands{grid-template-columns:1fr;max-width:380px;margin-inline:auto}}

/* Yes / partly / no marks in the comparison tables, so a row reads without reading every cell. */
.cmp td{line-height:1.45}
.mk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;margin:0 9px 0 0;vertical-align:-6px;flex:none}
.mk svg{width:14px;height:14px}
.mk.y{background:#dff3e6;color:#17803d}
.mk.n{background:var(--coral-pale);color:var(--coral)}
.mk.p{background:var(--amber-pale);color:#9a6b00}
.cmp td{padding-left:16px}
.cmp td .mk{float:left;margin-top:-1px}
.cmp td{overflow:hidden}
.cmp-key{display:flex;justify-content:center;align-items:center;gap:6px 6px;flex-wrap:wrap;margin:16px 0 0;color:var(--ink-2);font-size:.875rem}
.cmp-key .mk{margin:0 2px 0 12px;vertical-align:middle}
.cmp-key .mk:first-child{margin-left:0}

/* The one highlighted phrase in the hero headline: a marker stroke behind the promise. */
.hero h1 .hl{color:var(--ink);background:linear-gradient(transparent 14%,var(--amber) 14%,var(--amber) 90%,transparent 90%);padding:0 .14em;margin:0 -.04em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}