/* DATA AND PRIVACY, generated from _preview/privacy-mockup.html by scratchpad/gift/mkpvcss.py. DO NOT EDIT BY HAND: change the mockup (scratchpad/gift/mkprivacy.py) and run both scripts, then bump ?v=N. Scoped under .dpa; the mockup's body.phone is .dpa.ph here. */ /* ============ THE POLISH PASS ========================================================= His: "can you make it feel more premium?" Premium in a settings page is not decoration - it is restraint and hierarchy. Five things, each of them measurable, none of them an effect: 1. THE PANELS ARE LIT FROM ABOVE. A flat hairline on four sides reads as a wireframe. A real surface catches a little light on its top edge and drops a soft shadow, which is what tells the eye it is a THING sitting on a page rather than a rectangle drawn on one. 2. THE DIVIDERS ARE INSET. Full-bleed lines cut the card into slices. Inset to the text column they read as separations between rows of one card, which is what they are. 3. THE LABELS GET ROOM AND WEIGHT. 11px at 800 with a hairline running off to the right is a lot of shouting for a small word; a touch larger, a touch dimmer, and more space above it so each section starts rather than continues. 4. THE PILLS GET QUIETER. "Only you" and "Teammates" were competing with the row titles for attention. They are answers, not headlines. 5. THE NUMBERS LINE UP. tabular-nums, so 1, 5, 128, 1,204 sit in a column instead of wandering by a pixel or two each. ⚠️ ALL OF IT IS SCOPED TO .dpa. These are Accessibility's components, shared on purpose, and a polish pass that changed them everywhere would redecorate a page nobody asked me to touch. */ .dpa.dpa.dpa.dpa.dpa .acpanel{background:var(--panel); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent), 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.28), 0 10px 24px -18px rgba(0,0,0,.55)} .dpa.dpa.dpa.dpa.dpa .acrow + .acrow{box-shadow:none;position:relative} .dpa.dpa.dpa.dpa.dpa .acrow + .acrow::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px; background:var(--line)} .dpa.dpa.dpa.dpa.dpa .acsec{margin:34px 0 11px;font-size:calc(11.5px * var(--T));letter-spacing:.9px; color:color-mix(in srgb,var(--dim) 82%,transparent)} .dpa.dpa.dpa.dpa.dpa .acsec::after{background:color-mix(in srgb,var(--line) 70%,transparent)} .dpa.dpa.dpa.dpa.dpa .acrow small{margin-top:4px} .dpa.dpa.dpa.dpa.dpa .dpn, .dpa.dpa.dpa.dpa.dpa .dptot b{font-variant-numeric:tabular-nums} .dpa.dpa.dpa.dpa.dpa .dpwho{font-weight:calc(650 + var(--W));letter-spacing:.1px} /* the row you can open says so when you point at it, and only then */ .dpa.dpa.dpa.dpa.dpa .dpkr:hover{background:color-mix(in srgb,var(--fg) 3.5%,transparent)} .dpa.dpa.dpa.dpa.dpa .dpkr .dpch{transition:transform .16s var(--ease),color .16s} .dpa.dpa.dpa.dpa.dpa .dpkr:hover .dpch{transform:translateX(2px);color:var(--fg)} /* ============ DATA AND PRIVACY ========================================================= Rows, cards and section labels are Accessibility's, imported at build time. Below: the hero and the four controls that page did not need. Nothing here is drawn for decoration - the two things that were (a paper file and three preview tiles) are gone, because neither carried any information and one of them carried the wrong information. */ body{--T:1; --W:0; --L:1.5; --Rm:11px} /* ★ THE PAGE BREATHES. Gift Arthur is the page he keeps calling premium and its title is big with a lot of air under it; this page's was 21px with 6px of space and then straight into a wall of rows. The dialog's own heading rule still sets the size app-wide, so the extra weight is here, on this page's copy of it. */ .dpa.dpa.dpa.dpa.dpa .acsec{margin-top:36px} /* ---- THE HERO: one real number ---------------------------------------------------------- */ .dpa.dpa.dpa.dpa.dpa .dphero{position:relative;overflow:hidden;border-radius:20px;padding:30px 32px;margin:0 0 14px; display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap; background: radial-gradient(60% 120% at 0% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%), linear-gradient(150deg,#141b25,#0b0f16 80%); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent), 0 30px 60px -34px #000} /* ★ 2026-09-23, HIS: "maybe make the mark move instead of staying still." The same drift the two marks behind Arthur already have (bgDriftA in backdrop.css) - the same slow wander and tilt, scaled down to a card. That one travels 110px across a whole screen; inside a 700px panel it would swing the A through the number, so it moves about 30. ⚠️ The 12deg tilt moved INTO the keyframes. Left on the element it would have been thrown away the moment the animation set transform, and the mark would have snapped upright on the first frame - the same class of bug as any static transform under an animation. */ @keyframes dpMarkDrift{ 0%,100%{transform:translate3d(0,0,0) rotate(12deg)} 25% {transform:translate3d(-26px,-16px,0) rotate(4deg)} 50% {transform:translate3d(-12px,-30px,0) rotate(19deg)} 75% {transform:translate3d(-32px,-6px,0) rotate(2deg)} } /* ⚠️ THE BREAKDOWN IS SPANS, NOT ONE STRING, so the phone can stack it two-up. On desktop the separators are drawn BETWEEN them rather than written into the text - a middle dot typed into a string cannot be removed by a media query. */ .dpa.dpa.dpa.dpa.dpa .dpbreak{display:flex;flex-wrap:wrap;gap:0 8px} .dpa.dpa.dpa.dpa.dpa .dpbreak span + span::before{content:"·";margin-right:8px;opacity:.55} .dpa.dpa.dpa.dpa.dpa .dpbreak b{font-weight:calc(700 + var(--W));color:var(--mid)} .dpa.dpa.dpa.dpa.dpa .dphero .wm{position:absolute;right:-60px;top:-76px;width:310px;height:310px;opacity:.09; pointer-events:none;background:#fff; animation:dpMarkDrift 26s ease-in-out infinite; -webkit-mask:url(arthur-a-lg.png) no-repeat center/contain; mask:url(arthur-a-lg.png) no-repeat center/contain} /* it is the backdrop's kind of motion, so it answers the backdrop's switch, not the UI one */ body.noanim .dphero .wm, html[data-motion="off"] .dphero .wm{animation:none} .dpa.dpa.dpa.dpa.dpa .dphl{position:relative;min-width:0} .dpa.dpa.dpa.dpa.dpa .dpkicker{margin:0;font-size:calc(11px * var(--T));font-weight:calc(800 + var(--W)); letter-spacing:.9px;text-transform:uppercase;color:var(--dim)} /* the number is the hero, the way €99.99 is Billing's */ /* ★★ 2026-09-25 HIS DIAGNOSIS, and it is the one that explains five failed redraws: "they're uneven... the things about you, they're not in the middle." Measured before touching it: the phrase sat 4.5px BELOW the number's centre on the desktop card and 8px below it in the no-card version. It is baseline alignment doing exactly what it is supposed to - a 19px word and a 44px number share a baseline, so the small one hangs off the BOTTOM of the big one. Nothing about the layout around them could have fixed that, which is why nothing did: I kept moving the box while the two things inside it were misaligned. flex + center aligns them by their middles, which is how the eye reads a number with a label beside it. ⚠️ The em needs its own line-height. Left at the paragraph's 1.02 its box is shorter than its text and "centre" is computed against the wrong height - it lands close, but not on. */ .dpa.dpa.dpa.dpa.dpa .dpbig{margin:8px 0 0;font-size:calc(44px * var(--T));font-weight:calc(800 + var(--W)); letter-spacing:-1.6px;line-height:1.02; display:flex;align-items:center;flex-wrap:wrap;gap:0 10px} .dpa.dpa.dpa.dpa.dpa .dpbig em{font-style:normal;font-size:calc(19px * var(--T));font-weight:calc(700 + var(--W)); letter-spacing:-.3px;color:var(--mid);line-height:1.2} .dpa.dpa.dpa.dpa.dpa .dpbreak{margin:12px 0 0;color:var(--dim);font-size:calc(12.5px * var(--T))} .dpa.dpa.dpa.dpa.dpa .dpdlbtn{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer; border:0;background:var(--accent);color:#fff;padding:12px 20px;border-radius:var(--Rm); font-size:calc(13px * var(--T));font-weight:calc(700 + var(--W));transition:filter .14s} .dpa.dpa.dpa.dpa.dpa .dpdlbtn:hover{filter:brightness(1.08)} .dpa.dpa.dpa.dpa.dpa .dpdlbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* the one line of fine print the hero owes you, outside the card so it does not shout */ .dpa.dpa.dpa.dpa.dpa .dpfine{margin:10px 2px 0;color:var(--dim);font-size:calc(11.5px * var(--T));line-height:var(--L)} /* ---- THE PRESET TABS, the card's header ------------------------------------------------- Three equal tabs across the top of the panel, the chosen one carrying the accent and sitting on a 2px accent underline that runs along the panel's own divider. The rule the tabs sit on IS the divider between them and the first row, so the header and the list read as one card rather than as two stacked things. */ /* ★ 2026-09-25 THE QUICK SET IS ITS OWN CARD. His: "just disconnect them." It used to be the top of the switches panel, sharing its corners and its top edge, which is exactly how a page says "this belongs to that". Standing apart, above every section, it reads as what it now is: one control for the whole page. */ /* ★ the download stands between the hero and the quick set, so each of the three has one job and one voice. Its explanation is a row subtitle now, not a caption floating under a card. */ .dpa.dpa.dpa.dpa.dpa .dpdl{margin-top:12px} .dpa.dpa.dpa.dpa.dpa .dpquick{border-radius:16px;overflow:hidden;background:var(--panel); box-shadow:0 0 0 1px var(--line);margin:0 0 26px} .dpa.dpa.dpa.dpa.dpa .dpquick .dptabline{padding-bottom:16px} /* ★★ 2026-09-25 THE MARKER WAS BEING CUT IN HALF, which is most of why the top read as wrong. Measured: the card ends at 367 and the 2px bar ran 366 to 368, inside a card with overflow:hidden - so one pixel of it survived, and the rounded corners ate the ends of that. A segmented control with no visible selection is a row of three words, and that is exactly what he was looking at. It was written as bottom:-1px to sit ON the divider under the tabs, which was right when the description line lived below it and the tabs were the TOP of a taller card. That line is gone now, so the card is only the tab row and the bar has to sit inside it. */ .dpa.dpa.dpa.dpa.dpa .dpquick .dptabs{box-shadow:none} .dpa.dpa.dpa.dpa.dpa .dptabs{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),1fr); box-shadow:inset 0 -1px 0 var(--line)} .dpa.dpa.dpa.dpa.dpa .dptabs button{position:relative;border:0;background:none;cursor:pointer;color:var(--dim); padding:calc(15px * var(--acTap,1)) 10px; font-size:calc(13px * var(--T));font-weight:calc(700 + var(--W)); transition:color .14s,background .14s} /* the card clips its own corners now, so the buttons do not need to */ .dpa.dpa.dpa.dpa.dpa .dptabs button:hover{color:var(--fg);background:var(--panel2)} .dpa.dpa.dpa.dpa.dpa .dptabs button[aria-pressed="true"]{color:var(--fg)} /* ★ THE UNDERLINE IS ONE OBJECT AND IT TRAVELS. It sits ON the divider, not above or below. ⚠️ transform, not `left`: left would animate layout on every frame, and the bar is over a row of text that would then be re-laid-out 60 times a second while it slides. */ /* ★★ 2026-09-25 THE BAR IS SHORTER THAN THE TAB, and that is what he was feeling. His: "the way it switched, it feels a little bit off." It slid correctly - but it was a full third of the row wide, so what crossed the screen was a wide BLOCK rather than a marker. An underline reads as a marker when it is about the width of the word it sits under. ⚠️ The box stays one cell wide so the translate maths is untouched (one cell = 100%); the PAINT is inset with padding and background-clip, so the visible bar is a little under half a tab and still lands dead centre under each label. */ /* ⚠️ bottom:0, NOT -1px. It was -1 so the bar could sit ON the divider under the tabs, which was right while the description line lived below and the tabs were the top of a taller card. With that line gone the card IS the tab row, and overflow:hidden cut the bar in half: measured 1px of 2 surviving, with the rounded corners eating the ends of that. A picker with no visible selection is three words in a box. ⚠️ And this is the rule that has to change, not an override in .dpquick - that one lost on source order, which is the sort of thing that looks fixed in the diff and is not on the page. */ /* ★★★ 2026-09-25 THE BAR WAS ZERO PIXELS WIDE, and had been since I inset it. His: "when I have Open you cannot even see that it's selected, you removed it at the bottom, the blue." ⚠️ PERCENTAGE PADDING RESOLVES AGAINST THE CONTAINING BLOCK, NEVER THE ELEMENT. I wrote `width:calc(100%/3); padding:0 27%` meaning "a third of the row, inset by 27% of MYSELF". What the browser did: width 1060/3 = 353, then padding 27% of 1060 = 286 EACH SIDE. With border-box the padding does not fit inside 353, so the box grew to 572 and the content - which is the only part background-clip:content-box paints - came out at 0. Measured exactly that: width 572.531px, padding 0 286.266px, visible bar nothing at all. The inset moves to a child instead. An absolutely positioned element IS a containing block for its own absolutely positioned children, so 27% there finally means 27% of the bar. */ .dpa.dpa.dpa.dpa.dpa .dptabs .dpind{position:absolute;bottom:0;left:0;height:2px;width:calc(100% / var(--n,3)); transform:translateX(calc(100% * var(--i,0))); transition:transform .2s cubic-bezier(.32,.72,0,1)} .dpa.dpa.dpa.dpa.dpa .dptabs .dpind::after{content:"";position:absolute;top:0;bottom:0;left:10px;right:10px; background:var(--accent);border-radius:2px 2px 0 0} @media (prefers-reduced-motion:reduce){ .dptabs .dpind{transition:none} } .dpa.dpa.dpa.dpa.dpa .dptabs.none .dpind{opacity:0} /* the one line that says what the chosen set shows - his ask, verbatim */ .dpa.dpa.dpa.dpa.dpa .dptabline{margin:0;padding:15px 20px;color:var(--mid); font-size:calc(13px * var(--T));line-height:var(--L); box-shadow:inset 0 -1px 0 var(--line)} /* ---- the segmented picker, Arthur's own shape ------------------------------------------ */ .dpa.dpa.dpa.dpa.dpa .dpseg{display:flex;flex:none;background:var(--panel2);border-radius:calc(var(--Rm) - 1px);padding:3px;gap:2px} .dpa.dpa.dpa.dpa.dpa .dpseg button{border:0;background:none;cursor:pointer;color:var(--mid); font-size:calc(12.5px * var(--T));font-weight:calc(700 + var(--W)); padding:7px 14px;border-radius:calc(var(--Rm) - 4px);transition:background .14s,color .14s} .dpa.dpa.dpa.dpa.dpa .dpseg button:hover{color:var(--fg)} .dpa.dpa.dpa.dpa.dpa .dpseg button[aria-pressed="true"]{background:var(--accent);color:#fff} /* ---- a stated fact, not a control ------------------------------------------------------ */ .dpa.dpa.dpa.dpa.dpa .dpfact{display:inline-flex;align-items:center;gap:6px;flex:none; padding:6px 11px;border-radius:999px;font-size:calc(12px * var(--T));font-weight:calc(700 + var(--W))} .dpa.dpa.dpa.dpa.dpa .dpfact svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .dpa.dpa.dpa.dpa.dpa .dpfact.ok{color:#5fd0a0;background:color-mix(in srgb,#35c98d 14%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,#35c98d 26%,transparent)} .dpa.dpa.dpa.dpa.dpa .dpfact.none{color:var(--mid);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)} /* ---- what Arthur keeps: the hero's number, broken down --------------------------------- */ .dpa.dpa.dpa.dpa.dpa .dpkg + .dpkg{box-shadow:inset 0 1px 0 var(--line)} .dpa.dpa.dpa.dpa.dpa .dpkr{width:100%;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit} .dpa.dpa.dpa.dpa.dpa .dpkr:hover{background:var(--panel2)} /* the count, set in the same face as the hero so the column reads as its arithmetic */ .dpa.dpa.dpa.dpa.dpa .dpn{flex:none;min-width:58px;text-align:right;font-size:calc(16px * var(--T)); font-weight:calc(800 + var(--W));letter-spacing:-.4px;font-variant-numeric:tabular-nums} .dpa.dpa.dpa.dpa.dpa .dpchev{width:16px;height:16px;flex:none;fill:none;stroke:var(--dim);stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)} .dpa.dpa.dpa.dpa.dpa .dpkg.open .dpchev{transform:rotate(90deg)} .dpacc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s var(--ease)} .dpa.dpa.dpa.dpa.dpa .dpkg.open .dpacc{grid-template-rows:1fr} .dpaccin{overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 20px} .dpa.dpa.dpa.dpa.dpa .dpkg.open .dpaccin{padding:2px 20px 18px} .dpaccin small{display:block;color:var(--dim);font-size:calc(11px * var(--T)); font-weight:calc(800 + var(--W));letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px} .dpaccin span{display:block;color:var(--mid);font-size:calc(12.5px * var(--T));line-height:var(--L)} .dpa.dpa.dpa.dpa.dpa .dptot{display:flex;align-items:center;justify-content:space-between;padding:15px 20px; box-shadow:inset 0 1px 0 var(--line);color:var(--dim); font-size:calc(12.5px * var(--T));font-weight:calc(700 + var(--W))} .dpa.dpa.dpa.dpa.dpa .dptot b{font-size:calc(16px * var(--T));font-weight:calc(800 + var(--W));color:var(--fg); font-variant-numeric:tabular-nums} /* ---- the policy links ------------------------------------------------------------------- */ /* ★ THE FOOT OF THE PAGE. Quiet on purpose: these are the only things here you cannot change, so they should not compete with the things you can. */ .dpa.dpa.dpa.dpa.dpa .dpfoot{margin:34px 0 6px;text-align:center} .dpa.dpa.dpa.dpa.dpa .dpfl{margin:0;display:flex;justify-content:center;flex-wrap:wrap;gap:22px} .dpa.dpa.dpa.dpa.dpa .dpfl a{display:inline-flex;align-items:center;gap:6px;color:var(--mid);text-decoration:none; font-size:calc(12.5px * var(--T));font-weight:calc(600 + var(--W));cursor:pointer} .dpa.dpa.dpa.dpa.dpa .dpfl a:hover{color:var(--fg);text-decoration:underline} .dpa.dpa.dpa.dpa.dpa .dpfl svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;opacity:.7} /* .dpfq is gone with the sentence it styled - see the foot above. */ .dpa.dpa.dpa.dpa.dpa .dplinks button{display:inline-flex;align-items:center;gap:7px;cursor:pointer; border:0;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg); padding:9px 14px;border-radius:calc(var(--Rm) - 1px); font-size:calc(12.5px * var(--T));font-weight:calc(700 + var(--W));transition:background .14s} .dpa.dpa.dpa.dpa.dpa .dplinks button:hover{background:var(--panel3)} .dpa.dpa.dpa.dpa.dpa .dplinks svg{width:13px;height:13px;fill:none;stroke:var(--dim);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* ★★ 2026-09-25 THE HERO ON A PHONE, his "it just looks very bad". It was the desktop hero with smaller numbers: a flex row told to wrap, so the count and the button sat in a column but still measured themselves against a row, and the breakdown line ("5 workspaces · 128 shifts · 1,204 messages · 3 devices") ran into three cramped lines of middle dots. On a 390px screen that is four facts fighting for one line each. On a phone it is a COLUMN by declaration, the breakdown becomes a stack of its own with the numbers first, and the mark shrinks so it stops sitting behind the words rather than behind the card. */ /* ★ 2026-09-25 his "the download and the things about you, I think it's way too crammed". The number, the four facts and then a whole card of its own were sharing a phone screen at desktop tightness. More air inside the hero, and a real gap before the download rather than the 14px the desktop uses between two much wider cards. */ /* ★★ 2026-09-25 NO MARK ON THE PHONE, and this was HIS diagnosis: "it feels like all of them are crumped in this little corner, and then there is so much space on the right side. Maybe on the phone version we should remove the floating A." Exactly right, and it is why three rounds of padding did nothing. The A is 190px wide on a 390px screen - half the card - so the number, the phrase and the four facts were being pushed into the left half and then measured as if the card were full width. The empty space was not empty, it was occupied by something you can barely see. On a desktop card the same mark sits in genuinely spare room. On a phone there is none. */ /* ★★ 2026-09-25 IT FITS ON ONE LINE, so it goes on one line. His: "it still looks weird, make it fit better." Breaking "things about you" on to its own row was defensive - it was written while the mark still owned the right half of the card, when there genuinely was not room. With the mark gone there is: at 26px the number and the phrase measure about 250px against 322px of card. The stacked version left dead space beside BOTH lines and made the card taller for nothing. */ /* ★★ 2026-09-25 ONE LINE ON THE PHONE TOO, and the grid should never have existed. Measured: the four facts need 292px and the card gives them 322. They always fitted. I split them into 2x2 to "use the width" back when the A mark owned the right half, then kept the grid after the mark went and pushed the columns to the edges to fill it - which left a 180px hole down the middle of four short facts. That hole is what he was still seeing: "this part looks weird." Same flex row as the desktop, one gap, separators between. Nothing to align because there are no columns. ⚠️ flex-wrap stays on. 30px of headroom is thin, and someone running Text size at Large will use it up - wrapping to a ragged second line is a far smaller fault than a hole in the middle, and it is what the desktop already does at narrow widths. */ /* ★★★ 2026-09-25 THE BREAKDOWN IS NOT ON THE PHONE AT ALL, and this is the answer after four goes at arranging it. His: "this part looks weird." Every arrangement was wrong because the content was wrong for the space: 2x2 grid, columns at 1fr a gap down the middle and a ragged right edge 2x2 grid, space-between a 180px hole between two short facts one flex line 292px of facts, but the three separators add 36 and the card only has 322, so it wrapped on the last word It does not fit, and it does not need to. Those four numbers ARE the six rows of "What Arthur keeps", about two hundred pixels further down the same page - 5 workspaces, 128 shifts, 1,204 messages, 3 devices, each on its own row with room to breathe and a total underneath. The hero was showing them a second time, badly, in a strip too narrow to hold them. So on a phone the hero says the one thing a hero should: the number. The detail is where the detail lives. The desktop card has genuine room for both and keeps them. ⚠️ Hidden, not deleted from the markup: the same element is the desktop's breakdown, and the PC/Phone switch flips a class rather than rebuilding the page. */ /* ★★ 2026-09-25 THE KEEPS ROW STACKS ON A PHONE. Each row carries four things - the title and its line, the count, who can see it, and a chevron - and on a 375px screen the three on the right squeeze the text until "Email, username, password, two-step" wraps to four lines one word at a time. The words get the full width and the three answers sit under them, which is what a row does when it runs out of room. */ /* it is a row in a panel now, not a panel of its own */ /* the explanation can be two lines here without pushing anything about */ /* the narrow layout. See mkpvcss.py for why this is a media query and not a class. */ @media (max-width:600px){ .dpa.dpa.dpa.dpa.dpa .dphero{padding:22px 18px;display:block;border-radius:16px;margin-bottom:18px} .dpa.dpa.dpa.dpa.dpa .dphero .wm{display:none} .dpa.dpa.dpa.dpa.dpa .dpbreak{max-width:none} .dpa.dpa.dpa.dpa.dpa .dpbig{font-size:calc(26px * var(--T));line-height:1.1;gap:0 8px} .dpa.dpa.dpa.dpa.dpa .dpbig em{font-size:calc(14.5px * var(--T))} .dpa.dpa.dpa.dpa.dpa .dpbreak{display:none} .dpa.dpa.dpa.dpa.dpa .dpkr{flex-wrap:wrap;row-gap:10px} .dpa.dpa.dpa.dpa.dpa .dpkr .act{flex:1 0 100%} .dpa.dpa.dpa.dpa.dpa .dpkr .dpn{margin-left:0} .dpa.dpa.dpa.dpa.dpa .dpkr .dpch{margin-left:auto} .dpa.dpa.dpa.dpa.dpa .dpdl .acrow{align-items:center;gap:14px} .dpa.dpa.dpa.dpa.dpa .dpdlbtn{flex:none;width:auto} .dpa.dpa.dpa.dpa.dpa .dpdl .act small{max-width:none} .dpa.dpa.dpa.dpa.dpaccin{grid-template-columns:1fr;gap:12px} .dpa.dpa.dpa.dpa.dpa .dpseg{width:100%} .dpa.dpa.dpa.dpa.dpa .dpseg button{flex:1} .dpa.dpa.dpa.dpa.dpa .dpn{min-width:0} }