/* PPLI.com for advisors — the design layer.
 *
 * The page and the workspace were built weeks apart and it showed. This sheet
 * brings the public page onto the same system as the product it is selling:
 * the same navy and gold, the same two typefaces doing the same two jobs, the
 * same hairline grids, the same restraint about where gold is allowed to
 * appear. Someone who reads this page and then signs in should not feel they
 * have moved between two products.
 *
 * It also supplies the components for the two sections that were rebuilt: the
 * hero, which had a page-wide column of text against an empty right half, and
 * the workspace section, which described features by names the workspace no
 * longer uses. Both now show the actual interface, drawn in the page's own
 * HTML rather than pasted in as a picture, so it stays sharp on any screen and
 * stays honest about what is behind the login.
 */

.pp.adv{
  --a-nv:#0A0F17;
  --a-nv2:#131A26;
  --a-gd:#B09548;
  --a-gd-deep:#8F7734;
  --a-gd-wash:rgba(176,149,72,.09);
  --a-cr:#F9F8F4;
  --a-cr2:#EFEDE6;
  --a-ln:#DDD9D0;
  --a-tx:#1A1916;
  --a-mu:#7A776F;

  --ai-academy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6 2.6 9 12 13.4 21.4 9 12 4.6Z'/%3E%3Cpath d='M6.4 11.2v5.2c0 1.2 2.5 2.6 5.6 2.6s5.6-1.4 5.6-2.6v-5.2'/%3E%3C/svg%3E");
  --ai-tools:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.2' y='3.2' width='13.6' height='17.6' rx='1.2'/%3E%3Cpath d='M8.4 7h7.2'/%3E%3Cpath d='M9 11.6h.01M12 11.6h.01M15 11.6h.01M9 15.4h.01M12 15.4h.01M15 15.4h.01'/%3E%3C/svg%3E");
  --ai-corridor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 19.4 9.4 12l3.8 3 6.8-9.6'/%3E%3Cpath d='M3.6 14 9.4 7.4l3.8 3 6.8-7.2' opacity='.55'/%3E%3C/svg%3E");
  --ai-diversify:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 3.6V12l7.3 4.2'/%3E%3C/svg%3E");
  --ai-excise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h7.6L18 7.8V20.6H6Z'/%3E%3Cpath d='M13.4 3.4v4.4H18'/%3E%3Cpath d='m14.6 11.4-5.2 6.2'/%3E%3Ccircle cx='9.9' cy='11.9' r='1'/%3E%3Ccircle cx='14.1' cy='17.1' r='1'/%3E%3C/svg%3E");
  --ai-opps:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='5' height='16' rx='1'/%3E%3Crect x='9.5' y='4' width='5' height='11' rx='1'/%3E%3Crect x='16' y='4' width='5' height='7' rx='1'/%3E%3C/svg%3E");
  --ai-clients:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.8 20c.6-3.6 3.2-5.6 6.2-5.6s5.6 2 6.2 5.6'/%3E%3Cpath d='M16 5.4a3.2 3.2 0 0 1 0 6.2'/%3E%3Cpath d='M17.6 14.9c1.9.8 3.1 2.6 3.6 5.1'/%3E%3C/svg%3E");
  --ai-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5' width='16.8' height='15.4' rx='1.2'/%3E%3Cpath d='M8 3.2v3.6M16 3.2v3.6M3.6 10h16.8'/%3E%3Cpath d='m9.4 14.6 2 2 3.4-4'/%3E%3C/svg%3E");
  --ai-enquiries:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.2' width='18' height='13.6' rx='1.2'/%3E%3Cpath d='M3.4 6.6 12 13l8.6-6.4'/%3E%3C/svg%3E");
  --ai-meeting:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6.8' width='18' height='13.4' rx='1.2'/%3E%3Cpath d='M9 6.8V5.2c0-.7.6-1.3 1.3-1.3h3.4c.7 0 1.3.6 1.3 1.3v1.6'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
  --ai-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='M12 3.6c2.3 2.6 3.5 5.4 3.5 8.4S14.3 17.8 12 20.4c-2.3-2.6-3.5-5.4-3.5-8.4S9.7 6.2 12 3.6Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. Rhythm.

   The page was set on a 1160 column with generous section padding, which read
   as air at the top of a section and a void at the bottom. Sections are pulled
   in, and every heading now carries a hairline that runs to the right margin —
   the device the workspace uses to turn a scroll into a sequence of bands.
   ========================================================================== */

.pp.adv .mx-w{max-width:1200px;padding:0 34px}
.pp.adv .sx{padding:82px 0}
.pp.adv .sx.dk{padding:88px 0}

.pp.adv .hd{margin-bottom:36px;position:relative}
.pp.adv .hd h2{font-size:34px;line-height:1.12;letter-spacing:-.012em;margin:12px 0 0}
.pp.adv .sx.lt .hd h2,.pp.adv .sx.cr .hd h2{color:var(--a-nv)}
.pp.adv .hd .lede{margin-top:14px;max-width:720px;font-size:16px;line-height:1.8}
.pp.adv .eyebrow{position:relative;padding-left:0;font-size:8.5px;letter-spacing:.26em;color:var(--a-gd)}
.pp.adv .sx.lt .eyebrow,.pp.adv .sx.cr .eyebrow{color:var(--a-gd-deep)}

/* A rule under the heading block, carried to the right edge of the column. */
.pp.adv .sx > .mx-w > .hd:after,
.pp.adv .sx > .mx-w > .hd2:after{content:"";display:block;height:1px;margin-top:28px;
  background:var(--a-ln)}
.pp.adv .sx.dk > .mx-w > .hd:after,
.pp.adv .sx.dk > .mx-w > .hd2:after{background:rgba(255,255,255,.1)}

/* ==========================================================================
   2. The hero.

   Two columns. The copy keeps the measure it wants; the right half stops being
   empty and starts doing the job the page was hired for, which is showing the
   thing rather than describing it.
   ========================================================================== */

.pp.adv .hero2{padding:74px 0 78px;position:relative;overflow:hidden}
.pp.adv .hero2:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 78% 6%,rgba(176,149,72,.14),transparent 56%)}
.pp.adv .hero2 > .mx-w{position:relative}

.pp.adv .advx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:56px;align-items:center}
.pp.adv .advx-hero .mark{display:none}
.pp.adv .advx-hero h1{font-size:clamp(34px,3.6vw,50px);line-height:1.07;letter-spacing:-.015em;margin:14px 0 0}
.pp.adv .advx-hero .sub{margin-top:20px;max-width:none;font-size:16.5px;line-height:1.8}
.pp.adv .advx-hero .btns{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.pp.adv .advx-hero .note{margin-top:18px;font-size:10.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.36)}

/* ==========================================================================
   3. The interface, drawn in the page.

   Real markup, real type, real hairlines — the same components the workspace
   uses, at three quarters scale. Data is illustrative and says so.
   ========================================================================== */

.pp.adv .advx-ui{background:var(--a-nv2);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px rgba(0,0,0,.42);position:relative}
.pp.adv .advx-ui-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.pp.adv .advx-ui-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);display:block}
.pp.adv .advx-ui-bar em{margin-left:10px;font-style:normal;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.34);font-weight:700}
.pp.adv .advx-ui-b{display:grid;grid-template-columns:186px minmax(0,1fr)}

.pp.adv .advx-ui-rail{background:var(--a-nv);border-right:1px solid rgba(255,255,255,.07);
  padding:14px 0 18px}
.pp.adv .advx-ui-me{display:flex;gap:9px;align-items:center;margin:0 11px 4px;padding:9px;
  border:1px solid rgba(255,255,255,.08);border-left:2px solid var(--a-gd);background:rgba(255,255,255,.02)}
.pp.adv .advx-ui-me i{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--a-gd);font-style:normal;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:15px}
.pp.adv .advx-ui-me b{display:block;font-size:11px;color:#fff;font-weight:600;line-height:1.3}
.pp.adv .advx-ui-me span{display:block;font-size:8.5px;color:rgba(255,255,255,.42);line-height:1.4;margin-top:1px}

.pp.adv .advx-ui-g{font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.3);padding:15px 14px 7px;margin-top:4px;position:relative}
.pp.adv .advx-ui-g:before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:rgba(255,255,255,.07)}
.pp.adv .advx-ui-g:first-of-type:before{display:none}

.pp.adv .advx-n{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 12px;
  font-size:11px;color:rgba(255,255,255,.6);border-left:2px solid transparent;line-height:1.4}
.pp.adv .advx-n:before{content:"";width:13px;height:13px;flex:0 0 13px;background-color:currentColor;
  opacity:.52;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:13px 13px;mask-size:13px 13px;
  -webkit-mask-image:var(--ai-tools);mask-image:var(--ai-tools)}
.pp.adv .advx-n b{margin-left:auto;font-size:8.5px;font-weight:700;color:rgba(255,255,255,.34);
  font-variant-numeric:tabular-nums}
.pp.adv .advx-n.on{color:#fff;font-weight:600;border-left-color:var(--a-gd);
  background:linear-gradient(90deg,rgba(176,149,72,.16),rgba(176,149,72,.02))}
.pp.adv .advx-n.on:before{opacity:1;background-color:var(--a-gd)}
.pp.adv .advx-n.on b{color:var(--a-gd)}

.pp.adv .advx-n.i-academy:before{-webkit-mask-image:var(--ai-academy);mask-image:var(--ai-academy)}
.pp.adv .advx-n.i-tools:before{-webkit-mask-image:var(--ai-tools);mask-image:var(--ai-tools)}
.pp.adv .advx-n.i-corridor:before{-webkit-mask-image:var(--ai-corridor);mask-image:var(--ai-corridor)}
.pp.adv .advx-n.i-diversify:before{-webkit-mask-image:var(--ai-diversify);mask-image:var(--ai-diversify)}
.pp.adv .advx-n.i-excise:before{-webkit-mask-image:var(--ai-excise);mask-image:var(--ai-excise)}
.pp.adv .advx-n.i-opps:before{-webkit-mask-image:var(--ai-opps);mask-image:var(--ai-opps)}
.pp.adv .advx-n.i-clients:before{-webkit-mask-image:var(--ai-clients);mask-image:var(--ai-clients)}
.pp.adv .advx-n.i-calendar:before{-webkit-mask-image:var(--ai-calendar);mask-image:var(--ai-calendar)}
.pp.adv .advx-n.i-enquiries:before{-webkit-mask-image:var(--ai-enquiries);mask-image:var(--ai-enquiries)}
.pp.adv .advx-n.i-meeting:before{-webkit-mask-image:var(--ai-meeting);mask-image:var(--ai-meeting)}
.pp.adv .advx-n.i-globe:before{-webkit-mask-image:var(--ai-globe);mask-image:var(--ai-globe)}

.pp.adv .advx-ui-m{background:#FBFAF7;padding:16px}
.pp.adv .advx-ui-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--a-ln);border:1px solid var(--a-ln);margin-bottom:14px;position:relative}
.pp.adv .advx-ui-tiles:before{content:"";position:absolute;top:-1px;left:-1px;width:33%;height:2px;background:var(--a-gd)}
.pp.adv .advx-ui-tiles > div{background:#fff;padding:11px 12px}
.pp.adv .advx-ui-tiles span{display:block;font-size:7px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--a-mu)}
.pp.adv .advx-ui-tiles b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:22px;line-height:1.1;color:var(--a-nv);margin:5px 0 3px;letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums}
.pp.adv .advx-ui-tiles > div:first-child b{color:var(--a-gd-deep)}
.pp.adv .advx-ui-tiles em{font-style:normal;font-size:8.5px;color:var(--a-mu);line-height:1.5}

.pp.adv .advx-ui-cal{border:1px solid var(--a-ln);background:#fff}
.pp.adv .advx-ui-calh{font-size:7px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--a-mu);padding:9px 12px;border-bottom:1px solid var(--a-cr2)}
.pp.adv .advx-ui-row{display:flex;gap:11px;align-items:center;padding:9px 12px;
  border-top:1px solid var(--a-cr2);border-left:2px solid var(--a-gd)}
.pp.adv .advx-ui-row:first-of-type{border-top:none}
.pp.adv .advx-ui-row > i{font-style:normal;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:17px;color:var(--a-nv);line-height:1;text-align:center;flex:0 0 26px;
  font-variant-numeric:lining-nums}
.pp.adv .advx-ui-row > i u{display:block;text-decoration:none;font-family:'DM Sans',sans-serif;
  font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mu);margin-top:2px}
.pp.adv .advx-ui-row > div{min-width:0;flex:1 1 auto}
.pp.adv .advx-ui-row b{display:block;font-size:10.5px;color:var(--a-nv);font-weight:600;line-height:1.4}
.pp.adv .advx-ui-row span{display:block;font-size:8.5px;color:var(--a-mu);line-height:1.4;margin-top:1px}
.pp.adv .advx-ui-row > s{text-decoration:none;font-size:7px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--a-gd-deep);border:1px solid rgba(176,149,72,.35);padding:2px 6px;flex:0 0 auto}

.pp.adv .advx-cap{margin-top:12px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.28);text-align:right}
.pp.adv .sx.lt .advx-cap,.pp.adv .sx.cr .advx-cap{color:var(--a-mu)}

/* ==========================================================================
   4. The workspace section.
   ========================================================================== */

.pp.adv .advx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);
  gap:46px;align-items:start}
.pp.adv .advx-split .lede{max-width:none}

.pp.adv .advx-list{margin:26px 0 0;padding:0;list-style:none}
.pp.adv .advx-li{display:flex;gap:13px;padding:15px 0;border-top:1px solid rgba(255,255,255,.09)}
.pp.adv .sx.lt .advx-li,.pp.adv .sx.cr .advx-li{border-top-color:var(--a-cr2)}
.pp.adv .advx-li:before{content:"";width:15px;height:15px;flex:0 0 15px;margin-top:2px;
  background-color:var(--a-gd);opacity:.9;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:15px 15px;mask-size:15px 15px;
  -webkit-mask-image:var(--ai-tools);mask-image:var(--ai-tools)}
.pp.adv .advx-li.i-clients:before{-webkit-mask-image:var(--ai-clients);mask-image:var(--ai-clients)}
.pp.adv .advx-li.i-opps:before{-webkit-mask-image:var(--ai-opps);mask-image:var(--ai-opps)}
.pp.adv .advx-li.i-calendar:before{-webkit-mask-image:var(--ai-calendar);mask-image:var(--ai-calendar)}
.pp.adv .advx-li.i-enquiries:before{-webkit-mask-image:var(--ai-enquiries);mask-image:var(--ai-enquiries)}
.pp.adv .advx-li.i-meeting:before{-webkit-mask-image:var(--ai-meeting);mask-image:var(--ai-meeting)}
.pp.adv .advx-li.i-academy:before{-webkit-mask-image:var(--ai-academy);mask-image:var(--ai-academy)}
.pp.adv .advx-li.i-globe:before{-webkit-mask-image:var(--ai-globe);mask-image:var(--ai-globe)}
.pp.adv .advx-li b{display:block;font-size:13.5px;color:#fff;font-weight:600;line-height:1.45}
.pp.adv .sx.lt .advx-li b,.pp.adv .sx.cr .advx-li b{color:var(--a-nv)}
.pp.adv .advx-li p{margin:4px 0 0;font-size:12.5px;line-height:1.72;color:rgba(255,255,255,.52)}
.pp.adv .sx.lt .advx-li p,.pp.adv .sx.cr .advx-li p{color:var(--a-mu)}

/* The clients table, at page scale. */
.pp.adv .advx-tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--a-ln)}
.pp.adv .advx-tbl th{background:var(--a-cr);color:var(--a-nv);font-size:7.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;text-align:left;padding:9px 11px;
  border-bottom:1px solid var(--a-ln)}
.pp.adv .advx-tbl td{padding:10px 11px;border-top:1px solid var(--a-cr2);font-size:11px;
  color:var(--a-tx);vertical-align:top}
.pp.adv .advx-tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
.pp.adv .advx-tbl .nm{font-size:11.5px;color:var(--a-nv);font-weight:600;line-height:1.35}
.pp.adv .advx-tbl .sb{font-size:9px;color:var(--a-mu);margin-top:1px}
.pp.adv .advx-tg{display:inline-block;font-size:7px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:2px 6px;border:1px solid var(--a-ln);color:var(--a-mu);margin-top:4px}
.pp.adv .advx-tg.gd{color:var(--a-gd-deep);border-color:rgba(176,149,72,.4)}

/* ==========================================================================
   5. Controls and small type, matched to the workspace.
   ========================================================================== */

.pp.adv .btn,.pp.adv .btn-g,.pp.adv .btn-o,.pp.adv .btn-w{
  font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  padding:13px 22px;transition:background .22s,color .22s,border-color .22s,box-shadow .22s}
.pp.adv .btn-g{box-shadow:0 1px 2px rgba(143,119,52,.3)}
.pp.adv .btn-g:hover{box-shadow:0 3px 10px rgba(143,119,52,.34)}

.pp.adv .stat .n{letter-spacing:-.015em;font-variant-numeric:lining-nums tabular-nums}
.pp.adv .stat .d{font-size:12.5px;line-height:1.7}
.pp.adv .stat .src{font-size:9px;letter-spacing:.06em}

.pp.adv .pil,.pp.adv .claims > *,.pp.adv .card{transition:border-color .2s,box-shadow .2s,transform .2s}
.pp.adv .pil:hover,.pp.adv .card:hover{box-shadow:0 4px 16px rgba(10,15,23,.08);transform:translateY(-1px)}

/* ==========================================================================
   6. Narrow.
   ========================================================================== */

@media(max-width:1080px){
  .pp.adv .advx-hero{grid-template-columns:minmax(0,1fr);gap:40px}
  .pp.adv .advx-split{grid-template-columns:minmax(0,1fr);gap:34px}
  .pp.adv .advx-cap{text-align:left}
}
@media(max-width:720px){
  .pp.adv .mx-w{padding:0 20px}
  .pp.adv .sx,.pp.adv .sx.dk{padding:58px 0}
  .pp.adv .hero2{padding:52px 0 56px}
  .pp.adv .advx-ui-b{grid-template-columns:minmax(0,1fr)}
  .pp.adv .advx-ui-rail{display:none}
  .pp.adv .advx-ui-tiles{grid-template-columns:minmax(0,1fr)}
  .pp.adv .advx-ui-tiles:before{width:100%}
  .pp.adv .hd h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .pp.adv .pil:hover,.pp.adv .card:hover{transform:none}
}

/* ==========================================================================
   7. Corrections after the first look on screen.
   ========================================================================== */

/* The hero eyebrow inherits a near-black from the light sections it was
   written for. On the navy hero it was invisible. */
.pp.adv .hero2 .tg{color:var(--a-gd);font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;font-weight:700}

/* The interface panel was a hundred pixels too narrow for three number tiles,
   so every caption broke onto three lines and the tiles came out ragged. Give
   the panel more of the row and the rail less of the panel. */
.pp.adv .advx-hero{grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:48px}
.pp.adv .advx-hero-v .advx-ui-b{grid-template-columns:170px minmax(0,1fr)}
.pp.adv .advx-hero-v .advx-ui-tiles b{font-size:20px}
.pp.adv .advx-ui-tiles em{font-size:8px;line-height:1.45}
.pp.adv .advx-ui-tiles span{line-height:1.5}

/* The rail is taller than what it opens onto, which left the panel with an
   empty white foot. The calendar takes the slack. */
.pp.adv .advx-ui-m{display:flex;flex-direction:column}
.pp.adv .advx-ui-cal{flex:1 1 auto}

/* Two-word column heads in the table were wrapping under a narrow measure. */
.pp.adv .advx-tbl th{white-space:nowrap}
@media(max-width:520px){.pp.adv .advx-tbl th{white-space:normal}}

/* The heading block carries a 720px cap from the base sheet, so the rule under
   it stopped two thirds of the way across and read as a broken underline
   rather than as the top of a band. The cap moves onto the two things that
   actually need a measure - the heading and the standfirst - and the block
   itself runs the width of the column. */
.pp.adv .sx > .mx-w > .hd,
.pp.adv .sx > .mx-w > .hd2,
.pp.adv .sx > .mx-w > .hd2 > .hd{max-width:none}
.pp.adv .hd h2{max-width:880px}
.pp.adv .hd .lede{max-width:740px}

/* The tax tag is inline, so on the one row whose entity name wraps it came to
   rest beside the second line instead of under the name like every other row.
   A block that shrinks to its content puts it on its own line, always. */
.pp.adv .advx-tg{display:block;width:-moz-fit-content;width:fit-content}

/* ==========================================================================
   8. A second look, for weight.

   Three things separate a page that looks expensive from one that merely looks
   competent, and none of them is more ornament.

   The first is that the reader is told where they are. The page runs as a
   numbered argument now, and each section carries its numeral in the display
   face, large and quiet, above the eyebrow. It costs four lines of CSS and it
   is the strongest single signal that a page was composed rather than filled.

   The second is air at the openings and discipline inside them. Sections open
   wider and close tighter, so the eye lands on the heading before anything
   else on the plate.

   The third is that gold stops being a colour and becomes a rule: the numeral,
   the hairlines, and one figure per screen. Nothing else gets it.
   ========================================================================== */

.pp.adv{counter-reset:advsec}
.pp.adv .sx{counter-increment:advsec}

.pp.adv .sx > .mx-w > .hd:before,
.pp.adv .sx > .mx-w > .hd2 > .hd:before{
  content:counter(advsec,upper-roman);
  display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:42px;line-height:.86;color:var(--a-gd);opacity:.6;
  margin:0 0 20px;letter-spacing:.03em;font-variant-numeric:lining-nums}
.pp.adv .sx.dk > .mx-w > .hd:before,
.pp.adv .sx.dk > .mx-w > .hd2 > .hd:before{opacity:.75}

/* The closing invitation and the standards note are not steps in the argument,
   so they are not numbered. */
.pp.adv > section:nth-last-of-type(-n+2) > .mx-w > .hd:before{content:none}

/* Openings breathe, interiors tighten. */
.pp.adv .sx{padding:104px 0 92px}
.pp.adv .sx.dk{padding:110px 0 98px;box-shadow:inset 0 1px 0 rgba(176,149,72,.26)}
.pp.adv .hd{margin-bottom:42px}
.pp.adv .hd h2{font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.018em;margin-top:12px}
.pp.adv .hd .lede{margin-top:18px;font-size:17px;line-height:1.85}
.pp.adv .sx > .mx-w > .hd:after,
.pp.adv .sx > .mx-w > .hd2:after{margin-top:34px}

/* The hero: one notch larger, one notch quieter. */
.pp.adv .hero2{padding:92px 0 96px}
.pp.adv .advx-hero h1{font-size:clamp(36px,3.9vw,54px);line-height:1.05;letter-spacing:-.02em}
.pp.adv .advx-hero .sub{font-size:17px;line-height:1.85;margin-top:24px}
.pp.adv .advx-hero .btns{margin-top:34px}

@media(max-width:720px){
  .pp.adv .sx,.pp.adv .sx.dk{padding:64px 0 56px}
  .pp.adv .sx > .mx-w > .hd:before,
  .pp.adv .sx > .mx-w > .hd2 > .hd:before{font-size:30px;margin-bottom:14px}
  .pp.adv .hero2{padding:56px 0 60px}
}

/* The two-column heading block is a grid, so the rule underneath it was being
   placed as a grid item in the first column and stopped halfway across. */
.pp.adv .sx > .mx-w > .hd2:after{grid-column:1/-1}