/*
    ActingPortal landing page.

    Self-contained on purpose: this page no longer loads the old
    saas-assets Bootstrap theme, which was 320KB of stylesheet to render one
    marketing page. Everything below is the page's own.
*/
:root{
    --ink:#171C24; --ink-strong:#14181F; --body:#465060; --muted:#7C8798; --faint:#939DAB;
    --line:#DCE2EB; --line-soft:#E1E7F0;
    --blue:#2E5FA3; --blue-dark:#234B82; --blue-pale:#E4EBF6; --blue-tint:#EFF3F9;
    --bg:#F1F3F7; --bg-deep:#CFD7E2; --card:#FFFFFF; --card-raised:#FBFCFE;
    --shell:1240px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:15px; line-height:1.6; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
a{ color:var(--blue-dark); text-underline-offset:3px; }
a:hover{ color:var(--blue); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
::selection{ background:rgba(46,95,163,.20); }
img{ max-width:100%; }
h1,h2,h3,h4,h5{ letter-spacing:-.03em; margin:0; }

.shell{ max-width:var(--shell); margin:0 auto; padding:0 40px; }
.section{ padding-top:96px; }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.h2{ font-weight:800; font-size:40px; line-height:1.08; }
.lede{ font-size:18px; line-height:1.6; color:var(--body); margin:0; }

/* Buttons */
.btn{
    text-decoration:none; font-weight:700; border-radius:999px;
    display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
    transition:background .15s ease;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 12px 26px rgba(46,95,163,.30); }
.btn-primary:hover{ background:var(--blue-dark); color:#fff; }
.btn-quiet{ background:rgba(255,255,255,.75); color:#212832; }
.btn-quiet:hover{ background:#fff; color:#212832; }
.btn-lg{ font-size:15.5px; padding:17px 30px; }
.btn-md{ font-size:14.5px; padding:14px 24px; }
.btn-sm{ font-size:14px; padding:12px 22px; box-shadow:0 6px 16px rgba(46,95,163,.28); }
.btn .arrow{ font-weight:400; }

/* ---- Header + hero ------------------------------------------------- */
.hero-wrap{ background:var(--bg-deep); border-radius:0 0 40px 40px; padding-bottom:96px; }
.topbar{ max-width:var(--shell); margin:0 auto; padding:26px 40px; }
.topbar-inner{
    background:rgba(255,255,255,.66); border-radius:999px;
    padding:12px 14px 12px 24px; display:flex; align-items:center; gap:36px;
    box-shadow:0 8px 24px rgba(30,45,70,.10);
}
.brand{ display:flex; align-items:center; text-decoration:none; flex:none; }
/*
    The wordmark carries its own name, so there is no text beside it. Sized
    by height because the artwork is 8:1 and a width would let it dictate
    how tall the navbar is.
*/
.brand img{ height:24px; width:auto; display:block; }
.topnav{ display:flex; gap:30px; margin-left:12px; }
.topnav a, .topbar-right a.plain{ color:#37414F; text-decoration:none; font-size:14px; font-weight:600; }
.topnav a:hover, .topbar-right a.plain:hover{ color:var(--blue); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.navtoggle{ display:none; }

.hero{ max-width:var(--shell); margin:0 auto; padding:44px 40px 0; display:grid; grid-template-columns:1fr 1.06fr; gap:56px; align-items:center; }
.badge-pill{
    display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.7);
    border-radius:999px; padding:7px 16px 7px 12px; font-size:12.5px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; color:var(--blue-dark); margin-bottom:26px;
}
.badge-pill span{ width:7px; height:7px; border-radius:999px; background:var(--blue); }
.hero h1{ font-weight:800; font-size:60px; line-height:1.04; margin:0 0 24px; text-wrap:pretty; color:var(--ink-strong); }
.hero-lede{ font-size:18.5px; line-height:1.6; max-width:29em; color:var(--body); margin:0 0 34px; }
.hero-actions{ display:flex; gap:14px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.hero-price{ font-size:13.5px; color:var(--muted); }

/* ---- The product tour ---------------------------------------------- */
.tour-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; padding:0 6px; gap:12px; }
.tour-head .label{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.tour-head .note{ font-size:12.5px; font-weight:600; color:var(--muted); }
.tour{ min-width:0; }
.window{
    background:var(--card-raised); border-radius:22px; overflow:hidden;
    box-shadow:0 2px 3px rgba(30,45,70,.06), 0 30px 70px -14px rgba(30,45,70,.40), 0 1px 0 rgba(255,255,255,.9) inset;
}
.chrome{ padding:14px 18px; display:flex; align-items:center; gap:14px; background:#EDF1F7; border-bottom:1px solid var(--line-soft); }
.lights{ display:flex; gap:7px; flex:none; }
.lights i{ width:11px; height:11px; border-radius:999px; display:block; }
.lights i:nth-child(1){ background:#F05C4B; } .lights i:nth-child(2){ background:#F5BF4F; } .lights i:nth-child(3){ background:#57C05E; }
.omnibox{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line-soft); border-radius:999px; padding:6px 14px; }
.omnibox .lock{ width:9px; height:9px; flex:none; border:1.5px solid #9FAABB; border-radius:2px 999px 999px 2px; }
.omnibox .url{ font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip{ flex:none; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--blue-pale); border-radius:999px; padding:5px 12px; }
.tabs{ padding:14px 8px 0; }
.tabs-row{ display:flex; }
.tabs-row button{ flex:1; background:none; border:0; padding:10px 6px; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--body); cursor:pointer; border-radius:10px; }
.tabs-row button:hover{ background:var(--blue-tint); }
.tabs-rail{ position:relative; height:2px; background:#E7EBF2; margin:0 6px; }
.tabs-rail i{ position:absolute; top:0; bottom:0; background:var(--blue); transition:transform .45s cubic-bezier(.4,0,.2,1); display:block; }
.viewport{ overflow:hidden; min-width:0; margin-top:16px; }
.track{ display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.slide{ padding:0 22px 22px; }
.frame{ aspect-ratio:1920/889; border-radius:14px; overflow:hidden; background:var(--blue-tint); border:1px solid #E3E8F0; }
.frame img{ width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.tour-foot{ padding:0 22px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tour-caption{ font-size:12.5px; color:var(--muted); }
.dots{ display:flex; gap:7px; }
.dots button{ width:9px; height:9px; padding:0; border:0; border-radius:999px; cursor:pointer; background:#D7DDE7; }
.dots button[aria-current="true"]{ background:var(--blue); }

/* ---- Cards --------------------------------------------------------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ background:var(--card); border-radius:22px; padding:34px 30px 32px; box-shadow:0 1px 2px rgba(30,45,70,.05), 0 18px 40px -20px rgba(30,45,70,.28); }
.step-num{ width:46px; height:46px; border-radius:999px; background:var(--blue-pale); color:var(--blue); font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.step h3{ font-weight:800; font-size:22px; letter-spacing:-.02em; margin:0 0 10px; }
.step p{ margin:0; color:var(--body); }

.split{ display:grid; grid-template-columns:1fr 1.5fr; gap:56px; align-items:end; margin-bottom:48px; }
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature{ background:var(--card); border-radius:20px; padding:30px 28px; }
/*
    The mark on each feature card. A tinted square rather than a bare glyph:
    at 22px an outline icon floating on white reads as an afterthought, and
    the block gives it enough presence to anchor the card without competing
    with the heading.
*/
.feature .mark{
    width:44px; height:44px; border-radius:12px;
    background:var(--blue-pale); color:var(--blue);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
}
.feature .ficon{ width:24px; height:24px; display:block; fill:currentColor; }
.feature h4{ font-weight:800; font-size:19px; margin:0 0 8px; letter-spacing:-.015em; }
.feature p{ margin:0; color:var(--body); font-size:14.5px; }

/* ---- Extension ----------------------------------------------------- */
.panel{ background:var(--bg-deep); border-radius:32px; padding:56px 52px; display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.panel .eyebrow{ color:var(--blue-dark); }
.panel h2{ font-weight:800; font-size:36px; line-height:1.1; margin:0 0 16px; }
.panel p{ color:var(--body); margin:0 0 12px; }
.panel p:last-child{ margin-bottom:0; }
.ext{ background:var(--card-raised); border-radius:22px; overflow:hidden; box-shadow:0 2px 3px rgba(30,45,70,.06), 0 28px 60px -18px rgba(30,45,70,.38); }
.ext-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px 14px; border-bottom:1px solid #EBEEF4; }
.ext-head .title{ font-size:13px; font-weight:800; letter-spacing:-.01em; }
.ext-body{ padding:8px 12px 14px; }
.ext-row{ display:flex; align-items:center; gap:14px; padding:13px 12px; border-radius:12px; }
.ext-row:hover{ background:#F2F5FA; }
.ext-avatar{ width:34px; height:34px; flex:none; border-radius:999px; background:var(--blue-pale); }
.ext-avatar.new{ background:var(--blue-tint); }
.ext-text{ flex:1; min-width:0; }
.ext-text .who{ font-size:14px; font-weight:700; }
.ext-text .sub{ font-size:12.5px; color:var(--muted); }
.ext-flag{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); background:var(--blue-pale); border-radius:999px; padding:4px 10px; }
.ext-flag.off{ color:var(--muted); background:var(--blue-tint); }

/* ---- Pricing ------------------------------------------------------- */
.pricing{ display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center; }
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.plan{ background:var(--card); border-radius:22px; padding:32px 28px; }
.plan.best{ background:var(--card-raised); box-shadow:0 2px 3px rgba(30,45,70,.06), 0 26px 56px -18px rgba(30,45,70,.38); }
.plan-name{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.plan-flag{ background:var(--blue); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.plan-price{ font-weight:800; font-size:44px; letter-spacing:-.03em; margin:12px 0 4px; }
.plan-price small{ font-size:16px; font-weight:600; color:var(--muted); }
.plan-for{ font-size:13.5px; color:#37414F; font-weight:600; margin-bottom:6px; }
.plan-note{ font-size:13px; color:var(--muted); margin-bottom:24px; }
.btn-plain{ background:#E8EDF5; color:#212832; }
.btn-plain:hover{ background:#DCE4EF; color:#212832; }
.plan-includes{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px 22px; padding-top:4px; }
.plan-includes div{ display:flex; gap:9px; align-items:center; font-size:14px; color:#37414F; }
.plan-includes div::before{ content:""; width:6px; height:6px; flex:none; border-radius:999px; background:var(--blue); }

/* ---- FAQ ----------------------------------------------------------- */
.faq{ display:grid; grid-template-columns:1fr 1.5fr; gap:56px; align-items:start; }
.faq h2{ margin-bottom:16px; }
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--line); padding:22px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item h5{ font-weight:800; font-size:17px; margin:0 0 8px; letter-spacing:-.015em; }
.faq-item p{ margin:0; color:var(--body); font-size:14.5px; }

/* ---- Closing CTA + footer ------------------------------------------ */
.closer{ background:var(--blue); color:#fff; border-radius:32px; padding:76px 56px; }
.closer h2{ font-weight:800; font-size:60px; line-height:1.03; letter-spacing:-.035em; margin:0 0 24px; max-width:20em; }
.closer p{ font-size:18px; line-height:1.6; color:rgba(255,255,255,.86); margin:0 0 32px; max-width:38em; }
.closer .actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn-light{ background:#fff; color:var(--blue-dark); }
.btn-light:hover{ background:var(--blue-pale); color:var(--blue-dark); }
.btn-glass{ background:rgba(255,255,255,.16); color:#fff; }
.btn-glass:hover{ background:rgba(255,255,255,.26); color:#fff; }

/*
    Two zones: who this is, and where everything else lives. A grid rather
    than the flex row it started as, because the link zone went from three
    columns to five and flex kept solving that by squeezing the about block
    until the blurb was four words wide.
*/
footer{
    max-width:var(--shell); margin:0 auto; padding:56px 40px 44px;
    display:grid; grid-template-columns:minmax(240px, 1fr) 2.6fr; gap:48px;
    align-items:start;
}
.foot-about{ min-width:0; }
.foot-brand{ margin-bottom:16px; }
.foot-brand img{ height:22px; width:auto; display:block; }
.foot-blurb{ font-size:13.5px; color:var(--muted); max-width:26em; }
.foot-sibling{ font-size:13px; color:var(--muted); margin-top:18px; }
.foot-copy{ font-size:12.5px; color:var(--faint); margin-top:26px; }
/*
    auto-fit with a floor, not five fixed columns. The widest label here is
    dealsforactors.com, so the floor is set to clear it; below that the row
    reflows to four, three, two rather than shrinking a domain name until it
    wraps mid-word.
*/
.foot-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:30px 24px; }
.foot-col{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.foot-col .head{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:2px; }
.foot-col a{ color:#37414F; text-decoration:none; font-size:13.5px; }
.foot-col a:hover{ color:var(--blue); }

/* ---- Narrower screens ---------------------------------------------- */
@media (max-width:1080px){
    .hero{ grid-template-columns:1fr; gap:44px; }
    .hero h1{ font-size:48px; }
    .grid-3, .feature-grid{ grid-template-columns:repeat(2,1fr); }
    .split, .faq, .pricing, .panel{ grid-template-columns:1fr; gap:32px; align-items:start; }
    .closer h2{ font-size:44px; }
    footer{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:720px){
    .shell, .topbar, .hero, footer{ padding-left:20px; padding-right:20px; }
    .section{ padding-top:64px; }
    .topnav{ display:none; }
    .hero{ padding-top:28px; }
    .hero h1{ font-size:36px; }
    .hero-lede{ font-size:16.5px; }
    .h2{ font-size:30px; }
    .grid-3, .feature-grid, .plans{ grid-template-columns:1fr; }
    .panel{ padding:36px 24px; border-radius:24px; }
    .closer{ padding:48px 28px; border-radius:24px; }
    .closer h2{ font-size:34px; }
    .foot-cols{ grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); gap:28px 20px; }
    .tabs-row button{ font-size:11px; padding:10px 2px; }
    .hero-wrap{ border-radius:0 0 24px 24px; padding-bottom:64px; }
}
@media (prefers-reduced-motion:reduce){
    .track, .tabs-rail i{ transition:none; }
}